I am building a website that uses PHP and JavaScript. I have a main menu that dynamically, when I click on a button it loads a page in the content div and runs its JavaScript script.
Now the problem is when I have loaded a JavaScript file and I go to another page that loads its contents in the same content div, the old JavaScript file that was included in the previous page is still loaded. Is there a way to prevent this.
JavaScript code:
$(".button").click(function(){
$("#content").empty();
$("#content").load("PHP/home.php");
});
PHP/home.php code
<html>
<head>
<title>test</title>
<script type="text/javascript">
$(document).ready(run);
function run(){
alert("test");
setTimeout(run, 500);
}
</script>
</head>
<body>
<h1>Homepage</h1>
</body>
the Jquery is loaded in the HTML that the content div is. And all the other buttons and PHP pages is being used the same way. When i load a new page the Alert function of the home.php is still going.
just have a clue because you haven't shown enough code
try clearing out the div with
document.getElementById("content").innerHMTL = "";
then adding other page content in it
Related
I have a file (lam.php) that displays a database-driven list of countries in Latin America. I would like to include it in various pages on my website as a convenient reference. But rather than simply include it, I'd like to use AJAX, so the users can decide whether or not they want to view the list.
So I'm learning how to work with AJAX. It sounds like I want to use jQuery + AJAX, using Post instead of Get.
But I immediately got hung up on an error on this line:
$.post("http://gx/2b/inc/C/Shared/DBLists/World/lam.php",data,callback);
I don't see any errors displayed when I preview the page, but the error is highlighted in Dreamweaver. Nothing happens when I click the button, so there's obviously an error somewhere. Can anyone spot the error(s) in my script?
This is the entire script:
<head>
<script>
$(document).ready(function(){
$("button#lam").click(function()
$.post("http://gx/2b/inc/C/Shared/DBLists/World/lam.php",data,callback);
)
}
)
</script>
</head>
<body>
<button id="lam">Latin America<button>
</body>
You need to add a DIV to the HTML for the result to be displayed in. Then the callback function has to fill in the DIV with the response from the AJAX call.
Since your PHP script doesn't take any parameters, you don't need the data argument.
<head>
<script>
$(document).ready(function(){
$("button#lam").click(function()
$.post("http://gx/2b/inc/C/Shared/DBLists/World/lam.php", function(response) {
$("#lam-result").html(response);
});
});
});
</script>
</head>
<body>
<button id="lam">Latin America<button>
<div id="lam-result"></div>
</body>
I've tried several options to try and load the content from a div on one page with id="container" into a div on a different html page id="landing".
I used the answer here and also lots of variations of it
Load content of a div on another page
I've run a test and Jquery is being loaded.
The test files are here http://www.salcombeyurts.co.uk/test/landing.html
My code looks like this:
<script type="text/javascript">
$('#landing').load('source.html #container');
</script>
This will eventually end up on a PHP page. Part of a Joomla site.
You run the script before the #landing div is defined.
Run your code after the DOM ready event
$(function(){
$('#landing').load('source.html #container');
});
It seems like the suggestion you got was to do an AJAX request and load the entire page into the #container div on the current page, which is not a bad idea. What you seem to be trying to do, on the other hand, is load the page and then get the content of a div inside that page and put it in a container div on the current page, which is overly complicated and a bad solution to what ever the problem is.
Here is my solution none the less
$(function() {
$.get('page with the div you want', function(data) {
var content = $(data); //turn the page into a jquery object
var div = content.find('#div'); // this is the div you want the content from
$('#container').html(div.html()); // this will set the content of the current div
});
});
I would move your script to the bottom of the page and replace it like so.
Original:
<script type="text/javascript">
$('#landing').load('source.html #container');
</script>
New:
<script type="text/javascript">
$(document).ready(function() {
$('#landing').load('source.html #container');
});
</script>
Note the space removal between source.html and #container.
I'm building a little upload script. My form has a target to an iFrame and the iFrame locates on the same page as the form.
In the code of the iFrame I upload the files to my server. If the upload is finished i want to run a little jQuery inside the iFrame to hide a div on the parent page (where the form is located).
Strange thing is that the jQuery inside the iFrame doesnt work. If I try a simple
alert('bla bla bla'); it doesnt show.
Somebody now what i should do?
Thanks in advance!
the code of the iFrame:
<? if(isset($_POST['Q'])) { echo 'form is set';
echo $_POST['Q']; ?>
<script type="text/javascript" charset="utf-8">
// JavaScript Document
$(document).ready(function()
{
$('#test').show();
});
</script><? } ?><div id="test" style="display:none;">bla bla bla</div>
If you are using jquery withing iFrame you need to have references to JQuery libraries withing the Iframe itself.
I want to insert the jQuery plugin dropdown login form to make my website more pretty, but I am really confused where and how to insert jQuery into my code. For instance the following is my index.php:
<?php
include ('book_fns.php');
session_start();
do_html_header("Welcome to Store");
echo "<p>Please choose a category:</p>";
// Get categories out of database
$cat_array = get_categories();
// Display as links to cat pages
display_categories($cat_array);
//If logged in as admin, show add, delete, edit cat links.
if(isset($_SESSION['admin_user'])) {
display_button("admin.php", "admin-menu", "Admin Menu");
}
do_html_footer();
?>
And I want to add the jQuery plugin to the top of my index page.
How do I insert this jQuery plugin?
Get it straight from the CDN. Paste this code on your page's HEAD :
<HTML>
<HEAD>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</HEAD>
</HTML>
Then utilize the library just as you would with your usual javascript code just like this one:
<script>
$(document).ready(function() {
alert('Hey! I was called when the document finished loading.');
});
</script>
I think you should echo the tag to your index page like this:
echo "<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>"
Or you include an HTML/PHP file that contains jQuery script in the <head></head> tag
include('headScript.php');
Or you write a function that echo the <script></script> tag above:
echo $this->headScript("http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js");
protected function headScript($src){
return '<script type="text/javascript" src="$src"></script>';
}
Yes, just treat the JavaScript and jQuery code as you would HTML. The server reads the PHP code and the PHP code tells the server what to send to the browser, and the browser is what reads the jQuery and HTML.
I'm not brilliant with AJAX but could somebody please write me a quick code for switching a DIV tag with an external page.
For example:
<script type="text/javascript">
// Fun Stuff Here //
</script>
<div id="random">HIDDEN</div>
It would be AWESOME if the content could fade-in when it's loaded.
Ok, I have this so far (but it doesn't seem to be working):
<ul>
<li>ss3</li>
<li>ss4</li>
</ul>
<script type="text/javascript">
$(function(){
$("a.load").click(function (e) {
e.preventDefault();
$("#folioWrap").load($(this).attr("href"));
});
});
</script>
<div id="folioWrap"></div>
You may want to try this JavaScript AJAX loader jQuery plugin that can load page elements content via AJAX and it alters all the links in such way that when you click on the links of the AJAX loaded content, the new page element content is also loaded via AJAX.
I suppose you can hack it to add any fade transition effects when the new page element is loaded.