I'm trying to load a php inside a div1 using jquery. The code I have so far below works fine for loading the initial div1.
<script type="text/javascript">
$(document).ready(function(){
$("#div1").load('load.php');
});
</script>
<div id="div1"></div>
Inside load.php I will have links like this below
Link 1
Link 2
Link 3
What I'm trying to do is on the page the div1 is loaded, when the links load inside the div1 I want to be able to click on the links and it will pass the ?id= var inside the div1 and re-load load.php?id= var here.
How would I go about doing this?
<script type="text/javascript">
$(document).ready(function(){
$("#div1").load('load.php');
$(document).on('click', 'a', function(e) {
e.preventDefault();
$("#div1").load($(this).attr('href'));
});
});
</script>
Adding the above would probably be the simplest way. It would take any anchor element and load it into div1 when clicked. The e.preventDefault() stops the link from loading the new page.
If you have other anchor elements in there that you don't want to direct into this div, you would want to add a class to the anchor elements and then only select that class in the click handler (like a.class instead of 'a').
$('#div1').on('click', 'a', function(e){
e.preventDefault();
var new_id = $(this).attr('href');
$('#div1').load(new_id);
});
This will bind the links loaded into #div1, using .on() let's it still work even though the content will be dynamic.
Then it grabs the href and loads that into #div1.
Related
Need help..
I have an index.php page. On that page, I have a link to page-2.php.
On page-2.php,
i also have a link to other page. May I know how to load the link on page-2.php in a same div on index.php page.
I'm using jQuery load method do to this. I'm able to load page-2.php inside a div on index.php. Below are the codes that I made.
$(document).ready(function() {
$('a#staff_info').click(function(e){ //link to page-2.php
e.preventDefault();
var page = $(this).attr('href');
$('#content').load(page);
$('a#upd_staff').click(function(){ //link on page2.php
var page_info = $('a#upd_staff').attr('href');
$('#content').load(page_info);
});
});
});
the above code will direct me to a new page not on a same div
Ajax is asynchronous.
$('#content').load(page);
The above starts loading page two
$('a#upd_staff').click(function(){ //link on page2.php
Then you try to bind your event handler to content from page 2 before it is has finished loading.
So when you click on the link, there is no JS bound to it, so it acts as a normal link.
Use deferred event handlers (so they listen on the document and check what element was clicked when the click happens).
$(document).ready(function() {
function ajaxLoad(event) {
event.preventDefault();
var page = $(this).attr('href');
$('#content').load(page);
}
$(document).on("click", "a#staff_info, a#upd_staff", ajaxLoad);
});
when you click on $('a#staff_info') this -- I can see that you use e.preventDefault(); for preventing the normal action of the anchor tag but when you click on $('a#upd_staff') this you did not use e.preventDefault(); -- that's why this redirect to page2.php. Use e.preventDefault(); - this for next one click may be this will help you
You can use get() for add directly on your div:
$(document).ready(function() {
$('a#staff_info').click(function(e){ //link to page-2.php
e.preventDefault();
var page = $(this).attr('href');
$.get(page, function(data, status){
//action on page loaded, data is your page result
$('#content').html(data)
});
$('a#upd_staff').click(function(){ //link on page2.php
var page_info = $('a#upd_staff').attr('href');
$('#content').load(page_info);
});
});
});
In below,i am trying to redirect from one page to another page with href attribute is appended to URL link.
<script src="jquery-1.11.3.js"></script>
<script>
$(document).ready(function(){
$('a').click(function(){
var clk=$(this).attr('href');
//alert(clk);
window.location='http://www.shopeeon.com&ver='+clk;
});
});
</script>
Google<br/>
Yahoo<br/>
Rediff<br/>
In above example onclick first i want href(i.e. http://www.google.com,http://www.yahoo.com,..etc) which is stored in 'clk' variable and redirect to another page(i.e. http://shopeeon.com) with our link which is stored in "clk" variable.
In my case when i click on link instead of redirecting to other page with appended link it runs that particular href.
You have to stop its Default behaviour by using .preventDefault()
WORKING FIDDLE
$(document).ready(function(){
$('a').click(function(e){
e.preventDefault();
var clk=$(this).attr('href');
//alert(clk);
//window.location='http://www.shopeeon.com&ver='+clk;
window.location='http://www.shopeeon.com&ver='+encodeURI(clk);
});
});
UPDATE FIDDLE
Better Remove a tag, Have some div tag with data attribute place URL there.
For example,
<script src="jquery-1.11.3.js"></script>
<script>
$(document).ready(function(){
$('a').click(function(){
var clk=$(this).attr('data-href');
//alert(clk);
window.location='http://www.shopeeon.com&ver='+clk;
});
});
</script>
<div data-href="http://www.yahoo.com">Yahoo</div><br/>
$(document).ready(function(){
$('a').click(function(){
var clk=$(this).attr('href');
clk ='http://www.shopeeon.com&ver='+clk;
alert(clk);
$(location).attr("href", clk);
});
})
Google
Click on Google to see what is in url to redirect page
I builded for my home page (index.php) a navigation bar, where I can click on one of the available links (anchors). Selecting one link a new body is loaded inside my page (index.php) that contains this code:
<script type="text/javascript">
$(document).ready(function(){
$('#myselector a').click(function(e) {
var url = $(this).attr('href');
$('#body').load(url);
e.preventDefault();
});
});
this works good.
But, now after loading new page page1.php inside the body of index.php I have this trouble:
My page1.php contains a form, and after the submission I need to reload the index.php with page2.php inside. How can I perfrom this?
Note: I edit my question: If you think that now it is clear can you upvote plese? (I was banned for this question and I can't post other question)
In order to catch events from nodes inserted at a later point you need to use event-delegation, for example like this:
$("body").on("click", "a", function(e){
var url = $(this).attr('href');
e.preventDefault();
$('#body').load(url);
});
This way every click on a link, which is a childnode of body will cause the eventhandler to fire. If you do not want to target all links, but just specific ones you can do that by adding a class to them and the selector.
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 want to be able to click on a link lower down my PHP page, it send a variable and outputs the result in a <div> tag at the top half of the page.
I've linked to latest jquery, and so far I have this in my <head>:
<script type="text/javascript">
$().ready(function() {
$("#result").load("crimes_result.php");
});
</script>
And in my <body>:
<div id="result"></div>
What I need though, is that the div to be shown and depending on the result of a variable sent by a link the user clicks lower down the page.
like crimes_result.php?id=4334 or crimes_result.php?id=54543
How can I finish my script so it does that?
NOTE: I'm useless in ajax/jquery/javascript
If I understand correctly, simply call .load() from a click event and pass it the href of the link:
HTML:
<a class="loadlink" href="crimes_result.php?id=4334">Click Me<a>
JS:
$(".loadlink").click( function(event) {
event.preventDefault();
$("#result").load($(this).attr("href"));
});
Example: http://jsfiddle.net/jtbowden/ueucL/1/