I have a jQuery fancybox with an iframe. It loads the code from a .php.
Inside that .php file, I have a button which does a post when clicked.
$(".next").click(function() {
$.post("update.php", {page: $(this).attr('data-page')}, function(success){
$("#dialog").html(success);
}
);
});
The issue is that when I click this for the first time it loads up the html, however it does not work the second time. It seems that jQuery is not loaded for the second time as I am using the star-rating and the star-rating is not rendered there as well.
Initially my dialog has some html code in it.
To illustrate, here's how the structure of my page. I have a main.php. I have a button inside main.php that when I click launches an iframe fancy box. The content of this fancy box is loaded from a .php file, called content.php. Inside the content.php I have another button that when clicked does a post to loader.php. loader.php echoes a bunch of html. The jQuery code to post is located at content.php When I click on the button inside the iframe for the second time, it doesn't do anything
Well, Fancybox is really just loading a div over your current content, so if the content of that div (the Fancybox "dialog") changes after the DOM is set (in other words, the page is done loading) then the events are not attached to the new content by jQuery. You'd have to modify your code to use the .live() function.
Instead of click, you have to use live. Change first line as:
$(".next").live('click', function() {
Related
Hi I have a PHP page loading in a DIV tag from a javascript function. I also have a button on this PHP page that sends information to another PHP page. I was using header to go back to the page I was on (still in the div tag) but I was wondering if there is a way to reload the original parent page. The pages are all saved in separate files so I was unsure how to do this. I have tried using Javascript such as top, window, and opener for location.reload() e.g.
top.location.reload()
window.location.reload()
and saving the function on each page as
function myFunctio(){
location.reload();
} and then calling it on each page again using top, window, and opener but nothing has worked. If I use a header it will only load the page in the DIV.
You can use them in sequence to get the result you're looking for give something like window.opener.location.reload(false); a try
To be clear - Ive already checked other Questions about refreshing div and the ideas I found were not exactly what I look for.
My site is made of plenty pages with the same header and footer (top, bottom, menu on both sides). I use smarty templates, and the Whole action of every page happens in one <div id="content">.
My users use to refresh most of those pages many times to do an action they've already done once again. With refreshing browser loads again header, footer, viewed page etc. I would like to bring them the button (instead of F5) which will refresh just a current content page (e.g. account.php) without refreshing whole site.
One of plenty structure:
<?php
$title = 'OneOfPlenty';
require_once("includes/head.php");
{
Whole action
}
require_once("includes/foot.php");
?>
header.tpl ends with <div id="content"> then comes
onofplenty.tpl and then in
footer.tpl I got </div> (close the content)
Here comes the question: Is it even possible? Am I able to create such a flexible button which will recognize which page is being displayed and will "know" to refresh just the content of this page?
Any ideas and help will be aprreciated.
Thank you
TTed
You could do an Ajax call with jQuery to get the output html of the tpl file of the page.
You could use an Ajax call, e.g. by using the jQuery get() function, e.g. like this
$.get("includes/account.php", function(data) {
$("#content").html(data);
alert("Load was performed.");
});
If you saved some kind of variable, either to session or to a data-content on your div. Just so you know which page you are on. Say if you are on account.php you set $('#content').attr("data-content", "account"). Then if you press the refresh button you could use an ajax get on $('#content').attr("data-content") + 'php' to re-import the data. Could be done with a SESSION variable as well.
I have a page with 2 divs one is called menu and the other is called content. The content div loads a log in page. When a user tries to log in I call a script into the content div and if unsuccessful it reloads the log in page.
If it is successful I use header location to redirect to the logged in page. When this page loads in the content div i need it to change the menu div to a different menu. I have tried using the following but to no avail. Is there any way that when the successful page loads into the content div that it can automatically change the content of the menu div
this is what i have tried in logged in page that is loaded into content div the body tag of that page has
onLoad="$('div#menu').load('Includes/logged-menu-page.php')"
The second argument of the .load() function is a callback function. You can use this to verify it loaded correctly and then edit your menu element:
$('#result').load('Includes/logged-menu-page.php', function() {
if(loaded_correctly)
$("div#menu").html("OtherMenu");
else
$("div#menu").html("LoginMenu");
});
You need to change which item you are calling the load function on:
$('div#menu').load('Includes/logged-menu-page.php')
should be
$('div#content').load(function() {
// load your stuff to your menu div
// you would probably need to make an ajax call or something here
});
I think this is what you are trying to do, but I am not sure what info you have in logged-menu-page.php from your question
I have a page where if you click on a link, it exposes a div that using ajax displays content from a dbase.
After a user edits this content on the server, I'd like to use PHP to return the user to that page. This is no problem using a redirect
header("location:page.php")
However, when the user comes back to the page, ideally, I'd like to have the content in the div open automatically so the user can immediately see edits without having to find the link to open the div and click on it.
Is this possible, either with something in the url to fire the javascript or alternaively, when you load the page with a certain parameter, triggering javascript to open the div.
The code to open the div is a simple javascript call:
View Content
showDiv just uses ajax to display something from the server using responsetext.
Thanks for any suggestions
header("location:page.php?show=1")
Then in page.php body tag:
<body <?php if($_GET['show']==1) { ?>onload="showDiv()"<?php } ?>>
I'm using a simple script to reload a div
$('#mydiv').fadeOut('300').load('# #mydiv').fadeIn("300");
The problem is that the div I'm reloading has the Facebook like button inside it. After the DIV reloads, I can see it updated inside the source, but the button is hidden for some reason.
Is there any way to force the button to re-draw?
As I stated in my comment, I think the .load is misunderstood, as you stated in your question
I can see it updated inside the source, but the button is hidden for some reason
.. so with that in mind, I assume you have load functioning with the correct parameters.
You have a synchronistic problem here. Everything you use in the chain uses a timescale, and .load() for that matter is asynchronous.
So instead of just chaining everything, you have to use the callbacks in order to know when the time scale ends for a particular function.
$('#myDiv').fadeIn('300', function() {
// callback when #myDiv is faded out (display:none;)
$(this).load('url', function() {
// callback when #myDiv is loaded with new content from the given 'url'
$(this).fadeIn('300');
})
});
The facebook button won't display because it is configured normally just AFTER document.load.
If you load the div content while the document is already loaded and the Facebook javascript SDK has already initialized. It won't work.
If facebook is not required UNTIL the div loads. You may just try to load the "all.js" script inside the div.
Otherwise, if you've come to that, you'll certainly have to review the application's design.