Question

I am having great difficulty passing a variable from a PHP file to .js files

The code in the PHP file I used is this:

<script>

jQuery(document).ready(function(){
    var uid = <?php echo (intval($uid)); ?>;
    //var uid = <?php echo(intval($_SESSION['uid'])); ?>.val();

  });
</script>

The variable value should be passed into the .js file to refresh just a certain div on the page (not the whole page) after a form submission is performed.

This is the .js file and the corresponding code starts at “// refresh the monitor list div”:

    $(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
$(document).ready(function(){
   $(".error").hide();  
   alert("Stage 0! -> uid="+uid.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="+uid.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 uid = $("input#uid").val();
                //var dataString8 = 'ajax=1&uid=' + $("input#uid").val();
                var dataString8 = 'ajax=1&uid=' + uid; // .val()
                //var dataString8 = 'ajax=1&uid=19';
                alert("Stage 2! -> uid="+uid.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);
                  }
                });
              }   
            });
        }
    });
});

Needless to say I have tried everything, even renaming .js file to .php and redirecting to them with .htaccess, but that doesn’t work either.

Answer 1

The reason you cannot access the variable in your js file is that the variable ‘uid’ is defined in a different scope than the js file. Its the same thing as:

if(true) {
    var a = 1;
}

if(true) {
    // b will be undefined since 'a' was defined in another scope
    var b = a;
}

// so
jQuery(document).ready(function({
   // this is one scope
   var a = 1;
});

jQuery(document).ready(function({
   // this is another scope and b will be undefined
   var b = a;
});

You need to store the uid in a hidden field like:

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

And then inside the scope of your javascript ($(document).ready)

var uid = $("#hidUid").val();