I've got some dynamic content inside a tabber (http://www.barelyfitz.com/projects/tabber/).
All works fine, but I want to reload the div which contains the tabber. When I do this, using jQuery AJAX, the data updates, but the tabs are no longer formed. Do I have to reload the javascript elements of the page, and if so how do I got about doing this?
Thanks! :)
Sparkles*
Your AJAX function is probably replacing the contents of the div with new elements (so they lose any initialization that you've done).
In your AJAX callback, just re-initialize tabber. From glancing at their web-page it looks like you just need to call the function tabberAutomatic(tabberOptions);
I think something like this will do the trick:
$("#myDiv").load("/my/remote/data.json", function(){
tabberAutomatic();
});
Related
I'm facing an interesting problem where everything works flawlessly. I console.log every step and it plays out just the way it should. But! I have a #div into what I .load(a-file.php). Now that "a-file.php" includes HTML mark-up as well, more specifically certain links that I'd like to make "active" onload.
Scenario; page load happens, Javascript loads and loads a file into the div. That div now has tabs and I'd like the first tab to be in an "active" state which requires me to addClass('active');. But the following seems to have no effect
$('#content').load('file.php'); // works.
$('#content a[rel="weird-page"]').addClass('active'); // does not work.
Any kind of help, even remotely nailing it, is appreciated.
change to:
$('#content').load('file.php', function() {
$('#content a[rel="weird-page"]').addClass('active');
});
jQuery load() works asynchronously and therefore your addClass() method is being called before load() has completed.
Using the load() callback function it will ensure your content has loaded:
$('#content').load('file.php', function() {
$(this).find('a[rel="weird-page"]').addClass('active');
});
shameless-plug-warning: I wrote a blog post about jQuery callback functions which you might find useful.
I have a problem with jQuery being lost after .load() function.
I have a element built up with jQuery UI. The problem is that when I load it from separate page like this:
$("#mydiv").load("getgroup.php?group=" + selectedGroup).html();
The getgroup.php generates something like this, depending on the GET parameter:
<select>
<option>something</option>
<option>something</option>
</select>
When loading it with load() (or post, ajax, get) the element returns unformatted... I have tried including jquery and jquery-ui plugin also in the getgroup.php file but with no luck...
Thank you
The problem is, your jquery code isn't executed automatically on dynamically loaded elements.
What you should do is, put all your jquery ui code in a function. For instance, let's say you want to call the button() jQuery UI function on the newly loaded submit elements:
function launchUiWidgets(target) {
$(target).find('input:submit').button();
}
Then, you use this function as a success callback when you load new elements - giving it target as an argument to avoid rerunning the code on all of your DOM. Let's suppose you're loading the data in a div of id "container":
$.get(
"whatever.html?name=val",
function(data){
$('#container').html(data);
launchUiWidgets('#container');
},
"html");
If my understanding is correct and the element is being inserted, but with no CSS, you may need to run .addClass after the element is loaded to apply your chosen CSS class once the element is present. However, if in your CSS you have default values for the element type predefined, e.g. select{color:#000000;width:... these should also be loaded automatically.
Per the comment below- if you are looking at your predefined handlers still being relevant for content injected by AJAX/load() calls, you can use the .live() method:
http://api.jquery.com/live/
I want to add a progress bar before my web page's content loads, so I thought of loading it dynamically via javascript. This content has embedded javascript in its html. I tried using jquery.load() which works perfectly besides the fact that it does not support the js that doesn''t work on the returned content
just to make it clear, what i'm doing is something like this to load all the content:
$("#contentid").html("progressBar.gif");
$("#contentid").load(script.php #content)
$("#contentid").show();
and inside the content returned from script.php there are js calls such as:
jquery.load (to crawl for data and displaying it when ready)
document.getElementById('some_div') (for chart api)
snippets that load widgets
I've been trying to work around with using jquery.ajax though not sure if\how its possible with it yet. would love for some input on that.should i be able to achieve that with it?
Any other idea that might show a progress bar till the script's content is loaded will be great. I'm trying to reduce changes in the code structure, since this long load happens only sometimes.
Thanks.
You may add a div with the progress bar, covering all the page, and remove it after the page is loaded, using:
$(window).load(function() {
$('#progressbar').remove();
});
JQuery's load method takes a callback function as an argument. That function will get called when the load is completed, so you can hide your progress bar at that point. Here is an example from their API docs:
$('#result').load('ajax/test.html', function() {
alert('Load was performed.');
});
In your case, it would be something like:
$("#contentid").load(script.php, function(){
$("#contentid").hide();
});
I am working on a project which needs to extract text form a predefined div tag.
My requirement is to send the content in the target div in a email body. I have to use javascript or php for this task.
The Process :
When a given link will be clicked; a javascript function will trigger and read that target div. The content of the div will be then submitted to server in dynamic form.
What options I have to get this task done?
Thanks.
jQuery's text() (link) would let you get the text inside the div.
var thetext = jQuery('div#foo').text();
You could then use its post() (link) to send the data to a PHP script for emailing.
So assuming that you have something that looks like
Click Here
<div id="foo">Hello World!</div>
I recommend using jQuery:
<script type="text/javascript">
function someClickHandler() {
var text = $("#foo").text();
$.get("url_on_the_server", {some_query_parameter_name: text}, function(response){
// do something with the response you get back from the server
});
}
</script>
Here's what this is doing:
The onClick attribute causes the someClickHandler function to be called when the link is clicked. Because we put return false in that attribute, the browser will not try to follow the link; instead when clicked it will just execute the click handler and stop.
Saying $("#foo") finds the element on the page with an id of "foo", as documented here. Saying $("#foo").text() returns everything inside that div as text, as documented here.
The $.get call is explained at depth in the jQuery documentation here. Basically you're making an AJAX request to the server and passing the text from the div as a query parameter. The function you pass to $.get defines what you do with the response you get back from the server.
Of course, you could also use the jQuery click method instead of manually setting the onClick attribute yourself, but I figured that this way would be somewhat more intuitive for a beginner.
I would get the innerHTML of the div. So if your div is div_obj:
var div_obj = document.getElementById("...");
alert(div_obj.innerHTML);
Indeed, I'd give the div an id and then use the innerHTML method to get its contents.
After that, you could use XMLHttpRequest to submit the contents to the server.
document.getElementById( ID_OF_DIV ).innerHTML;
should do it if I'm not mistaken. W3Schools is a wonderful website for information on web programming.
How can I use jQuery for messing with a particular div, but not in the current document - in a variable, that contains HTML?
The point is that I want to show a preview of a page (a piece of it's content) in a modal window, when the link to this page is clicked. Well, onClick I load this whole HTML into a variable via JSON and then... how would I find a particular div I need in it? It's gonna be almost impossible to parse it with PHP before converting it into JSON and giving back to jQuery processor because of a deep hierarchy.
Basically, is it even possible to do smth like $( 'div#some-id' ).blabla(); not for the current document, but for the document, stored in a variable?
Thx everyone in advance.
Use the optional context argument to the jquery calls. In other words,
$('div#some-id', document).blabla();
You could also do it like this (which is similar to what #nsayer wrote:
$.get(url, {parameters}, function(data){
$('#somePartOfThePage', data);
});
If you're using the jQuery $.ajax function, you can do something like this...
$.ajax({
success: function(responseText) {
$("#previewDiv").html($("div#content", responseText).html());
}
});
The "success" method will return html (or whatever you set the $.ajax dataType property to), in this case I've given it the name "responseText" (though you can put in any valid variable name here). Then, I've searched through the responseText, grabbed the html of the #content div, and inserted it into the preview div.
Does that sound like what you were wanting to do?
jQuery's .load() can load page fragments into an element:
$('#modalWindow').load('http://example.com/ #content');