Loading content to the div using AJAX/jQuery - javascript

I am a beginner in playing with jQuery/AJAX, my goal is to load content to the div below:
<div id="blogcontentloaded">
</div>
I came up with .load and it worked, the page loads but it keeps refreshing and loads over and over.
$(function loadBlog(e) {
$('#blogcontentloaded').load('/blog/page1.html');
e.preventDefault();
return false;
});
I tried using e.preventDefault but it doesn't work for me.
Also my goal is to do this without any buttons. When main page loads portion of the page that I want to load along with main page is going to be for updating the content in loaded element.
Thanks for the help!

You can use the javascript load function. It may solve your problem. here you can get some information about windows load and jQuery ready functions.
$( window ).on( "load", function() {
$('#blogcontentloaded').load('/blog/page1.html');
});

You need to wrap the function in the 'ready' function and make sure that it is executed once:
$(document).ready(function(){
$('#blogcontentloaded').load('/blog/page1.html');
});

Have you used the jQuery file on the top of other js files?
Add the jQuery.js file
$(document).ready(function(){
$('#blogcontentloaded').load('/blog/page1.html');
e.preventDefault();
return false;
})

Related

jQuery Load inside another Load not working

I have a document ready load when I click a button on view.php:
<script type="text/javascript">
$(document).ready(function () {
$("#admin_user_view").load('admin_modules/user_mgt/pending.php', function(){ //get content from PHP page
$(".loading-div").hide();
});
});
</script>
The pending.php page also contains another load:
$("#pending_view" ).load( "fetch_pages.php?query=admin_user_view&view_page=pending", function(){ //get content from PHP page
$(".loading-div").hide();
});
The problem is, the loading in pending.php is not working. I also tried:
$('#admin_user_view').load('admin_modules/user_mgt/pending.php',
function(){
$("#pending_view" ).load( "fetch_pages.php?query=admin_user_view&view_page=pending", function(){ //get content from PHP page
$(".loading-div").hide();
});
});
What did I miss? Or is this really not possible? If not possible, what alternative can I do?
Your help is highly appreciated.
Thanks!
Note: Both the first and the second load functions are wrapped in document ready function and the third one is being called by a function when a button is clicked.
Forgive me for not double checking everything. The jQuery functions are working perfectly. The problem lies within the PHP code I'm calling inside that load so nothing seems to happen. When I fixed the PHP code, everything worked fine. Thanks for your help!

how can fire event after end loading nested html page (page in object )

i want hide object after html page end loading not the man html tag
this is my code
$('<div id="content" ><object data="../06.html"></div>').appendTo('section')
i try use load but return after div loading i don't want this
With jQuery, you can start some action after the DOM is loaded. The content (e.g. images) isn't necessarily already there, but you can manipulate every DOM element after the DOM is ready. Use the following snippet for that:
$(document).ready(function() {
//some code
});
If you want to wait until the page is fully loaded (e.g. also images), you can use window.onload:
window.onload = function() {
//some code
};
To hide a <div> when your webpage is fully loaded:
$(window).load(function () {
$('div').fadeOut(); //or .hide()
});
To show a div when the page is fully loaded:
$(window).load(function (){
$('div').fadeIn(); //or show()
});
If that's not what you're looking for, then please do explain more about your problem.

Ajax loaded part of a page - how do I make links in the loaded content work?

I load a part of my basketpage inside an accordion div in my header. This works great and shows my basket in a nice dropdown.
The last problem I need to solve with this is to get the buttons in the loaded content to work. Is it possible to write an callback that make these works? Im not sure even what to google for this one..
This is how the buttons is setup in the loaded content:
checkout
Script Im using to load the content:
$('.dcjqg-accordion ul.sub-menu').load('/m4n?seid=etailer-basket div#centerbox.itembox.centerbox');
use the callback function of .load().
$('.dcjqg-accordion ul.sub-menu').load('/m4n?seid=etailer-basket div#centerbox.itembox.centerbox', function() {
$("#_ec_oie2").on("click", function() {
if (UI.pb_boolean(this, 'click')) { }
return false;
});
});
checkout
You need to use a child selector for the event. You can attach an event to the .sub-menu element that will fire on the content loaded in through the ajax. Something like the following could work:
$(".dcjqg-accordion ul.sub-menu").on("click", ".action.actionbasket.checkout", function() {
if( UI.pb_boolean(this, 'click') ) {}
return false;
});
Notice the second parameter to the on method. It is a selector that will be used to look at the target of the click event. I used .action.actionbasket.checkout since that is what is on your a tag.
This code may not work exactly, but this should help get you in the right direction.
Here is the link to the jQuery documentation for the on method: https://api.jquery.com/on/

load widgets after loading conten

What am doing is writing wizards using existing forms and list views. we want to combine these forms in single page. here is a script we have used to get form from url then called function to bind widgets. first line is loading content of form but bindWidgets is not working. While bindWidgets is working on preloaded content which is default loaded with page.
<script>
$(document).ready(function() {
$("#template_form").load("/push_templates/pushtemplate/create/ #zform");
bindWidgets();
});
</script>
Do we need to wait for load, as it seems that 2nd line is executed prior to content loaded. How can we go to wait stat or better way to call bind function after load complete.
Use this;
<script>
$(document).ready(function() {
$("#template_form").load("/push_templates/pushtemplate/create/ #zform", function() {
bindWidgets();
});
});
</script>
You can see demo here: jsfiddle

How can I tell when all images on a page are loaded using jQuery?

I’m using jQuery for my project. $(function(){...}) fires the function “when the DOM is ready” — this doesn’t say that all images are loaded, right?
Is there an event that gets fired when every image is loaded too?
I guess you mean
http://api.jquery.com/ready/
versus
http://api.jquery.com/load-event/
Example: Run a function when the page is fully loaded including graphics.
$(window).load(function () {
// run code
});
without jQuery:
window.onload=function() {
alert(document.images.length);
}
You can check on load event of image tag. This will get fired when image loading completes.
$("img").load(function(){
// your code
});
window.onload will solve this, I wrote about this there: http://amrelgarhy.com/blog/how-to-tell-when-images-have-loaded/

Categories