Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Div: Load data from external file with Ajax

Posted on 2011-09-05
20
Medium Priority
?
292 Views
Last Modified: 2012-05-12
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=categories&catid=xx.... I want to keep this type of URL.

Thank you
0
Comment
Question by:ChrisTERiS
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 11
  • 9
20 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 36484601
if the content is external to you site you can't use jquery.load (without some work on your webserver) due to cross domain/protocol/port ajax restriction
you may use a proxy on your server to download the data for you
the main difference with frame is the interactivity
0
 

Author Comment

by:ChrisTERiS
ID: 36484672
By saying external I don't mean in different domain, not even in different directory. It's just another file. Is not static content.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36484680
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/to/your/page jquery_selector_to_grab_part_of_page_if_needed");
0
Build and deliver software with DevOps

A digital transformation requires faster time to market, shorter software development lifecycles, and the ability to adapt rapidly to changing customer demands. DevOps provides the solution.

 

Author Comment

by:ChrisTERiS
ID: 36484697
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>

Open in new window

0
 
LVL 82

Accepted Solution

by:
leakim971 earned 2000 total points
ID: 36484705
just replace /path/to/your/page jquery_selector_to_grab_part_of_page_if_needed
by the url of the iframe you want to display
0
 

Author Comment

by:ChrisTERiS
ID: 36484719
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_part_of_page_if_needed ... My file is using do=xxx. What I need to enter? Just do=xxx or jquery_selector do=xxx ?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36484720
are you the author of the current script? ID:36484697
0
 

Author Comment

by:ChrisTERiS
ID: 36484725
To make the long story short. Let's say that my iframe url, was:
classifieds.php?do=browse&catid=1
Now I must write:
<script>
$("#div_ID").load("classifieds.php do=browse&catid=1"); 

Open in new window


??
0
 

Author Comment

by:ChrisTERiS
ID: 36484732
Script id 36484697  or post id?? ANd how i can find a post id? I've just 2 months here.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36484746
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 :
<div id="YouNeedOnlyOneDiv"></div>

Open in new window

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>

Open in new window

0
 
LVL 82

Expert Comment

by:leakim971
ID: 36484748
> ANd how i can find a post id?

use the search tools of your browser
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36484767
>my iframe url, was:
>classifieds.php?do=browse&catid=1

so line 6 :

var urls = ["classifieds.php?do=browse&catid=1", "????", "????", "????", "????"];
0
 

Author Comment

by:ChrisTERiS
ID: 36484827
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.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36484837
this is how you load the content with the first URL :
$("#YouNeedOnlyOneDiv").load("classifieds.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/
0
 

Author Comment

by:ChrisTERiS
ID: 36484877
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:
<div id="grid1">
<script>
$("#YouNeedOnlyOneDiv").load("classifieds.php?do=browse&catid=1");
</script>
</div>

Open in new window


Should be ok???
PS- Didn't found any script with that id. Give me a link to the script that you're reffering.

0
 
LVL 82

Expert Comment

by:leakim971
ID: 36484883
<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>

Open in new window

0
 

Author Comment

by:ChrisTERiS
ID: 36484885
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 :-(

0
 
LVL 82

Expert Comment

by:leakim971
ID: 36484888
you've the code ID:36484883
you've the full documentation and explanation (ID:36484837) for each lines of code, can I do more?
0
 

Author Comment

by:ChrisTERiS
ID: 36484906
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.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36484923
>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
0

Featured Post

The top UI technologies you need to be aware of

An important part of the job as a front-end developer is to stay up to date and in contact with new tools, trends and workflows. That’s why you cannot miss this upcoming webinar to explore the latest trends in UI technologies!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

715 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question