Pass dynamic data from to div to another div on same page

Question

I am stuck in a problem and in need of support from you guys.

My problem is I want to pass a php variable(dynamically called through database in loop) to another div on the same page without page refresh

//This is a loop

<td><a class="linkright" href="#existingcase?case_id=<?php echo $row_mycases['case_id']; ?>"><?php echo $row_mycases['case_id']; ?></a></td>

//The div which should get the above php variable

<div class="tabright" id="existingcase">
    <?php 
    $c_id = $_GET['case_id'];
    echo $c_id;
    ?>      
</div>

//the javascript code for calling divs on the same page

<script>
$(".linkright").click(function(){
    $(".tabright").hide();
    theDiv = $(this).attr("href");
    $(theDiv).slideToggle();
});
</script>

It shows in the url like this index.php#existingcase?case_id=2012001 but never passes the case id to #existingcase. And also #existingcase div does not load either but without passing caseid value, #existingcase loads.

Any suggestions would be great.

Answer 1

I think you want to print clicked case_id in div without page load. To do this, you don't want to pass it using url. you can simply achieve it using javascript.

If your div id existingcase is just change your code like this below.

you are printing that same case_id as a text of anchor tag using $row_mycases['case_id'];. So, you can easily get that text using javascript and you can easily print it in your #existingcasediv.

<td><a class="linkright" href="#existingcase"><?php echo $row_mycases['case_id']; ?></a></td>

I don't know about your other scripts. in .linkright click function place this code like this

$(".linkright").click(function(){
    $('#existingcase').text($(this).text()); //if your div id is existingcase it will print your case id. 
});

try this code. And let me know the result.

SEE THIS FIDDLE DEMO

UPDATED:

To pass client side value to serverside without page reload, you can use jquery.post() method.

Place this PHP code at the top of your page.

<?php     
    if (isset($_POST['id'])) {
    $caseid = $_POST['id'];
    return print_r($caseid);
  }
?>

$caseid will contain currently clicked case_id value. So, you can use this $caseid wherever you want in this page. If you click on the another case id, it will update with respect to currently clicked case_id replace your js with below code,

$(".linkright").click(function () {
    $(".tabright").hide();
    theDiv = $(this).attr("href");
    $(theDiv).slideToggle();
    $.post("yourPHPFile.php", {    //use your current php file name instead of "yourPHPFile.php"
        id: $(this).text()
    }, function (caseid) {
        $('#existingcase').text(caseid);
    });
});

id : $(this).text() means, get the current element .text() and assign it to $_POST variable name of id. It will post to yourPHPFile.php. And you can retrieve that value like $caseid = $_POST['id'];.

In function (caseid) {, caseid contains the value of $caseid. So, only in this code, I assigned $caseid = $_POST['id'];

By this you can directly print clicked case_id text to your #exixtingcase div.

Answer 2

Any values after # are not sent to the server. Since PHP is a server technology you php code will never see the values after #

<a class="linkright" href="#existingcase?case_id=<?php echo $row_mycases['case_id']; ?>">

try doing

<a class="linkright" href="existingcase?case_id=<?php echo $row_mycases['case_id']; ?>">

instead and your php code should fill the div.