2012-02-21 40 views
1

我有點新jQuery的&阿賈克斯。我有兩個問題。我有以下的HTML層次結構;jquery注入html不起作用。阿賈克斯呼籲是不穩定的

<div id="tasks"> 

    <!-- I want to inject another div task_element and change the values inside --> 

    <div id="task_element"> 

     <section class="actionframe"> ... 
     <nav class="commentsDetail"> ...  

    </div> 

    <div id="task_element"> 
     .... 
    </div> 

</div> 

html中的註釋注入是通過html按鈕單擊處理的。我有以下jquery來處理事件;

$('.addTaskBtn').click(function() { 

    if(!$('#add_task_name').val()) 
    { 
     $('.dropinput nav').slideUp(300); 
     return false; 
    } 
    else 
    {   
     // call ajax 
     var $task_name = $('#add_task_name').val(); 
     var $task_date_time = $('#add_task_date').val();   
     var $task_location = $('#add_task_location').val(); 
     var $add_task = 'add_task'; 
     var sent_data = { 
       "op": $add_task , 
       "task_name" : $task_name, 
       "task_date_time" : $task_date_time, 
       "task_location" : $task_location 
     };  

     var $out = JSON.stringify(sent_data); 

     $.ajax({ 

       type: 'POST', 
       url: 'ajax_service.php',      
       contentType: "application/json; charset=utf-8", 
       dataType: 'json', 
       data: $out,   
       success: function() { 
        //$('.dropinput nav').slideUp(300); 
        // append jquery div 
        //window.location.reload(); 
        $('#add_task_name').val(''); 
        $('#add_task_date').val(''); 
        $('#add_task_location').val(''); 
        $('.dropinput nav').slideUp(300);                 
        $('#tasks').closest('#task_element').prependTo('#tasks'); 
       }, 
       error: function(xhr, ajaxOptions ,thrownError) {   
        console.log(xhr); 
        console.log(thrownError); 
       } 

     });      
    } 

}); 

第一個問題顯然是我無法在html中實現注入。第二個問題是,當我更改成功函數中的代碼時,ajax_service變得不穩定,無法正常工作。由於不穩定,我的意思是,在第一次點擊按鈕時,它可以正常工作,但在下一次單擊中它根本不起作用(反之亦然)並引發內部服務器錯誤。

任何想法來解決這個問題?

在成功函數中更改ui是錯誤的嗎?

P.S:我幾乎可以肯定,ajax_service.php正常工作

編輯:根據評論,我會添加ajax_service.php;

...some session variables and includes other php files here ... 

$data = file_get_contents('php://input'); 
$data = json_decode($data, true); 

if($data['op'] == 'add_task') 
{ 
     $task_name = $data['task_name']; 
     $task_location = $data['task_location'];   
     $task_date_time = $data['task_date_time']; 
     $task_date_time = trim($task_date_time); 

     if($task_date_time != "") 
     {   
      $date_time = explode(" ", $task_date_time);    
      $task_date = "'".$date_time[0]."'";   
      $task_time = "'".$date_time[1]."'"; 

      if(trim($task_date) == "''") 
      { 
       $task_date = 'NULL'; 
      } 
      if(trim($task_time) == "''") 
      { 
       $task_time = 'NULL'; 
      }  
      if(($task_date == 'NULL')) 
      {    
       $task_time = "'".$date_time[0]."'"; 
      } 
     } 
     else 
     {   
      $task_date = 'NULL'; 
      $task_time = 'NULL';    
     } 

     // 0 : history, 1 : today, 2 : later 
     // compare browser time and task_date and define $time3 variable 
     $task_time3 = 1; 

     if(isset($task_name)) 
     { 
      if($task_location == "") 
      { 
       $task_location = NULL; 
      } 

      $result_add_task = add_task($profile_id, $task_name, $task_location, $task_date, $task_time3, $task_time); 
      if($result_add_task['result']) 
      { 
       $return['error'] = false; 
       $return['msg'] = $result_add_task['description']; 
       $return['op'] = 'add_task'; 
      } 
      else 
      { 
       $return['error'] = true; 
       $return['msg'] = $result_add_task['description']; 
       $return['op'] = 'add_task';   
      } 

     } 
     else 
     { 
      $return['error'] = true; 
      $return['msg'] = 'task_name is empty'; 
      $return['op'] = 'add_task'; 
     } 

     echo json_encode($return); 
} 
+0

現在,它在Firefox和Chrome中正常工作。它在safari中不起作用。它驅使我真的很瘋狂 – aacanakin 2012-02-21 15:42:24

+0

好吧,我只是注意到,當我直接訪問ajax_service.php時,有時它說壞請求(如我所料),有時它會給服務器錯誤 – aacanakin 2012-02-21 16:07:44

回答

2

ajax_service.php內部服務器錯誤提示無法正常工作。原則上改變成功功能中的UI是可以的。然而,從你的代碼我不能輕易發現你要做的事情。從我從您的意見理解你正在嘗試在以下表單中添加一個任務#tasks

<div id="task_element"> 
    <section class="actionframe"> ... 
    <nav class="commentsDetail"> ...  
</div> 

如果這是你可能需要創建一個新的div並追加它像這樣

var div = '<div id="task_element"><section class="actionframe">' + whatever_data_has_been_returned_from_server + '<nav class="commentsDetail"></div>' 
$('#tasks').prepend($(div)) 
的情況下

,而不是你的這部分代碼

$('#add_task_name').val(''); 
$('#add_task_date').val(''); 
$('#add_task_location').val(''); 
$('.dropinput nav').slideUp(300); 
$('#tasks').closest('#task_element').prependTo('#tasks'); 
+0

所以,我需要在jQuery中創建html。好吧,讓我測試一下 – aacanakin 2012-02-21 14:02:27

+0

第一個問題就解決了。我需要一個Ajax調用不穩定的解決方案。 – aacanakin 2012-02-21 14:36:37

+0

請給我們更多的代碼。 msgmash。com急於找到該錯誤,以及^^ – joidegn 2012-02-21 14:45:14

2

我認爲問題的一部分可能在於這個代碼

function() { 
       //$('.dropinput nav').slideUp(300); 
       // append jquery div 
       //window.location.reload(); 
       $('#add_task_name').val(''); 
       $('#add_task_date').val(''); 
       $('#add_task_location').val(''); 
       $('.dropinput nav').slideUp(300);                 
       $('#tasks').closest('#task_element').prependTo('#tasks'); 

我想這應該是

function(data) { 
       //$('.dropinput nav').slideUp(300); 
       // append jquery div 
       //window.location.reload(); 
       $('#add_task_name').val(''); 
       $('#add_task_date').val(''); 
       $('#add_task_location').val(''); 
       $('.dropinput nav').slideUp(300);                 
       $('#tasks').prepend(data); 

,因爲你要插入你從PHP取回數據應用到#tasks div下的div列表中。函數的data參數保存從服務器端應用程序返回的響應數據(在本例中爲ajax_service.php)。

+0

PS。如果ajax_service.php有問題,我們將需要看到一些代碼。 – 2012-02-21 13:02:44

+0

我已經添加了ajax_service.php。它有時會產生錯誤,有時不會產生相同的輸入。 – aacanakin 2012-02-21 15:25:14

0

我已經想通了關於Ajax調用的不穩定性。我把我的ajax調用後return false和禁用緩存cache : false