To pass argument from a php file to javascript file

Question

I am facing some trouble in passing a simple variable from a php to javascript file.

I have a form which submits through a php file which basically updates the record at the server end. And if the updation is succesful, I just want to pass the message back to the javascript where I can update it on a certain section of the page.

My codes are:

Javascript code - abc.js

 function expand_cards(project, SlNo)
 {
    name = project['project_name'];
    j = "ShowForm-"+SlNo+"";

        s = "<div class='edit_project_card'>";
        s += "<form method='post' action='Edit_Project.php'><div class='project_form'>
        // Form Contents
        s += "<div class='Form_button'> <input type='submit'> </div>";
        s += "</form></div>";

    $("#"+j+"").html(s);
    response = $.parseJSON(data);
    $("#"+j+"").html(response);
}

PHP file - Edit_Project.php

<?php

//The updation stuff at the server end

if (!mysqli_query($connection,$sqlquery)) {
  $response = "'Error in your code: ' . mysqli_error($connection)";
}
else {
$response = "1 record updated";
}

echo json_encode($response);
mysqli_close($connection);
?>

But the problem is the screen is printing $response variable as it is and not exactly passing it back to the javascript function as wished. I know I can use a $.post function which can can receive argument but it's a long form and passing parameters would be difficult in that.

Can anybody help me out here ?

Thanks

Answer 1

Dirty, but it will work:

<script type="text/javascript">
 var my_var = <?php echo $some_variable; ?>
  // Do something with the new my_var
  some_func(my_var);

</script>

I wouldn't do too much detailed stuff with this though, if you can use AJAX that is better.

Note, this can only work on a .php file or one being read as such.

you'll want to do some variable handling in your php side because if the string is empty you'll end up with a

var my_var = ;

which will break the script. so something like:

var my_var = <?php echo "'" . $some_variable . "'";?>

if it's a string or if it's a number:

var my_var = <?php echo (empty($some_variable) ? null : $some_variable);

This is int specific, I'm sure you can come up with a function that will handle it better.

References:

empty function http://php.net/manual/en/function.empty.php

shorthand if http://davidwalsh.name/php-ternary-examples

Answer 2

Since you're submitting the form to the PHP file directly the browser loads the Edit_Project.php file as it would a normal page. If you want a json response to the already loaded page you'll have to use $.post or $.ajax

You can post the whole form simply by using serialize() like this:

$('#form_id').on('submit', function(e) {
    // Stop the browser from posting the form
    e.preventDefault();

    // Post the form via Ajax
    $.ajax({
      url : 'Edit_Project.php',
      type : 'POST',
      data : $(this).serialize(),
      success : function(response) {
        // Here you do the HTML update
        $("#"+j+"").html(response.reply);
      }
    });
  });

The Edit_Project.php needs to be changed as well:

//The updation stuff at the server end

if (!mysqli_query($connection,$sqlquery)) {
  $response = "'Error in your code: ' . mysqli_error($connection)";
}
else {
$response = "1 record updated";
}
mysqli_close($connection);

/*
 * As SuperDJ suggested, you need to tell the browser that it's
 * receiving a JSON ojbect although he did use the wrong content type:
 */
header('Content-Type: application/json');

/*
 * According to php.net most decoders should handle a simple string as
 * json object but to be safe always encode an array or an object since
 * you can't know how the decoder will respond.
 */
echo json_encode(array('reply' => $response));