I'm trying to load a PHP document dynamically which uses some jQuery events on the same script so after loading the webpage the jQuery effects don't work.
For example:
$(document).ready(
function(){
main();
function main()
{
$('#game1').hover(
function(){ $('#info1 p').slideDown('fast'); },
function(){ $('#info1 p').slideUp('fast'); }
);
$("#izquierda a").click(function()
{
$('#izquierda ul').hide();
$('#content').slideDown();
$('#menu').slideDown();
$('#contentMin').hide();
$("#gameContent").load("content.php", main()); // i try loading main() again so the effects would have some effect? doesn't work though
});
}
});
And in content.php I load data from a database and place it in a div called #game1 which uses the hover effect but it doesn't work after I loaded content.php. Without having it loaded from content.php the same script works.
So how can i make it work?
Sorry im new to this, thanks!
Since the server needs to render the code, you need to use AJAX here. Look up the jQuery ajax function: http://api.jquery.com/jQuery.ajax/.
$("#gameContent").ajax({
url: "content.php",
success: function(){ main(); }
});
Related
I've got a dynamic page which I'm loading from an external PHP file when the booking link is clicked.
My issue is the jQuery code I need to run straight after it sometimes tries to execute before the PHP page is fully loaded (the follow and remove parts specifically). So when I try load the div, jQuery works sometimes, and other times not.
From what I've seen on other examples $(document).ready(function() is supposed to prevent the jQuery executing until the page is fully loaded, however since I'm loading a specific div (content) and not the entire page it seems to not work?
$(document).ready(function(){
$(document).on('click', '.booking', function (){
$('#content').load('calendar.php');
$.getJSON(url,data, function(data) {
$.each(data, function(index, data) {
$("#blocksid"+data.slot_id).css("background-color","#009cd0");
$("#follow"+data.slot_id).hide();
$("#remove"+data.slot_id).show();
});
});
return false;
});
});
Thanks in advance for any assistance!
To achieve what you are expecting in a predicable way you should run dependent javascript code
after loading content to div. Just create a call-back function for load method and have your dependent code inside it.
$('#content').load("calendar.php", function() {
//put the code here, that you need to run after loading content to above div
});
You need to set:
$.ajaxSetup({ async: false });
and then turn it back on by:
$.ajaxSetup({ async: true });
or use
$.ajax({
async:false
});
I've got a script in an HTML file that runs a php file every 30 seconds. The php file is intended to change a div's innerHTML. I don't seem to find the way to replace it.
I was using load() but there are several divs I want to keep updating every 30 seconds and I don't want to make the server GET that much requests. So I'm looking for one only php get and then change the innerhtml in those several divs
This is what i've got:
HTML:
<script type="text/javascript">
$(document).ready(function () {
$.get('php.php');
});
setInterval(function(){
$.get('php.php');
}, 30000);
</script>
<div id="foo"></div>
php.php:
document.getElementById("foo").innerHTML = '<?php
// some php code
?>';
I think the problem is I'm not being able to get the element from the parent HTML file. I don't know how to solve this...
Any suggestions will be more than aprecciated!
You are reinventing jQuery's load()
function fetchContent() {
$("#foo").load('php.php');
window.setTimeout(fetchContent, 30000);
}
$(fetchContent);
The server should just return the HTML content that you want to display.
EDIT
Since your comment is different from the original question.
function fetchContent() {
$("#foo").get('php.php', function(data) {
var html = $("<div/>").html(data);
$("#foo").html( html.find("#Section1").html() );
$("#bar").html( html.find("#Section2").html() );
$("#asd").html( html.find("#Section3").html() );
window.setTimeout(fetchContent, 30000);
});
}
$(fetchContent);
You would want to add an onError handler and might want to set the no cache option for the Ajax calls.
what you probably want is for your php.php to return some data, and then you use the success of the $.get to update your #foo; taking an example from http://api.jquery.com/jQuery.get/ and modifying it for your example
$.get("php.php", function( data ) {
$( '#foo' ).html( data );
});
hope that helps :)
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.
$(function(){
$('p.load_it a').click(function(){
$('#demo_content').load('http://d.com/myphp.php? nice=1149632');
return false;
});
});
Click me to load some HTML with AJAX.
<div id='demo_content'>
</div>
I wanted to know if anyone can give me advice as to how I can load this kind of Effect not by a click, but by an animated "loading" effect.
Let me know if anyone has any suggestions.
This will execute your load() call when the DOM on the page is ready.
$(document).ready(function() {
$('#demo_content').load('http://example.com/myphp.php? nice=1149632');
return false;
});
As for your 'loading' request, I suggest you take a look at this StackOverflow question. Nevermind, I just saw you already had something in mind.
$(document).ready(function() {
$.ajax({
url: 'http://example.com/myphp.php?nice=1149632',
success: function(data) {
$('#demo_content').html(data);
}
beforeSend: function(){
//show loading here
$('#demo_content').html("Loading...");
}
});
});
If you want the javascript code to be executed when the page has been loaded, you can also add the script at the bottom of the page, like this:
<script>
$('#demo_content').load('http://example.com/myphp.php? nice=1149632');
</script>
I am using this script to load pages in a css frame (div#maincontent). I want the links in the loaded pages to load in this frame instead of just "going" there. I want to do this using jquery. Here is my attempt:
$('#maincontent a').click(function(e) {
e.preventDefault();
ajaxpage($(this).attr("href"), 'maincontent');
});
Not sure what ajaxpage is, but if you're just loading a page into a div you can simply use load
Something like this:
$('#maincontent a').click(function(e) {
e.preventDefault();
$("#maincontent").load($(this).attr("href"));
});
Edit:
If you want the loaded page to have event handlers for click too, you can use load()'s callback function for this. Like this:
function engageLinks() {
$('#maincontent a').click(function(e) {
e.preventDefault();
$("#maincontent").load($(this).attr("href"), function() {
engageLinks();
} );
});
}
// Call the function the very first time the page is loaded.
// After that the function will call itself.
engageLinks();
Here's an example.
Replace ajaxpage with $('#maincontent').load($(this).attr("href"));