I'm using this command : $( "#result" ).load( "ajax/test.html" ); to load html page's content into div.
My question is how to know what I entered after I enterd it. A function that return the html page that is already inside the div.
You can store in a variable the currently loaded page (currentPage) and compare the page you load with the value of this variable:
<div id="result"></div>
<input type="button" onclick="load('test1.html')" value="Load">
<script>
var currentPage;
function load(page) {
if ( currentPage != page ) {
$("#result").load(page, function () {
currentPage = page;
});
}
else console.log('already loaded');
}
</script>
If you mean to access the contents of that page after it is loaded, You can use the callback of the function load.
$( "#result" ).load( "ajax/test.html", function() {
alert( "Load was performed." );
});
The callback is added as the second parameter one function and work within when it is charged.
You can also receive parameters in the callback.
Type: Function( String responseText, String textStatus, jqXHR jqXHR )
Full documentation have it here http://api.jquery.com/load/
Related
I have a function newCount that I run on Ajax success and it is working OK, however, I want to also run the same function every time the window is reloaded but for some reason I'm unable to call the function with newCount();
my code:
.ajax
$( document ).ajaxComplete(function() {
newCount();
});
.js
function newCount() {
var sum = 0;
$('.myclass').each(function() {
sum += parseFloat($(this).text());
});
// update count in html
$('#myid').html(sum);
}; // end count function
newCount(); // ajax not working when this in place
when I add newCount(); after the function, it will run correctly on page load, but the ajax will no longer work and vice versa.
What am I missing? How can I call the same function from the ajax success and every time the page is loaded?
Hey I've created this Plunker to show you how you should call the functions.
Here is the Javascript code.
<script>
(function(){
function newCount(msg) {
alert("message from: " + msg);
}; // end count function
debugger;
newCount("Page load");
$.get( "data.json", function( data ) {
alert( "Load was performed." );
});
$(document).ajaxComplete(function() {
newCount("ajax complete");
});
})();
EDIT 1
I've changed the Plunker so you can see that also works inside the $.ajax success property.
$.ajax({
url: "data.json",
data: "",
success: function() {
newCount("ajax complete");
}
});
I cannot figure out how to reload the content within this div periodically:
<div id="redditFeed">
<script src="http://www.reddit.com/r/politics/hot/.embed?limit=10&t=all&style=off" type="text/javascript"></script>
</div>
I've tried some jquery, but the closest I've come is reloading the script into the div without executing it. Help would be much appreciated.
You can use $.getScript to load script again.
setTimeout(function() {
$.getScript( "http://www.reddit.com/r/politics/hot/.embed?limit=10&t=all&style=off", function( data, textStatus, jqxhr ) {
console.log( data ); // Data returned
console.log( textStatus ); // Success
console.log( jqxhr.status ); // 200
console.log( "Load was performed." );
});
}, 3000);
I'm having issues figuring out how to handle error on my page using .load() function, i already used the call back function for transitioning and i don't know how or to place the error code and make it work correctly....
i av this code.....
$('.menuLink:eq(0)').click(function(event) {
event.preventDefault();
setTimeout($('#navigation ul li').removeClass('expand', 'normal'), 1000);
$('section').hide().load('index.html section', function() {
$(this).fadeIn('slow');
});
});
I'll like to load any error that may occur in the section tag...
If you are using load() you can do the error checking in the same callback function. For example, as given in the JQuery documentation:
Display a notice if the Ajax request encounters an error.
<script>
$( "#success" ).load( "/not-here.php", function( response, status, xhr ) {
if ( status == "error" ) {
var msg = "Sorry but there was an error: ";
$( "#error" ).html( msg + xhr.status + " " + xhr.statusText );
}
});
</script>
In that callback function, first check for errors. Then, if there are no errors, do the fadeIn.
$('.menuLink:eq(0)').click(function(event) {
event.preventDefault();
setTimeout($('#navigation ul li').removeClass('expand', 'normal'), 1000);
$('section').hide().load('index.html section', function() {
// Check for errors here
$(this).fadeIn('slow');
});
});
Inside clientProfile.html I have a div with class name clientName. And after loading the file inside ajax success, I want to append "hi" to that div, but doesn't work.
JS:
function renderClientProfile() {
$(".wrapper").load("./clientProfile.html");
}
success: function(data) {
renderClientProfile();
$(".clientName").append("hi");
}
Do you mean:
$( ".wrapper" ).load( "./clientProfile.html", function() {
$(".clientName").append("hi");
});
I'm trying to bind data in CK Editor from database. But it is nor work properly, data is fetch but not display, display only when click on inspect element in Google Chrome.
HTML
<textarea id="input" name="input"></textarea>
JS
<script>
$(document).ready(function () {
$("#input").ckeditor();
});
function BindData() {
$("#input").val('This is CK Editor Demo');
}
BindData();
</script>
Link Here
First, you got to wait for DOM to be ready, then you got to wait for editor to be ready, and finally you can bind your data:
// Wait for DOM to be ready.
$( document ).ready( function() {
// Create an instance of the editor.
$( '#input' ).ckeditor( function( textarea ) {
// When the instance is ready, set some data.
$( textarea ).val( 'This is CK Editor Demo!' );
} );
} );
Or with an external method:
function BindData() {
$( '#input' ).val( 'This is CK Editor Demo!' );
}
// Wait for DOM to be ready.
$( document ).ready( function() {
// Create an instance of the editor.
$( '#input' ).ckeditor( function() {
// When the instance is ready, set some data.
BindData();
} );
} );
Read the official guide for the new jQuery adapter (since 4.2).
You load ckeditor and after you fill the textarea. No way, the ckeditor is loaded. An has not live update. You must change order.
<script>
function BindData() {
$("#input").val('This is CK Editor Demo');
}
BindData();
$(document).ready(function () {
$("#input").ckeditor();
});
</script>
You can use :
CKEDITOR.instances[ckeditorname].setData(yourdata)
To bind data after ckeditor instance
Try :
<script>
$(document).ready(function () {
$("#input").ckeditor();
BindData();
});
function BindData() {
CKEDITOR.instances["input"].setData('This is CK Editor Demo');
}
</script>
Calling BindData() function after ckeditor init.