2011-06-18 142 views
1

我有一个bizzare问题,我无法解决无论我尝试什么。一段Ajax代码在表单提交后成功刷新了div标签--exibit no.1,而另一个相同的代码段不知道怎么刷新同一个div标签--exibit no.2。提交表单提交后刷新div标记 - ajax(jquery)

唯一的区别是,为exibit no.1提交的表单在同一个文件(monpanel.php)中,其中需要刷新的div在于,而访问exibit no.2的表单位于另一个文件(monform.php),并尝试刷新monpanel.php中存在的同一个div。

当警报显示时,uid2变量传递给.js文件,并且代码的该部分成功(警报输出正确的uid编号),它甚至一路通向“成功”警报,但div仍然不刷新。

在monpanel.php怎么折腾:)这是

<input type="hidden" id="hidUid2" value="<?php echo (intval($uid_form)); ?>"/> 

调用设置变量UID到.js文件(validate.js),其中这两个函数来处理表格和刷新div标签谎言。在monform.php是相似的:

<input type="hidden" id="hidUid" value="<?php echo (intval($uid)); ?>"/> 

这里是validate.js文件(在顶部exibit一号,二号exibit在底部):

 // Exibit no.1 
$(function() { 

    $(".button").click(function() { 
    // validate and process form here 

    $('.error').hide(); 
     var domain = $("input#domain").val(); 
     if (domain == "") { 
     $("label#domain_error").show(); 
     $("input#domain").focus(); 
     return false; 
    } 
     var com_domain = $("input#com_domain").val(); 
     if (com_domain == "") { 
     $("label#com_domain_error").show(); 
     $("input#com_domain").focus(); 
     return false; 
    } 
     var cemail = $("input#cemail").val(); 
     var port = $("select#port").val(); 
     var active = $("input#active").val(); 
     var uid = $("input#uid").val(); 
     var main = $("select#main").val(); 

    var dataString = 'cemail='+ cemail + '&domain=' + domain + '&com_domain=' + com_domain + '&active=' + active + '&main=' + main + '&port=' + port; 
    //alert (dataString);return false; 
    $.ajax({ 
     type: "POST", 
     url: "user_add.php", 
     data: dataString, 
     success: function() { 
     $('#monitor_form').append("<div id='message'></div>"); 
     $('#monitor_form form')[0].reset(); 
     $('#message').html("<img id='checkmark' src='images/tick.png' /><b> Monitor sucessfully added!</b>") 
     .hide() 
     .fadeIn(500, function() { 
      $('#message').append(""); 
     }); 
     setTimeout("$('#message').hide().remove();", 6000); 

     var dataString2 = 'ajax=1&uid=' + uid; 
     $.ajax({ 
      type: "GET", 
      url: "monpanel.php", 
      data: dataString2, 
      success: function(html_data){ 
       $('#list_monitors').html(html_data); 
      } 
     }); 
     //document.onkeydown = showDown; 
     } 
    }); 
    return false; 
    }); 
}); 

function showDown(evt) { 
    event = (evt)? evt : ((event)? event : null); 
    if (evt) { 
     if (event.keyCode == 8 && (event.srcElement.type!= "text" && event.srcElement.type!= "textarea" && event.srcElement.type!= "password")) { 
      // When backspace is pressed but not in form element 
      cancelKey(evt); 
     } 
     else if (event.keyCode == 116) { 
      // When F5 is pressed 
      cancelKey(evt); 
     } 
     else if (event.keyCode == 122) { 
      // When F11 is pressed 
      cancelKey(evt); 
     } 
     else if (event.ctrlKey && (event.keyCode == 78 || event.keyCode == 82)) { 
      // When ctrl is pressed with R or N 
      cancelKey(evt); 
     } 
     else if (event.altKey && event.keyCode==37) { 
      // stop Alt left cursor 
      return false; 
     } 
    } 
} 

function cancelKey(evt) { 
    if (evt.preventDefault) { 
     evt.preventDefault(); 
     return false; 
    } 
    else { 
     evt.keyCode = 0; 
     evt.returnValue = false; 
    } 
} 

/*function mycallbackfunc(v,m,f) { 
    if (v == 'Cancel') { 
     $.prompt('The action was ' + v + 'ed'); 
    } 
    else { 
     $.prompt('Monitor ' + v + 'd successfully'); 
    } 
}*/ 

// ask for validation on monitor delete, pause, resume request 
/*$(function() { 

    $(".button2").click(function() { 
    // validate and process form here 

    $('.error').hide(); 
     var act = $("input#act").val(); 
     if (act == "") { 
     //$("label#domain_error").show(); 
     //$("input#domain").focus(); 
     return false; 
    } 
     var uid = $("input#uid").val(); 
     if (uid == "") { 
     //$("label#com_domain_error").show(); 
     //$("input#com_domain").focus(); 
     return false; 
    } 
     var sid = $("input#sid").val(); 
     if (sid == "") { 
     //$("label#com_domain_error").show(); 
     //$("input#com_domain").focus(); 
     return false; 
    } 

    var dataStringDpr = 'cemail='+ cemail + '&domain=' + domain + '&com_domain=' + com_domain + '&active=' + active + '&main=' + main + '&port=' + port; 
    //alert (dataString);return false; 
    }); 
}); 
*/ 

// Exibit no.2 
$(document).ready(function(){ 
    $(".error").hide(); 

    //alert("Stage 0! -> uid="+muid.toString()); 
    $("#mondelpau").validate({ 
     debug: false, 
     rules: { 
      act: "required", 
      uid: "required", 
      sid: "required" 
     }, 
     //messages: { 
      //name: "Please let us know who you are.", 
      //email: "A valid email will help us get in touch with you.", 
     //}, 
     submitHandler: function(form) { 
      // do other stuff for a valid form 
      //$.post('delpaures.php', $("#mondelpau").serialize(), 
      //alert("Stage 1! -> uid="+muid.toString()); 
      $.ajax({ 
       async: false, 
       type: "POST", 
       url: "delpaures.php", 
       data: $("#mondelpau").serialize(), 
       success: function(data) { 
       $('#monadiv').html(data); 
       //$('#results').html(data); 
       //alert (data);return false; 

       // refresh the monitor list div 

       //$('#list_monitors').load(dataString8); 


       //var dataString8 = 'ajax=1&uid=' + $("input#uid").val(); 
       var uid2 = $("#hidUid2").val(); 
       alert("Test -> uid="+uid2.toString()); 

       var dataString9 = 'ajax=1&uid=' + uid2; 
       $.ajax({ 
        type: "GET", 
        url: "monpanel.php", 
        data: dataString9, 
        success: function(html_data){ 
         alert("Before refresh!"); 
         $('#list_monitors').html(html_data); 
         alert("Success!"); 
        } 
       }); 



       /*var dataString8 = 'ajax=1&uid=' + uid; // .val() 
       //var dataString8 = 'ajax=1&uid=19'; 
       //alert("Stage 2! -> uid="+muid.toString()); 
       $.ajax({ 
        async: false, 
        type: "GET", 
        dataType: "html", 
        url: "monpanel.php", 
        data: dataString8, 
        success: function(html_data){ 
        alert("Stage 3!"); 
        $("#list_monitors").css("background-color","#FF0000"); 
        $("#list_monitors").html(html_data); 
        alert("Success!"); 
        } 
       }); */ 
       } 
      }); 
      //return false; 
     } 
    }); 
}); 
+0

不相关,但将数据传递给'$ .ajax'函数的更有效方法是使用JSON对象。所以,而不是'var dataString ='cemail ='+ cEmail + ...''你会做'var dataString = {'cemail':cEmail,'domain':domain ...};'在Javascript中的字符串连接可以相对较慢。 –

+0

是的,你是对的,它是无关的。你碰巧对上述问题有一些提示吗? – Joe

回答

2

如果

alert("Success!"); 

正确调用,我的猜测是,你正在使用的选择:

$('#list_monitors').html(html_data); 

正在返回0个元素,所以HTML永远不会被添加。

我无法验证你没有看到你的HTML代码,但在该成功函数中,试着看看$('#list_monitors').length> 0。如果不是,那么问题在于你的标记/ jquery选择器。