I'm using jquery to load my website content once its fully loaded. That works great.
jquery code
function check() {
$("#content").load('items.html');
}
$(document).ready(function() {
check();
});
html
<div id="content">
</div>
Is there a way without refreshing the whole page to dynamically load html element (div) when user clicks on one of the items which were already loaded('items.html')?. On one click I want to remove already loaded 'items.html' inside #content div and load new div from any.html file.
So basically, I need to show more info for that particular item by dynamically replacing already loaded items.html and adding new div instead.
I managed to load new html page by adding anchor tags on every item, but it would be much better if I could load only one part(div) of a html file and not a whole page, that way I can write all items informations in only one html file, and then add those div's dynamically when user clicks on any item.
function check() {
$("#content").load('items.html #loadable'); // #ID to load
}
$('#loadCont').click(check);
main page example
page 2 example
You might also want to put this somewhere
$.ajaxSetup({ cache: false });
https://api.jquery.com/jquery.ajaxsetup/
As seen from the demo, .load() does already content-replacement, so no need to .empty() or .html('') beforehand.
Simple.Try to call the check() function on clicking of the element
$('element').click(function(){
check();
});
Related
It's my first post on stackoverflow. I've searched similiar questions here and found a couple of answers but couldn't really find a solution to this particular problem that would help me.
I have a webpage which loads main contents by ajax. Simply like this:
function loadContent(content) {
if(localStorage.content != content) {
$("#content #content_loading").css("display", "block");
}
var userID = Cookies.get("UserID");
$.ajax({
url: '../game/data/load_content.php',
type: 'post',
data : { ID : userID, Content : content },
success: function(response) {
$("#content #content_loading").css("display", "none");
$("#content #import").html(response);
localStorage.content = content;
$("#header").html("<div class='header_text'>"+content+"</div>");
}
}); }
It loads other ajax functions, html and css. Since I have thousands and thousands lines of code simple things get trickier. Now I simply want to create an universal 'close' button for popup windows. All of the popup windows are in a box, and the close button is inside the box header. Now I want to close all popup windows with a single function:
$('.close').click(function() {
$(this).parent().parent().fadeOut();
});
This simply selects the parent of the close element, which is header and then parent of that parent which is the whole box. One of the popup functions looks like this:
function showPopup(header, content) {
$("#popup_header").html(header+"<div class='close'></div>");
$("#popup_content").html(content);
$("#popup").fadeIn(300);
}
This function is included in the main document (<script src="script"></script>).
Then the other popup is directly loaded upon loadContent(content) function, so it's loaded with ajax call. And it's simply HTML that looks like this:
<div id="nearby_players">
<div class="header">PLAYERS NEARBY <div class="close"></div></div>
<ul> </ul>
</div>
Now if I insert the 'close' function upon click in the document that ajax is loading it will work. And if I change the loadPopup() function to this:
function showPopup(header, content) {
$("#popup_header").html(header+"<div class='close'></div>");
$("#popup_content").html(content);
$("#popup").fadeIn(300);
$(".close").click(function() {
$(this).parent().parent().fadeOut();
});
}
It works too. But what I want to do is to create a single click function attached to the main document that will close all the possible popups that are being loaded on the webpage or already are on the webpage. I thought it was a problem since 'close' element was an ID not a class. And since it should be unique I've changed it to class. So my question is. How do I refer to all of the elements with class 'close' whether they are being loaded with ajax, and then within that ajax they get loaded again with another ajax and so on. And also the popups that are already inserted into document when the webpage gets loaded?
How do I add these elements to the DOM so jQuery actually finds it?
Regards,
Hazes!
You create elements dynamically, which means that events are not attached to them.
Please read how to attach events to dynamically created elements: http://api.jquery.com/live/
I am creating a website where all my content is loaded into a div name content. my menubar is also loaded in to a div name menu.
The problem arises when i click the same link for a second time. So for instance i would click on members.php for a second time, the content is loaded into the div but some of my functions dont work as expected as they rely on and id which has been set. An ID can only be used once so when i load the page for the second time the ID doenst work. I would have to remove it before loading the content another time (which isnt an option) - as there are many ids.
i would be using jquery to load the content into the div. for instance $('#content').load('members.php');
but upon doing this the second time my id's would not work (content of the first page load stays intact) is there a way to reload that div.
Also is this normal behavior?
You can use a flag to define if this content loaded before or not, check it every time you call the loading function if it is not loaded before then load it, else no need to reload it again.
//initialize members_loaded variable when your page start.
var members_loaded = false;
//then when you want to load data check for it, change it to true in your complete function (when ajax done)
if(!members_loaded){
$( "#content" ).load( "members.php", function() {
members_loaded = true;
});
}
I'm building a JQuery mobile site which has an image slider on 2 pages. The sliders are activated using the following JS:
$(function () {
$("#slider").excoloSlider();
});
where '#slider' is the name of the div that gets rendered as the slider.
I have this slider on the 2 pages and have given both the same id, and don't want to insert the above code into both pages. To make things easy I want to be able to make add the above code into a.js file that I'm referencing at the top of both pages.
However, the script only kicks in when one of the pages are the first page to be navigated to. So, I assume this means the code is only being called in the once, and due to the AJAX loading of the subsequent page, it isnt called when this new page loads.
So, how can I run the code to affect any/all pages which feature the slider?
I dont know how many times you have to call .excoloSlider(); function. In case you have to call it each time the page is visited, then you need to use any of these page events, pagecontainershow or pagecontainerbeforeshow.
If you use pagecontainershow, you can run .excoloSlider(); on #slider even if you have the same id in a different page. This way, you specify in which page to look for #slider.
$(document).on("pagecontainershow", function () {
var activePage = $.mobile.pageContainer.pagecontainer("getActivePage");
/* check if #slider is within active page */
var slider = activePage.find("#slider").not(".slider");
if(slider) {
slider.excoloSlider();
}
});
Update
I have added .not(".slider") selector to exclude already rendered slider. The function .excoloSlider() will be called on new sliders only.
Demo
Try to use class instead of id since id is unique, then you can change your jQuery code to:
$(function () {
$(".slider").excoloSlider();
});
Use jQuery Mobile API for the navigation system
$(window).on( "navigate", function( event, data ) {
$("#slider").excoloSlider();
});
Edit
Use pageinit
From the jQM docs:
Important: Use $(document).bind('pageinit'), not $(document).ready()
The first thing you learn in jQuery is to call code inside the
$(document).ready() function so everything will execute as soon as the
DOM is loaded. However, in jQuery Mobile, Ajax is used to load the
contents of each page into the DOM as you navigate, and the DOM ready
handler only executes for the first page. To execute code whenever a
new page is loaded and created, you can bind to the pageinit event.
This event is explained in detail at the bottom of this page.
Question
I want to play a loader when any page is loading and it work stop when complete page is loaded. Any idea?
i am new in jquery or javascript.
Just put a DIV on your page immediately with the loading graphic. Put this script anywhere on your page or at the top of an external script file:
$('BODY').append('<div id="loading"><img src="images/loading.gif" /></div>');
Obviously you'll need to style it to position it wherever you want. We do it this way rather than just hard-coding it into the page content so that anyone with JavaScript disabled won't see it.
Then attach to the load event to hide the loading DIV once the page is done. Put this script at the bottom of your page or inside a $(document).ready().
$(window).load(function() {
$('#loading').hide();
});
You need to listen the event onload
window.onload = function() {
// do something
}
or in jquery
$(window).load(function() {
// do something
});
but with jquery a think is better to use :
$(document).ready(function() {
// do something
});
You can use ajaxStart and ajaxStop methods.
Demo:
http://www.balam.in/personal/triponetDemo/pre-loader.html
Click on view source to see the CSS and javascript.
Have a div with id as loading and style the div to show the ajax spinner. Whenever an ajax method is triggered it will show the loading div and when the ajax request is completed, it hides the loading div.
Note that you need to have the loading div in all the pages where ever you want to show it.
Well in case you want to show the ajax spinner on refresh,
check the link below:
http://www.balam.in/personal/triponetDemo/pre-loader-refresh.html
View source to see the implementation
Everytime you refresh it will show the ajax spinner and when the DOM is ready it hides the ajax spinner.
I have a page which opens another page using window.open and does some work and refreshes whole parent page . Is it possible to refresh content of a div/table on parent page using JQuery/Javascript ?
FYI : Here the content of the div is not changing there is an image inside div which is edited by child window which I want to update but that image does not have unique id so I want to refresh whole div .
Thanks.
Pure JavaScript (not JQuery) solution : wrap your div in an iframe, give it an id myFrame, then refresh it from the child like this:
parent.document.getElementById("myFrame").reload();
You can use the .load() method of jQuery to quickly update the contents of a container
http://api.jquery.com/load
Simple as
$('#result').load('ajax/test.html', function() {
alert('Load was performed.');
});
$("#myDiv", window.parent.document).load("page.html", function(){
alert("Portion of page loaded");
});
The second parameter of $() is the context to search into. Default to document.
You can use .html() instead of .load() if you want reload from html string instead of using another page.