在cakephp视图表单中调用ajax

时间:2014-04-11 05:21:46

标签: php jquery ajax cakephp

我正在创建一个视图,其中三个下拉列表将起作用    在选择角色时,请求服务器而不是名称在另一个下拉列表中,而不是对服务器的请求    ,选择数据,并在用户日志视图中生成新表。

我已经编写了代码,但它无效。

 user_activities.ctp

      <script type="text/javascript">var myBaseUrl = '<?php echo $this->base; ?>'
    var serverName='<?php echo $_SERVER['SERVER_NAME'];?>';

    function getname(name) { 
        var strURL=myBaseUrl+('/manageUsers/userActivities/')+name;
            function getXMLHTTP() {
           var x = false;
           try {
              x = new XMLHttpRequest();
           }catch(e) {
             try {
                x = new ActiveXObject("Microsoft.XMLHTTP");
             }catch(ex) {
                try {
                    req = new ActiveXObject("Msxml2.XMLHTTP");
                }
                catch(e1) {
                    x = false;
                }
             }
          }
          return x;
        }
      var req = getXMLHTTP();
      if (req) {
       req.onreadystatechange = function() {
            if (req.readyState == 4) {
             // only if "OK"
                 if (req.status == 200) {      

            document.getElementById('manageUsersName').innerHTML=req.responseText;

             } else {
   alert("Problem while using XMLHTTP:\n" + req.statusText);
                     }
        }    

       }   

       req.open("GET", strURL, true);
        req.send(null);
       }  
     }


     </script>

   <script type="text/javascript">
      $(document).ready(function(){

$('#manageUsersRole').change(function(){ 
    var selectedValue = $(this).val();
    //var id=fieldName = $(this).attr('id');

    getname(selectedValue);

    $.ajax({
    type : "POST",
          url  : myBaseUrl+('/manageUsers/userActivities/')+selectedValue, //pass query    
  string to server
         success : function(opt)
         {
     document.getElementById('manageUsersName').innerHTML = opt;  
          }
        })
        });
        });

   </script>


    <?php echo $this->Form->create('manageUsers');

        $role = array('admin' => 'Admin', 'driver' => 'Driver');
          echo $this->Form->input('role',array('type' => 'select', 'options' => 
          $role,'label' => 'Select User Type','default' => 'driver'));
      echo $this->Form->input('name',array('type' => 'select','options'=>$userList,  
      'label' => 'Select User name'));
        ?>


  I don't know if url is generating true or not How can I check????
 and what data is coming from function



  public function userActivities($role=NULL)
{
    $this->loadModel('ActivityLog');

    $userLists = $this->ActivityLog->find('list', array(
     'fields' => array('ActivityLog.user_name'),
     'conditions' => array('ActivityLog.role =' => $role)

 ));

 $userList=array();
 foreach($userLists as $key=>$value )
 {
    $userList[$value]=$value;
 }


    $this->set('userList',$userList);

} 

请求正在服务器上进行。我用萤火虫检查过。变革正在发挥作用     但第二次下降没有回应。只有两个值      在第二次下拉中重复第一次下拉。你能否提出一些改变。

1 个答案:

答案 0 :(得分:0)

我的更新代码是

var myBaseUrl =&#39; base; ?&GT;&#39;         var serverName =&#39;&#39;;

    function getXMLHTTP() {
           var x = false;
           try {
              x = new XMLHttpRequest();
           }catch(e) {
             try {
                x = new ActiveXObject("Microsoft.XMLHTTP");
             }catch(ex) {
                try {
                    req = new ActiveXObject("Msxml2.XMLHTTP");
                }
                catch(e1) {
                    x = false;
                }
             }
          }
          return x;
        }

    function getname(name) { 
        var strURL=myBaseUrl+('/manageUsers/userActivities/')+name;
      var req = getXMLHTTP();
      if (req) {
       req.onreadystatechange = function() {
            if (req.readyState == 4) {
             // only if "OK"
                 if (req.status == 200) {      
                  document.getElementById('manageUsersName').innerHTML=req.responseText;

                         } else {
                      alert("Problem while using XMLHTTP:\n" + req.statusText);
                     }
        }    

       }   

       req.open("GET", strURL, true);
        req.send(null);
       }  
     }

  <script type="text/javascript">
$(document).ready(function(){

      $('#manageUsersRole').change(function(){ 
    var selectedValue = $(this).val();
    //var id=fieldName = $(this).attr('id');

    getname(selectedValue);


        });
        });

   </script>


   <?php echo $this->Form->create('manageUsers');

       $role = array('admin' => 'Admin', 'driver' => 'Driver');
             echo $this->Form->input('role',array('type' => 'select', 'options' => 
       $role,'label' => 'Select User Type','default' => 'driver'));
       echo $this->Form->input('name',array('type' => 'select','options'=>$userList, 
   'label' => 'Select User name'));

   echo $this->Form->end('Submit');


 ?>

and controller code is 



     public function userActivities($role=NULL)
{
    $this->loadModel('ActivityLog');
    // $this->layout = 'ajax';
    $userLists = $this->ActivityLog->find('list', array(
    'fields' => array('ActivityLog.user_name'),
    'conditions' => array('ActivityLog.role =' => $role)

));

$userList=array();
 foreach($userLists as $key=>$value )
 {
    $userList[$value]=$value;
 }


    $this->set('userList',$userList);

}



 Now only problem I am facing is I get two drop down .
   on selecting value on first dropdown, value changes in 2nd dropdown but in 2nd 

dropdown
 I  am getting values of 1st dropdown + values of server response

例如:     从(管理员,司机)选择管理员    我正在进入第二个DropDown(管理员,驱动程序,AdminName)。

我的代码中存在什么问题。

我正在回复html代码     选择用户类型

    <option value="admin">Admin</option>

     <option value="driver" selected="selected">Driver</option>

     </select></div>
    <div class="input select"><label for="manageUsersName">Select User name</label>
     <select name="data[manageUsers][name]" id="manageUsersName">
     <option value="dipanshu">dipanshu</option>
  <option value="vivek">vivek</option>
 <option value="varun">varun</option>

    </select></div>
   <div class="submit"><input  type="submit" value="Submit"/></div></form>