How To Pass PHP Variables On jQuery Load?

Question

I have code like this :

<?php
$username = 'johndoe';
?>

<head>
<script>
...
$('a.manage-content-link').click(function (e) {
    var self = $(this),
        file = self.siblings('input[type="hidden.block-hidden-input"]').val();
    self.next(".manage-content-wrap").find(".manage-content").load("file-" + file + ".php");
    e.preventDefault();
});
...
</script>
</head>

<body>
...
<li><input type="hidden" value="001" class="block-hidden-input" />
    <a href="#" id="manage-1" class="manage-content-link">
        <img src="images/web-block/web-block1.jpg"/>
        <span class="orange-notice">Click to Edit Content</span>    
    </a>
</li>

<li><input type="hidden" value="002" class="block-hidden-input" />
    <a href="#" id="manage-2" class="manage-content-link">
        <img src="images/web-block/web-block2.jpg"/>
        <span class="orange-notice">Click to Edit Content</span> 
    </a>
</li>
...
</body>

as you can see there, every time user click "manage-content-link" class, either manage-1, manage-2, ... or even manage-X (multiple li tags) jQuery will load "file-XXX.php". which XXX is actually value of hidden input in li tag.

but that "file-XXX.php" requires $username from PHP tags and ID itself, that is "manage-X". how to pass this 2 variables needed by "file-XXX.php", one from PHP and other from ID's?

for example : when user click first li tag, it contains ID's name : manage-1 and it will load file-001.php. on the file-001.php I need to process that "username" and "manage-1" variables. so, I need "johndoe" and "manage-1". how to pass that two so that I can 'catch' it on file-001.php — Saint Robson
– Saint Robson, Commented Oct 19, 2012 at 4:06

Matt Stauffer · Accepted Answer · 2012-10-19 04:10:31Z

2

Use jQuery's .ajax() instead of .load(): http://api.jquery.com/jQuery.ajax/

$('a.manage-content-link').click(function (e) {
    var self = $(this),
        file = self.siblings('input[type="hidden.block-hidden-input"]').val(),
        this_id = self.attr('id');

    $.ajax({
      url: "file-" + file + ".php",
      data: { username: "<?php echo $username;?>", id: this_id },
      context: this,
      success: function(data) {
        $(this).next(".manage-content-wrap").find(".manage-content").html(data);
      }
    });
    e.preventDefault();
});

If you want to keep the script external, you couldn't rely on php to echo the $username inside the script. So, you could add the username a few ways. You can make a hidden input somewhere in the page with the value equal to the username; you could attach the username to an element (like the body) as a data-username attribute; or you could just have a script block in the header that purely defined the username. For example:

<input type="hidden" name="username" value="<?php echo $username;?>>

Or:

<body data-username="<?php echo $username;?>">

Or:

<head>
    <script>
        var username = "<?php echo $username;?>";
    </script>
</head>

edited Oct 19, 2012 at 4:10

answered Oct 19, 2012 at 4:05

Matt Stauffer

2,76217 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Saint Robson Over a year ago

what about ID's name? I need "manage-1", "manage-2", ... , "manage-x" to be passed to file-XXX.php too.

Matt Stauffer Over a year ago

Sorry, I didn't realize there was both the manage-# id and the ### id. Edited to show that.

Deepak · Accepted Answer · 2012-10-19 05:26:44Z

1

In your <body> you can add a hidden field

<input type="hidden" value="<?=$username?>" id="username" />

and in your jquery,

$('a.manage-content-link').click(function (e) {
    var self = $(this),
    file = self.siblings('input[type="hidden.block-hidden-input"]').val();
    var username = $("username").val(); //use this variable where ever you want
    var ids = $(this).attr('id'); // this is the id
    self.next(".manage-content-wrap").find(".manage-content").load("file-" + file + ".php?id="+ids+"&username="+username);  //and in php file usee $_GET
    e.preventDefault();
});

edited Oct 19, 2012 at 5:26

answered Oct 19, 2012 at 3:58

Deepak

6,82718 gold badges71 silver badges121 bronze badges

5 Comments

Saint Robson Over a year ago

what about ID's name? I need "manage-1", "manage-2", ... , "manage-x" to be passed to file-XXX.php too.

Saint Robson Over a year ago

but, how to 'catch' that variables from file-001.php point of view? I believe it's not POST or GET method, right?

Saint Robson Over a year ago

bro, I'm using your code here : self.next(".manage-content-wrap").find(".manage-content").load("file-" + file + ".php?id="+id+"&username="+username); but it seems that code failed to load correct file name. because when I change into this code : self.next(".manage-content-wrap").find(".manage-content").load("file-001.php"); everything looks normal. seems that your code not getting '001' from input[type="hidden.block-hidden-input"].

Saint Robson Over a year ago

the correct file name to load is : file-001.php, file-002.php, etc. which 001 and 002 is based on <input type="hidden" value="XXX" class="block-hidden-input" />

Deepak Over a year ago

let us continue this discussion in chat

Sibu · Accepted Answer · 2012-10-19 03:58:46Z

0

$('a.manage-content-link').click(function (e) {
    var self = $(this);
        file = self.prev('.block-hidden-input').val();
       self.next(".manage-content-wrap").find(".manage-content").load("file-" + file + ".php");
    e.preventDefault();
});

Instead of passing username from script, i would suggest you store username in a session and get that value inside php using $_SESSION['username'] otherwise it will cause you security issue in the future.

DEMO

answered Oct 19, 2012 at 3:58

Sibu

4,6272 gold badges30 silver badges38 bronze badges

Collectives™ on Stack Overflow

How To Pass PHP Variables On jQuery Load?

3 Answers 3

2 Comments

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related