CODEWITHSUNDEEP
phpjquery
Saint Robson
Saint Robson

Reputation: 5525

How To Pass PHP Variables On jQuery Load?

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?

Upvotes: 2

Views: 2118

Answers (3)

Deepak
Deepak

Reputation: 6812

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

Upvotes: 1

Matt Stauffer
Matt Stauffer

Reputation: 2762

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>

Upvotes: 2

Sibu
Sibu

Reputation: 4617

$('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

Upvotes: 0

Related Questions