JQuery :: Load More Than One Fragment?
Jun 8, 2010Impatience got the better of me. For the fragment method using .load(), how can I load more than one fragment?
View 1 RepliesImpatience got the better of me. For the fragment method using .load(), how can I load more than one fragment?
View 1 RepliesIs there a way to load more than one html fragment using .load()? That is, I want my homepage to pull in multiple pages of content into the main page so that I can create a one-page site that slides vertically.
An example of what I've got is
$(document).ready(function(){
$('#footer').load('about.html #content');
$('#footer').load('locations.html #content');
$('#footer').load('contact.html #content');
});
Which of course only loads the first about.html page's #content into the #footer of the home page.
A REALLY simple example, surprising to me this doesn't work...
This is my php code:
And here the html from which the php-script is called:
Here's supposed to be the output: <div class="output" id="output">test</div>
The text "test" inside the div gets replaced by nothing. and if i use the line i commented out instead of " $('.output').html(data)", i get the following output: "[object XMLDocument]"
Btw really susprised to see a forum on a website like this without proper code-tags with monospaced font...
I have a login button which takes the user to the login page. Now... this to me seems like a slow way of logging in. I would like users who have javascript enabled to click the login button. Instead of them being forwarded to the login page, I want the login form to magically pop up on top of the web page.
I can do this, I can creative a div, add the html and probably with a bit of trying - get the user to login. However I have a question. For maintainability, I want to have create a separate HTML file, how would I insert this into my page using Javascript?
Furthermore speed is crucial, is there a way to have this fragment load in the background on every page? I am not sure what would be best, i just don't want a second or two wait when the button is pressed. Basically - in short - how to I load this file fragment? What is the fastest way to do this?
I'm using href fragments to 'jump' down the page. The links have a fixed position so they stay visible.
How can I highlight the active link? So when you click link2 and you jump to the blue section, how can I highlight the link2 text?
<html>
<head>
<script type='text/javascript' src='jquery-1.4.2.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
[Code]...
The above is a simplified example of the problem I'm facing. I could merge functions into one big self-referencing function (i.e. recursive function), but that's ugly and causes other problems (such as when insert form elements and wanting to harvest the user input afterwards). I considered declaring a variable in the top ".ready" function, and have all child functions stuff their HTML changes in it, but that seems to be a pain to keep track of and removes much of the value of using jQuery in the first place...
Is there a nice solution for this? To, after inserting HTML, somehow update the HTML state referred to by jQuery in the non-local scope(s)?
I tried this code in [URL]... jquery reports as 4 elements in firefox/chrome browsers correctly where as 0 in internet explorer 6.0 How do i fix this? Should I report this as bug?
View 1 Replies View RelatedI am loading an entire page in ajax, but I just want to load a fragment from it. Using the .load() function, you can do this by adding a selector after your url like 'getPage.php #myDiv' etc, how to do it using the .ajax method.
I did some googling and found this solution:
$.ajax({
url: 'AjaxTest2.htm',
data: {},
cache: false,
[Code].....
I'm trying to get the "d1" div to be populated with the contents of the "my2" div on the second page. I don't want to use the .load() function, I want to use the .ajax() function. I can get this to work if I just use: $('#d1').html(data); instead of $('#d1').html($(data).find('#my2')); but the former results in the entire html contents of the second page being placed into the "d1" div, and I only want the fragement.
I'm trying to embed an HTML fragment from one web page into another web page, using AJAX (as the fragment will change frequently). I'm using prototype.js for AJAX.
I've managed to fetch the HTML content of the slave page, but I can't figure out how to get just the part I want from the XML string returned in the AJAX request. The prototype.js AJAX function just returns a text sttring that I need to parse...but how?
Child Page: hello.html
Code HTML4Strict:
I want to include the <h1>Hello</h1> in the parent page.
Parent page: demo.html
Code JavaScript:
Obviously it's the fragment = resultDoc.getElementByClassName( source_fragment_name ); part that I'm having difficulty... It may not even be the right function - HELP.
The resultDoc=parser.parseFromString(transport.responseText,"text/xml"); seems to work, because the subsequent alert() works fine, but how do I get the page fragment identified by the source_fragment_name.
The alert("Fragment = " + fragment ); never happens, so the previous line has serious problem.
So, just to clarify, I simply want to parse the content out of one page, and embed it into another, in real-time, using AJAX.
Here is what I'm trying to do but the problem is "source.html" is not on a server somewhere. I am running everything locally. $('#container').load(source.html #sourceContent) Is there a way to do this exact thing but with a local file?
View 3 Replies View RelatedI have a question about load(). I created a php script that simply returns <img src="something.jpg" class="myimage">
To test I created this code, the image loads fine and the mouseover works fine showing the alert dialog :
However, my trouble seems to be that if I bind mouseover to the class "myimage" nothing happens, like so :
Seems that the document would load the html first then the mouseover bound to the class (myimage) would fire off.
The code is supposed to generate this: PS: This is generated by a PHP Function that the Ajax Load Method Calls.
[Code]...
I've been noticing a lot of problems when loading these stuff, Sometimes I have to remake the HTML Tags because its not showing anything. Is there any option? I want it to load EXACTLY how it is, I don't know if this is some kind of protection for bad code, but if it is I would like to disable. But also, this code is really clean. no problem, I don't know.
Is it faster/more beneficial to have two snippets of code be generated by php at 2 different urls and then have a load function for each url? Or have the two snippets on one page, surrounded by id's and then load them that way?
View 1 Replies View RelatedI have a problem when trying to load an HTML5 element with Ajax (jQuery.load ()).Here is a simplified example of the problem.
Main page :
<!DOCTYPE HTML>
<html>
<head>
<title>Title</title>
<!--[if lt IE 9]>
[Code]...
Basically there are 2 elements on the target page that I would like to load into the calling page, but I would like to do it without making 2 calls to the page if possible.
View 11 Replies View RelatedI have a site structured with a main html page that loadother pages that have some javascript code. Somejs have to be executed immediatly and some other js I need. I have a code like following
<!-- ********************** THIS SCRIPT SHOULD BE EXECUTED ON FORM SUBMIT -->
<script type="text/javascript">
myNewLine="
";
function inviaRichiesta(){var msg="";
[Code].....
I have the following code to load some pages into a div using the load function. When I click one of the links though, nothing happens. I have read a couple of books on JQuery and looking at the examples they give, this looks correct so I am at a loss.
[Code]...
I have the following code:
$("#printme").queue("printQueue", function (next) {
$(this).load("print.html", function () {
$(this).ready(function () {
passPrint(next);
[Code].....
I want the images on #printme to finish loading before the passPrint function runs, but everything I've tried does not work. The ready() in there does not work.
Can the .load() function load .php pages? example: $('#element').load('mynews.php');
View 3 Replies View RelatedI use jQuery load function to load another page into part ofcurrent page in asp.net. it is work correctly but insecond page i haveone instance ofCKEditor that is not loaded in first page after use load function.
View 1 Replies View RelatedI was trying to display a pdf file inside a HTML div and was using JQuery $('#divid').load(url) to load the file inside a div. While other HTML files are loading properly, i am facing problem loading a pdf file.
The content does not get rendered properly, i am not sure whether this load function is supposed to handle this, but is there any other way to load a pdf inside a div?
This is my actual code:
var sub_listings_url = "index.php?option=com_mtree&task=listcats" + " #sub_listings > *";
var pagination1_url = "index.php?option=com_mtree&task=listcats"+ " .#pagination1 > *";
[Code].....
Would it be possible to fill #sub_listings and #pagination1 with only one .load?
I have a page that contains 15 tabs. When each tab is pressed, it calls a function that uses .load() to load that tab. In my initial testing, all seems to go smoothly (loading in less than a second). However, once you click about 10 tabs, the pages start to load slower, and by click 13, it takes more than 30 seconds to load.If you refresh the page this process starts over and the outcome is the same (by click 12-13 it is unusable). Below is the code. FYI the reload_timer was an attempt to reload the page if the query was taking more than 10 seconds It didn't work. I left it in for feedback in case I don't find a suitable solution to the actual issue.
[Code]...
I know the question begs a question. Why? I have no control over the DB or the Forms. Using 3rd Party based web app. I have this: $(document).ready(function() {
$("#MyButton").click(function (){ $('#CurrentPageInputTextArea').load('jqloadFrom.htm #OtherPageInputTextArea');
});
});
I'm begginig with jQuery. I'm trying to make a simple menu with jQuery.
this is my .js code.
$(document).ready(function(){
$('#menutop li').click(function() {
$('.current').removeClass();
$(this).addClass('current');
var menu_down = $('.current').text();
[Code]...
How can I load page menu.php or menu2.php with correctly loaded firs page.
I tried creating a small widget that when a user clicks on one of the 4 buttons (links), instead of it taking the user to a new page it will load a specific div from another page is the div container above it.
HTML (excerpt):
<div imagePane></div>
<div buttonLinks>
<ul>
<li class="button1"><a>BUTTON 1</a></li>
[Code].....
The problem I'm having is that the content of the other page's div container loads, but that actual image that I set as the background does not.
I attempted to use .load() to serve up an image instead, $('#imagePane').load('path/to/graphic.jpg');but that didn't seem to work at all. Is there another function for this type of thing?