Author Topic: Fill / Load data as per link  (Read 15044 times)

Offline vikaspa

  • Posts: 6
Fill / Load data as per link
« on: September 21, 2012, 08:13:19 PM »
Dear All

I am New to JQUERY


I want to Load php data as per link in a DIV or Layer

example
<a href="abcd.php?id=<?php $rows['id'];?>">Link </a>

click on this link will display a web page with data wherein id in SQL will be equal to  $_REQUEST['id']

I want to show the very same data (that will be displayed on new web page) in a div or layer using JQUERY

How to pass the value ?
and
How to load data in DIV

Pls pls pls help

Thanks in advance

Offline Ruud

  • Posts: 3653
  • Gender: Male
  • Do not use PM for help! Please use the forum!
    • Dev4Me - Professional WebsiteBaker Development
Re: Fill / Load data as per link
« Reply #1 on: September 21, 2012, 11:50:09 PM »
I would start looking at the jQuery documentation.
http://api.jquery.com/jQuery.ajax/

Offline vikaspa

  • Posts: 6
Re: Fill / Load data as per link
« Reply #2 on: September 22, 2012, 04:49:34 AM »

Thanks a lot ..

 and appreciate your quick feedback

still confused

pls guide...

Found (in documentation)

$.ajax({
  url: "test.html",
  context: document.body
}).done(function() {
  $(this).addClass("done");
});

I am confused.. how do i insert/pass the php variable in JQUERY
and
how do i user  loading this in DIV ?


$.ajax({
  url: "abcd.php?id="+<?php $rows['id'];?>,
// this will be similar to <a href="abcd.php?id=<?php $rows['id'];?>">Link </a>

  context: document.#mydiv  // myydiv is Div in which i want to load data
// can i use
}).done(function() {
  $(#mydiv).load("abcd.php?id="+<?php $rows['id'];?>);
});

 

Offline vikaspa

  • Posts: 6
Re: Fill / Load data as per link
« Reply #3 on: September 22, 2012, 05:38:45 AM »
I can use

$("#stage").click(function(event){
          $('#stage').load('photogallery.php?cid=36&&subcid=48');
      });
   });
but dont know how to pass variables instead of values 36 and 48 using JQUERY

Offline vikaspa

  • Posts: 6
Re: Fill / Load data as per link
« Reply #4 on: September 23, 2012, 03:51:17 AM »
solved !!
my java script / JQUERY

<script language="javascript">
 $(document).ready(function(){
 $(".activityclass").click(function () {

    $('#mydiv').fadeIn(1000);
         var value = $(this).attr("rel");
        var prog='activity.php?id='+value;
    
        $('#mydiv').load(prog);
     
   
});


php code or html part
i am using rel part so as to avois click to open up the new page


 <?php
         $i=0;
         do { $i++;?>
                <td height=25>
           <table width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                      <td width="6%"><img src="whitearrow.png" width="5" height="11"></td>
                      <td width="94%">&nbsp;<a  href="#" rel="<?php echo $rows['id'];?>" class="activityclass"><?php echo $rows['name'];?></a></td>
                     </tr>
                  
                   </table>
  </td>
                <?php if ($i >=2) {$i=0; echo "</tr><tr>";}?>
               
                <?php  } while ($rows = mysql_fetch_assoc($Result));?>

Offline vikaspa

  • Posts: 6
Re: Fill / Load data as per link
« Reply #5 on: September 23, 2012, 10:41:21 AM »
Need vary small help here

i want to display animated gif 'Loading .."  which will be displayed till div is loaded....

Offline vikaspa

  • Posts: 6
Loading .. message till data loaded- solved
« Reply #6 on: September 23, 2012, 02:26:00 PM »
Solved .. message to be displayed till data  is loaded

$(document).ready(function(){
 $(".activityclass").click(function () {
    $('#mydiv').slideDown(1000);
      $('#loadingDiv').show();   // div haveing message "Loading  Data Please wait and Image loader.gif
         var value = $(this).attr("id");
        var prog='activity.php?id='+value;
        $('#mydiv').load(prog);   
        $('#loadingDiv').hide(); // hide this div after loading


});


  <div class="text" id="loadingDiv" style="position:absolute; display:none; height:30px; width:250px; margin-top:-100px; margin-left:100px;  z-index:10000; background-color:#EAF1FB" align="center"  ><img src="loader.gif" width="24" height="24" alt="Loading..."  class="textb" >Loading Data please wait</div>