I'm using Fancybox to load and Iframe with a form. After I post it, onsubmit calls "return onSubmitForm()"
<script type="text/javascript">
function onSubmitForm() {
parent.jQuery.fancybox.close();
window.parent.location.reload(true);
}
</script>
So Php/Smarty is loading the dynamic content OK in my database. I can also close the Iframe. BUT, after reloading the parent, it's dynamic content is not updated.
I have doing several tests and it only works occasionally (1 in 10). The previous content gets sticky.
I also started using "nocache" or "caching=0" (for PHP/Smarty variables). So far it doesn't help.
If I reload manually the browser, it works.
Thanks!
Diego
Inside the iframe (with the form) just try closing the box
function onSubmitForm() {
parent.jQuery.fancybox.close();
}
...then, in the parent page (from where you called fancybox) add this API option to your script... something like
jQuery(".fancybox").fancybox({
type: "iframe",
width: 640, // or whatever
height: 320,
afterClose : function() {
location.reload();
return;
}
});
Related
I have a form inside a DIV (normally the div is hidden using "display:none;")
The user open the DIV with: onclick='$("#Details").show("slow");
Fills out the form and save the data.
I don't want the entire page to be reloaded, and I need only this DIV to be reloaded
I tried:
function(data) {
$('#Detalils').load(location.href + ' #Detalils');
});
and:
$("#Detalils").load(location.href + " #Detalils, script");
and:
$('#Detalils').load(location.href + ' #Detalils', function() {
$('#script').hide();
})
where in #script I put my script
In this div I have some script, and because of the jQuery on load script execution, the script is not executed.
I cannot put the script in an external file, it must be in the page body.
Is there a way to execute the script a well?
Thanks
Your actual Javascript code should not be within the div, that is the issue. If you wish to reload the form for the user to enter new data, then use ID's on the elements within your forms and write your JQuery code outside of it or in an external file, here is a simple example :
Instead of something like :
<form>
<input type="button" onclick="alert('hello');"> Click me ! </input>
</form>
Do something like :
<form>
<input id="myButton" type="button"> Click me ! </input>
</form>
<script type="text/javascript">
$("#myButton").click(function()
{
alert('hello');
});
</script>
You will have to adapt your code to this, of course, but you don't have another choice. HTML code can be removed and added at will, but Javascript code must not be treated the same way. There are many reasons for this, but one reason is that the browser will only load the Javascript functions once, for obvious optimization reasons.
The works within my local environment. Give it a shot in yours.
The HTML:
<div id="wrapper">
Remove
Reload
<div id="Details">my details box</div>
</div>
The jQuery:
<script type="text/javascript">
function mload() {
/*LOAD IN MY EXTERNAL STUFF*/
mtarget = $('#Details'); //the element on your page, that houses your external content
mscript = 'external.js'; //the js script required for your plugin to work
mtarget.load("external.html", function(){
$.getScript(mscript, function() {
//run the plug-in options code for your external script here
});
});
//*/
}
function madjustments() {
/*ADJUST THE LOADING PROCESS*/
//remove the load request on click from your remove button
$('#mremovebtn').on("click",function(e) {
e.preventDefault();
$('#Details').children().remove();
});
//reload the request on click from your reload button
$('#mreloadbtn').on("click", function(e) {
e.preventDefault();
mload();
});
//*/
}
(function($){
mload();
madjustments();
})(jQuery);
</script>
You will obviously need 2 additional files. One called external.html and another called external.js, for my demo code to work. But you can change the naming process to whatever works for you.
Extra:
Set a class in your external html file (on the parent element), for example #external. And by default, set the CSS to display:none in the style sheet. Then when the page loads in, simply show() it in the jQuery code.
I’ve created a “load more” link which loads the next 100 entries via a AJAX call.
My AJAX call looks like this:
<script type="text/javascript">
function HideButton(){
$('#load_post').css('display', 'none')
}
$.ajaxSetup ({
cache: false
});
var ajax_load = "<div class='loading_wrapper'><img class='loading' src='<?php echo url(); ?>images/ajax-loader.gif' alt='loading...' /></div>";
var loadUrl = "http://www.mydomain.com/loadmore.php";
$("#load_post").click(function(){
$("#result")
.html(ajax_load)
.load(loadUrl, {exclude: "<?php echo $exclude_more_post_str; ?>"},
function() {
$('#load_post').css('display', 'none');
});
});
</script>
The loadmore.php codes just retrieve the next 100 entries from the database, which is pretty much the same query as the main page just with an offset.
It loads correctly the 100 entries but it does not load it into my colorbox iframe. The first entries, before loading more via AJAX, works fine but the 100 entries loaded by AJAX don’t load the page inside the colorbox even though it has the right class attached to the a href.
When pressing an entry which should be opened in a colorbox iframe it just show the page, e.g. http://www.mydomain.com/single-entry/this-is-the-post-suppose-to-open-in-colorbox/
Is there some special property I have missed when running the AJAX call so I need to reload the colorbox. I’ve tried to but the Colorbox javascript in both the header and the footer but the result is the same.
If I’ve explained myself unclear, please let me know and I’ll try to clarify.
Sincere
- Mestika
If you want to show the content of loadmore.php, or other url, into a colorbox iframe try changing the href attribute of its plugin container (i.ex: <a class="loadmore" href=""/>... or whatever you call it) and throw the click event (if previously initialized).
$("#load_post").click(function(){
$(".loadmore").attr('href', "http://www.mydomain.com/loadmore.php").click();
});
You could even chain the initializing method over .loadmore tag like that:
$("#load_post").click(function(){
$(".loadmore").attr('href', "http://www.mydomain.com/loadmore.php")
.colorbox({iframe:true, width:"80%", height:"80%"}).click();
});
I hope it will
I have two Ajax functions that are on the same div, the first one executes when complete page is fully loaded and call the ccslider method, instead the second one checks which menu ID I clicked, on the menu, to load dynamically different contents for different pages.
I can see the content loaded (eg: pictures) but unfortunately I don't see them in the ccslider; it seems that the slider is not executed.
But I know that works just because if I test it, removing the swapContent() function and place my PHP code with the MySQL query inside my main page the pictures are loaded inside the working ccslider.
Any hint on how to fix this problem?
$(window).load(function(){
$('#sliding').slider({
_Options: {
imageWidth: 300,
imageHeight: 200
}
});
});
function swapContent(cv) {
var url = "testing_cover.php";
$.post(url, {contentVar: cv}, function(data) {
$("#sliding").html(data).show();
});
}
You might have to call the slider method again inside the swapContent() function. Try this.
function swapContent(cv) {
var url = "testing_cover.php";
$.post(url, {contentVar: cv}, function(data) {
$("#sliding").html(data).show();
$('#sliding').slider({
_Options: {
imageWidth: 300,
imageHeight: 200
}
});
});
}
I have no access to the kind of plugin you're using, but from what it seems, you're probably modifying the HTML structure needed for it's functionality. Try inserting the HTML to a wrapper inside the #sliding element as opposed to directly in it.
okay so on my home page i'm doing a user name and password check and then im using jquery document.location to send you to a logged in page say secure.php.... while this works it sends you to secure.php first and then images start loading ... how can i do it in such a way that it loads the entire page and then send you to secure.php
example : -
$.ajax ({
url: loginCheck.php,
type: 'POST',
data: username + password ,
success: function (check){
if(check==1)
document.location= /loginpage/secure.php
else alert(invalid username or pass)
}
});
Edit: I'm replacing my entire question now that I understand what you are trying to do. In secure.php, put all of your code in a containing div, something like this:
<body>
<div id="contentContainer">
<!-- content goes here -->
</div>
</body>
Set a style for #contentContainer to be hidden:
#contentContainer {
display: none;
}
Add a window.onload handler to show the div. Unlike onready, onload isn't called until all of the content has loaded including images.
$(window).load(function() {
$("#contentContainer").show();
});
You may want to do the same thing in reverse to a "loading" div with a message that says "loading...". Ie, initially display it, and hide it in the onload handler.
Edit: You can speed up the loading of the page by pre-loading the images in a hidden div in the previous page.
Home.php
<div class="preloader">
<img src="..." />
...
</div>
.preloader {
display: none;
}
Secure.php should load using the cached images.
...this strikes me as highly unsecure, but oh well.
Unless you build a metaframework in jQuery where all page loads are performed in a "shell" and then displayed only when ready to render, the answer is, I'm pretty sure, you can't.
Pages have a definite life cycle. jQuery and AJAX kinda blur the line a bit, but a page load is a singular event that controls the scripts. Loading the page would make the script you were using to load the page go away.
I have 2 php pages named "personal_info" and "portfolio". I load them via php functions in codeigniter http://www.mysite.com/controller/personal_info and http://www.mysite.com/controller/portfolio.
I have a page with menu tabs linked to personal_info and portfolio and I want to load the pages via ajax when a tab is clicked. If js is turned off in the browser the tabs should just go to the url.
I am using the jquery .load() function to load the pages.
<script type="text/javascript">
$(document).ready(function(){
$('#personal_info').click(function() {
$('#result').load('personal_info #load'); //load fragments from #load div
});
$('#portfolio').click(function() {
$('#result').load('portfolio #load');
});
});
</script>
HTML
<div id="tab">General Info</div>
<div id="tab">Portfolio</div>
<div id="result"></div>
Issue: When I click on a tab it treats it as a link and goes to the URL instead of loading the page via jquery. How can I disable the link if javascript is on? Also, I noticed that javascript is not loaded from fragments in the pages, and if I put the javascript in the page I load data it doesn't pick it up.
What is a good solution for this?
EDIT:
For loading js, I just wrapped the entire page in the result div and am loading the other pages with the js and header, footer.
For the first issue: put return false; at the end of each 'click' function:
$('#personal_info').click(function() {
$('#result').load('personal_info');
return false;
});
Edit: For the second issue, maybe pull out any jquery/javascript and run it from a central application.js file?
You need to prevent the default action of the <a/> element. You can accomplish this by using event.preventDefault()
$('#personal_info').click(function(e) {
$('#result').load('personal_info');
e.preventDefault();
});
$('#portfolio').click(function(e) {
$('#result').load('portfolio');
e.preventDefault();
});
To stop the default action from occurring (following the link) you need to use return false at the end of your jQuery click() functions.
With regard to your second issue ("javascript is not loaded from the [dynamically loaded] pages"), ensure that you are using jQuery's .live functionality to attach handlers.