Question

I have a bizzare issue that I haven’t been able to resolve no matter what I try. One section of ajax code refreshes the div tag successfully after form submission – exibit no.1, while another identical section of the code somehow does not want to refresh the same div tag – exibit no.2.

The only difference is that the form that is submitted for exibit no.1 is in the same file (monpanel.php) in which also the div that needs refreshing lies, while the form that accesses exibit no.2 lies in another file (monform.php) and tries to refresh the same div present in the monpanel.php.

The uid2 variable is passing to the .js file and that section of the code successfully (alert outputs the correct uid number) as the alerts show, it even goes all the way to the “success” alert, but the div STILL doesn’t refresh. How frustrating 🙂

In monpanel.php is this

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

call to set the variable uid into the .js file (validate.js) in which both of these functions to process the forms and refresh the div tag lie. In monform.php it is similar:

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

Here is the validate.js file (exibit no.1 at the top, exibit no.2 at the bottom):

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

Answer 1

If your

alert("Success!");

is properly being called, my guess is that selector you’re using:

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

Is returning 0 elements, so the HTML never gets added.

I can’t verify that for you without seeing your HTML code, but in that success function, try seeing if $(‘#list_monitors’).length > 0. If it’s not, then the problem is in your markup/jquery selector.