I am using Jquery jNavigate plugin and everything works well. Except at some point from my other part of the JS code I want to be able to refresh content that is currently displayed in the container. How can I achieve this?
Here is what I've done.
I have one container for content that should be displayed via AJAX:
<div id="container">
</div>
Then I initialize jNavigate plugin on it
$('#container').jNavigate({
spinner: 'img/loading_icon.gif',
extTrigger: '.jnav-ext',
intTrigger: '.jnav-int'});
And I have several links that work with jNavigate:
Home
About
So everything works well except I can't refresh current content. Plugin itself has navigate() method inside. So how can I call that method from outside to refresh the contents in the container (refresh same page)?
I figured out it myself. Here is correct answer:
$('#container').jNavigate("navigate", {url: window.location.href});
Invoke this from whenever you want to reload current page in #container which is initially loaded via jNavigate.
Related
I am using Jquery tabs in my project, and it all works fine.
However when the user opens the page, the page displays all the material in all the tabs for a second first, then it executes the javascript and the screen comes back to normal.
It's an ugly sight, how can I prevent this? Is there a way to show the page after all the loading is done only?
You could try hiding your content when the page loads and using JQuery to reveal it.
HTML:
<div id="contentDiv" style="display: none;">....</div>
JavaScript:
jQuery(document).ready(function ($) {$('#orderContentsInfoBox').css('display','block');});
This jQuery function fires when the document is fully loaded. If you are still seeing a flicker of content before it is hidden in tabs, then I would recommend finding the function that sets up the tabs and inserting the code to reveal the content div there. That way the content will only appear after all tabs are setup.
I'm trying to use Bootstrap-Switch to toggle my checkboxes. It works fine on a normal page, or a modal thats pre-loaded into the page.
However, if I load the modal from a remote page (a href=something.html) the toggle does not work/display. Apparently it loads once but doesn't reload after the modal is opened.
I tried
$("#myModal").on("shown.bs.modal",function(){
$(".checkbox").bootstrapSwitch();
});
But to no avail.
I've tried added the JS code directly to the code being pulled from the Modal as well but it didn't work. It worked on the remote page when loaded directly, but not through the Modal.
I'm a novice JS guy so this may be a trivial fix. Basically need to know how to call bootstrapSwitch() after the modal is loaded.
Thanks!
Just realized I had the shown.bs.modal called 2x for different things. When I combined, it fixed it. Bah, 30 minutes down the drain!
I have a JS function that is called in an iFrame that performs a post to my server and THEN is suppose to refresh the parent page of the iFrame. When I click a button on a third party site, a hidden div is rendered with my iframe. Once I make a submit post, I want to refresh the page (3rd party) page.
So the current setup for that website (which is third party and I have no control over their code), is this:
Body
div
div
div
table
tr
my iframe
....
So the code that is attached to my jQuery ajax POST call is such:
.....
xhtml.append("}).done(function() { alert('im here'); window.location.reload(false);});");
xhtml.append("}");
.....
I'd prefer not showing all the code - but I can confirm that the done callback from the post IS called correctly AND the page does appear to "refresh" - but it should be treating it almost like I first entered the page, with my iframe closed.
How do I get almost a fresh reload of the page/css/etc? I figured this would work, but it appears it doesn't.
--Edit--
I realized that adding reload(true) will reload the server on initial request. However, the other content that renders (to view the hidden div) doesn't appear to reload correctly. It leaves the hidden divs up.
--Edit 2--
It looks like that window.location.reload(false); isn't a true "replica" of a browser refresh call. Which is ideally what I'm looking for.
Instead of saying
window.location.reload
try using
window.parent.location.reload
Above options will only work in case of the page and contents of IFrame both are hosted on same domain.
I am using the JS Facebook Graph API and want to load a friends list with profile pictures and this takes a few seconds if there are a lot of friends. I want to display a loading div, and once everything is loaded I want to hide the loading div and show the friendliest. I am using JQuery's $(window).load function, but it does not seem to work, the loading div does not show, but still shows content rendering. I think this may be because I'm making the Facebook request in the middle of my page, so the browser might think at the beginning everything is loaded, but have no idea how to fix this.
Put your whole page in a <div style="display:none;"> or simply set the <body style="display:none;"> then change it to :block (using jQuery.show() will work) once you have received the data you are requesting from Facebook.
I'm working inside a Facebook tab iframe content page and since it takes a few seconds to appears the iframe content of my site I'm wondering If I can place a loading gif inside the iframe to show first (maybe as a body background image) while its loading the rest of the content.
I see that the iframe ussually cames with all the images. So I'm wondering If there's any way to do this or the content of the iframe loads and is displayed all together.
I tried the image as body background and it didn't work. Both came together.
You can't modify the contents of an iframe that comes from a different domain.
But, you can use absolute positioning from your main window to put an image over the top of the embedded iframe which can probably accomplish what you want without a lot of complication or change of your main page design.
Here's an example: http://jsfiddle.net/jfriend00/DajS4
If your code is in the iframe and you want something displayed before your page loads into the iframe and you don't control the parent, then there is nothing to do. You can't do anything dynamically until your code is loaded and by then the page will already be starting to show.
All you can do is to make something on your page load very, very quickly (perhaps like a small image in the first tag of the page) that should be one of the first things to show and then when your page successfully finishes loading, you would hide that small image. Other than making something show quickly, you can't do anything until you load so you can't show anything before you load. It would have to be the parent window that created you that did something earlier.
Umm,
I understand what you are trying to achieve. but the only way i know to achieve this would be to use ajax to load all your content.
Set the ajax function to run on page load. And in the body of the page place one of those gif loaders..
hope u understand what im trying to say!
You can use AJAX to load your page.
<div id="loading">loading..</div>
<div id="content" style="display:none"></div>
$(function() {
$('#content').load('http://url', function() {
$('#loading').hide();
$(this).show();
}
});
note: the location of all your javascript should be at the bottom of the page to improve load speed.