Change div content after loading it with ajax load method - javascript

index.html page :
I am loading the new.html page using ajax load method and then tried to change the content of the div#rr but it did not work!
any solution ?

why your code $('#rr').html('modfied'); is not working because you are calling the change before jquery ajax.load() method is able to load the content from your new.html and as result your id #rr is not found. So, instead of calling the modify code after the load statement call the modifying statement in your load()'s complete()
as:
$('#btn').on('click', function () {
$('.container').load('new.html', function () {
$('#rr').html('modfied');
});
});
and please go through the jquery documentation for more info on how to use the functions Jquery Documentation for Load() funciton.

Try to call the function inside the ajax call function.
$('.container').load('new.html',function(){
$('#rr').html('modified')
});
next time please do not put image for code.

Related

javascript code with ajax loading

I try to add css class with js to element.
I'm trying to add a CSS class to an HTML element via Javascript.
(function ($) {
"use strict";
$(document).ready(function () {
$('.delete').addClass('icon-trash');
});
})(jQuery.noConflict());
But when this element is loaded with ajax I need to refresh the page to see it.
How can i fix it ?
You have not used ajax in this, You have just used jquery.Read about Ajax Call and than use it.
If you want to go with this same code of yours than try to call this function onload
like <body onload="myFunction()">
Add this line of code $('.delete').addClass('icon-trash') on ajax success callback as below:
$.ajax({
...
success: function(data){
// if you want to play with response, data is what you want
// Add trash icon to every .delete element in document
$('.delete').addClass('icon-trash');
}
...
});

jQuery iframe onload

I have an iframe that represents the content of my main page and it loads a different src depending on the menu option chosen. I want to perform a series of actions as soon as the iFrame is loaded but I cant seem to get it to work. The code looks more or less like the following:
$(document).ready(function () {
$('#navigation').load(function () {
alert('frame loaded!')
});
});
.load for event binding was deprecated in jQuery 1.8, use .on("load" instead.
I asume this function is in your iFrame and will be executed after the document loading. If not - ther is some conceptual error. Anyway - the load function in jQuery will try to load a html document or piece of it in the object you specify - http://api.jquery.com/load/

Load file when another load is done

So I basically have a load that loads the file to an id and when that load is done I want to load another file to an id which is inside the first load.
Does it sound a bit weird?
We can add a bit of code to describe it easier.
function interestsList() {
$('.interests_editlist').fadeIn(500).load('/snippets/interests_edit.php');
}
That is how it looks right now. I want to add this line
$('#interests_list').load('/snippets/interests_list.php');
but if I just add it, it doesn't load. The reason might be that it tries to load before the load above is done. That is a problem because #interests_list is loaded with the first load.
How do I make the second load to start loading when the first one is finished?
load() method accept a complete callback:
function interestsList() {
$('.interests_editlist').fadeIn(500)
.load('/snippets/interests_edit.php', function () {
$('#interests_list').load('/snippets/interests_list.php');
});
}
you can use .load() callback to know when load is complete
try this:
function interestsList() {
$('.interests_editlist').fadeIn(500).load('/snippets/interests_edit.php', function() {
//callback function when the first load is complete
$('#interests_list').load('/snippets/interests_list.php');
});
}

Initialize script

I need to learn how to initialize scripts. I have google it but dont dont really understand it.
Right now I have a toggle-script that is in a div, that entire div gets loaded in to another page. The toggle scripts work, but not when its loaded in.
$(".class").click(function () {
$(this).toggleClass("add_class");
});
If somebody have time, can you explain to me how to initialize this script?
Thanks.
You should put this script inside a document.ready call.
Eg.
$(document).ready(function() {
//Put your code here
});
If I misunderstood your question and what you actually mean is:
How do you execute the script after you load it in through an AJAX call.
Then see this question: executing script after jQuery Ajax Call
Are you calling it after the elements are loaded on the page?
You should be using on() with jQuery 1.7+
$(document).on("click", ".class", function () {
$(this).toggleClass("add_class");
});
If you want to keep your syntax, you would have to do it either after the elements are rendered, or do it on document.ready.
I figure you're using jquery.ajax to fetch the div?
If so, you should be able to add the listeners in the success-function of the jquery.ajax call:
$('#result').load('ajax/test.html', function() {
$("#result .class").click(function () {
$(this).toggleClass("add_class");
});
});
simple and best
$(function(){
//your code here...
$(".class").click(function () {
$(this).toggleClass("add_class");
});
});

jQuery load wont fire callback

I have this function:
$("#menuwrap").fadeOut(300, function () {
$("#menuwrap").load(url, function () {
$("#menuwrap").fadeIn(300);
});
});
But the callback action for .load() wont fire. #menuwrap is stuck with an inline style="display:none".
Even an alert() before the fadeIn() won't show.
Never had this trouble before. Any ideas?
Checkout this jsfiddle. Try to check your URL for load() and it's content.
It was a script in the resulting HTML being loaded (AKA'url' var).
The script in said document was buggy, and therefore all further scripts (such as $("#menuwrap").fadeIn(300)) where not executed.
So, hide yo' wives, hide yo' daughters, double-check your asyncroncally loaded scripts.

Categories

Resources