表单提交后刷新div标签 - ajax(jquery)

时间:2011-06-18 18:22:57

标签: jquery ajax variables

无论我尝试什么,我都有一个无法解决的古怪问题。 ajax代码的一部分在表单提交后成功刷新div标签 - exibit no.1,而代码的另一个相同部分以某种方式不想刷新相同的div标签 - exibit no.2。

唯一的区别是为exibit no.1提交的表单在同一个文件(monpanel.php)中,其中还需要刷新的div,而访问exibit no.2的表单位于另一个file(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 no.1,底部的exibit no.2):

     // 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; 
        }
    });
});

1 个答案:

答案 0 :(得分:2)

如果你的

alert("Success!");

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

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

返回0个元素,因此HTML永远不会被添加。

我无法在没有看到您的HTML代码的情况下为您验证,但在该成功函数中,请尝试查看$('#list_monitors')。length&gt; 0.如果不是,那么问题出在你的标记/ jquery选择器中。