ChrisTERiS
asked on
Div: Load data from external file with Ajax
Hello,
In my template I've 3 radio buttons whic are activating 3 divs. Till now I was using iframes inside these blocks to pull data, but now I want to avoid using iframes. Is there any alternate way to load external data in div? I seen that jquery has a function load(). Can it be used and how? The way that I was using iframes was:
... src="myfile.php?do=categor ies&catid= xx.... I want to keep this type of URL.
Thank you
In my template I've 3 radio buttons whic are activating 3 divs. Till now I was using iframes inside these blocks to pull data, but now I want to avoid using iframes. Is there any alternate way to load external data in div? I seen that jquery has a function load(). Can it be used and how? The way that I was using iframes was:
... src="myfile.php?do=categor
Thank you
ASKER
By saying external I don't mean in different domain, not even in different directory. It's just another file. Is not static content.
ok go for jquery.load but if you've a link and click on it you left the current page
this is the difference with iframe
$("#div_ID").load("/path/t o/your/pag e jquery_selector_to_grab_pa rt_of_page _if_needed ");
this is the difference with iframe
$("#div_ID").load("/path/t
ASKER
If it helps, below is my code. First of all there is a function which determines the user's screen resolution and activate one of the 2 first divs. But there are another 3 radio buttons that user can selects:
<html>
<head>
<script type="text/javascript">
function SetResState()
{
if(screen.width <= 1024)
{
document.getElementById('rgrid1').checked =true;
document.getElementById('rgrid2').checked =false;
document.getElementById('bgrid1').style.display = 'block';
document.getElementById('bgrid2').style.display = 'none';
}
else
{
document.getElementById('rgrid1').checked =false;
document.getElementById('rgrid2').checked =true;
document.getElementById('bgrid1').style.display = 'none';
document.getElementById('bgrid2').style.display = 'block';
}
}
</script>
</head>
<body onload="SetResState();">
<input type="radio" id="rgrid1" name="rgrid" value="1" onclick="document.getElementById('bgrid1').style.display = 'block';document.getElementById('bgrid2').style.display = 'none';document.getElementById('bgrid3').style.display = 'none';document.getElementById('bgrid4').style.display = 'none';document.getElementById('bgrid5').style.display = 'none'">Short
<input type="radio" id="rgrid2" name="rgrid" value="2" onclick="document.getElementById('bgrid1').style.display = 'none';document.getElementById('bgrid2').style.display = 'block';document.getElementById('bgrid3').style.display = 'none';document.getElementById('bgrid4').style.display = 'none';document.getElementById('bgrid5').style.display = 'none'">Wide
<input type="radio" id="rgrid3" name="rgrid" value="3" onclick="document.getElementById('bgrid1').style.display = 'none';document.getElementById('bgrid2').style.display = 'none';document.getElementById('bgrid3').style.display = 'block';document.getElementById('bgrid4').style.display = 'none';document.getElementById('bgrid5').style.display = 'none'">Brief
<input type="radio" id="rgrid4" name="rgrid" value="4" onclick="document.getElementById('bgrid1').style.display = 'none';document.getElementById('bgrid2').style.display = 'none';document.getElementById('bgrid3').style.display = 'none';document.getElementById('bgrid4').style.display = 'block';document.getElementById('bgrid5').style.display = 'none'">Full
<input type="radio" id="rgrid5" name="rgrid" value="5" onclick="document.getElementById('bgrid1').style.display = 'none';document.getElementById('bgrid2').style.display = 'none';document.getElementById('bgrid3').style.display = 'none';document.getElementById('bgrid4').style.display = 'none';document.getElementById('bgrid5').style.display = 'block'">Gallery
<div id="bgrid1" style="display: none;">
<iframe ........
</div>
<div id="bgrid2" style="display: none;">
<iframe ........
</div>
<div id="bgrid3" style="display: none;">
<iframe ........
</div>
<div id="bgrid4" style="display: none;">
<iframe ........
</div>
<div id="bgrid5" style="display: none;">
<iframe ........
</div>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Sorry but I can't get your meaning. Where I must place that code? And for sure I need to enter < script > ... < / script > before and after. Right?
jquery_selector_to_grab_pa rt_of_page _if_needed ... My file is using do=xxx. What I need to enter? Just do=xxx or jquery_selector do=xxx ?
jquery_selector_to_grab_pa
are you the author of the current script? ID:36484697
ASKER
To make the long story short. Let's say that my iframe url, was:
classifieds.php?do=browse& catid=1
Now I must write:
??
classifieds.php?do=browse&
Now I must write:
<script>
$("#div_ID").load("classifieds.php do=browse&catid=1");
??
ASKER
Script id 36484697 or post id?? ANd how i can find a post id? I've just 2 months here.
your buttons :
<input type="radio" id="rgrid1" name="rgrid" value="1">Short
<input type="radio" id="rgrid2" name="rgrid" value="2">Wide
<input type="radio" id="rgrid3" name="rgrid" value="3">Brief
<input type="radio" id="rgrid4" name="rgrid" value="4>Full
<input type="radio" id="rgrid5" name="rgrid" value="5">Gallery
your div :
<input type="radio" id="rgrid1" name="rgrid" value="1">Short
<input type="radio" id="rgrid2" name="rgrid" value="2">Wide
<input type="radio" id="rgrid3" name="rgrid" value="3">Brief
<input type="radio" id="rgrid4" name="rgrid" value="4>Full
<input type="radio" id="rgrid5" name="rgrid" value="5">Gallery
your div :
<div id="YouNeedOnlyOneDiv"></div>
good to put the following in the head section<script src="http://code.jquery.com/jquery-1.6.2.js"></script>
<script>
$(document).ready(function() {
$("#rgrid1,#rgrid2,#rgrid3,#rgrid4,#rgrid5").click(function() {
var n = parseInt( $(this).attr("id").replace(/\D/g,"") ) - 1;
var urls = ["url_frame1","url_frame2","url_frame3","url_frame4","url_frame5"];
$("#YouNeedOnlyOneDiv").load( urls[n] );
})
})
</script>
> ANd how i can find a post id?
use the search tools of your browser
use the search tools of your browser
>my iframe url, was:
>classifieds.php?do=browse &catid=1
so line 6 :
var urls = ["classifieds.php?do=brows e&catid=1" , "????", "????", "????", "????"];
>classifieds.php?do=browse
so line 6 :
var urls = ["classifieds.php?do=brows
ASKER
Looks good at: http://www.christeris.net/vb4/classifieds.php?do=main&catid=4
The only problem is that the function that I had to preselect one of the first 2 divs according to user's resolution is not working.
The only problem is that the function that I had to preselect one of the first 2 divs according to user's resolution is not working.
this is how you load the content with the first URL :
$("#YouNeedOnlyOneDiv").lo ad("classi fieds.php? do=browse& catid=1");
http://www.learningjquery.com/2006/09/introducing-document-ready
http://api.jquery.com/id-selector/
http://api.jquery.com/multiple-selector/
http://api.jquery.com/click/
$("#YouNeedOnlyOneDiv").lo
http://www.learningjquery.com/2006/09/introducing-document-ready
http://api.jquery.com/id-selector/
http://api.jquery.com/multiple-selector/
http://api.jquery.com/click/
ASKER
Tell me something is I'm already late in my project. If I let them as is right now, and in every div that I've (even if they're more than one), I place the follwing code:
Should be ok???
PS- Didn't found any script with that id. Give me a link to the script that you're reffering.
<div id="grid1">
<script>
$("#YouNeedOnlyOneDiv").load("classifieds.php?do=browse&catid=1");
</script>
</div>
Should be ok???
PS- Didn't found any script with that id. Give me a link to the script that you're reffering.
<script src="http://code.jquery.com/jquery-1.6.2.js"></script>
<script>
$(document).ready(function() {
$("#rgrid1,#rgrid2,#rgrid3,#rgrid4,#rgrid5").click(function() {
var n = parseInt( $(this).attr("id").replace(/\D/g,"") ) - 1;
var urls = ["url_frame1","url_frame2","url_frame3","url_frame4","url_frame5"];
$("#YouNeedOnlyOneDiv").load( urls[n] );
})
$("#YouNeedOnlyOneDiv").load("classifieds.php?do=browse&catid=1");
})
</script>
ASKER
To activate the 1st or 2nd URL depends on the end users screen resoloution. So, I don't know it, and from the other side I don't know how to modify the other function. In general I know nothing from javascript :-(
you've the code ID:36484883
you've the full documentation and explanation (ID:36484837) for each lines of code, can I do more?
you've the full documentation and explanation (ID:36484837) for each lines of code, can I do more?
ASKER
Didn't got your meaning, but thank you for your help. I'll accept your solution. I'm sure that trying in real according to your advices, I'll make it to work. But don't forget that not all are Guru or Experts, and most important, not all have as tongue language English, so we need to read more than once to get the full meaning.
>But don't forget that not all are Guru or Experts, and most important, not all have as tongue language English, so we need to read more than once to get the full meaning.
Me first...
I think your main problem here is time and only time, don't hesitate to post your experiences with the code, you're welcome
Me first...
I think your main problem here is time and only time, don't hesitate to post your experiences with the code, you're welcome
you may use a proxy on your server to download the data for you
the main difference with frame is the interactivity