WebsiteBaker Community Forum

WebsiteBaker Support (2.8.x) => jQuery => Topic started by: vikaspa on September 21, 2012, 08:13:19 PM

Title: Fill / Load data as per link
Post by: vikaspa 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
Title: Re: Fill / Load data as per link
Post by: Ruud on September 21, 2012, 11:50:09 PM: I would start looking at the jQuery documentation.
http://api.jquery.com/jQuery.ajax/
Title: Re: Fill / Load data as per link
Post by: vikaspa 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'];?>);
});
Title: Re: Fill / Load data as per link
Post by: vikaspa 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
Title: Re: Fill / Load data as per link
Post by: vikaspa 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%"> <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));?>
Title: Re: Fill / Load data as per link
Post by: vikaspa 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....
Title: Loading .. message till data loaded- solved
Post by: vikaspa 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>