HTML index.php
<a class="cart-icon" href="cart"></a>
<div class="content"></div>
Ajax load content from load-content/cart.php
$(document).ready(function(){
$(document).on('click', '.cart-icon', function(e){
e.preventDefault();
var page = $(this).attr("href");
$('.content').load('load-content/'+page+'.php');
});
});
This code will load content from cart.php but not update a url so when i refresh the page the content in that div dissapear. I want it when i refresh page it will not dissapear and also update url.
For example:
default url: index.php and when i press an a tag it will load content from cart.php and update url to index.php/load-content/cart.php
You need a persistent storage of some kind. Anything you load into the DOM of a page is temporary.
You might simply do the same thing that you're doing here on document load:
$(document).ready(function(){
$('.content').load('load-content/'+page+'.php');
$(document).on('click', '.cart-icon', function(e){
e.preventDefault();
var page = $(this).attr("href");
$('.content').load('load-content/'+page+'.php');
});
});
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 have the page (index.php) that contain one link with id="t1" and one div id="container".
<a id="t1" title="Users" href="utenti.php">Users</a>
<div id="container">
<!--Where does the contained-->
</div>
When I click the link I get a built-in external page (utenti.php)
This is code of Ajax:
$(document).ready(function(){
$("#t1").click(function(){
//$("#container").hide();
$("#container").load($(this).attr("href"), function(){
$("#container").show();
event.preventDefault();
});
return false;
});
});
and so far all is well, but if I click a link in the page that is included (utenti.php) the page is not incorporated in the same div but is opened in a direct manner.
I tried to put in the file .JS the code Ajax, to recognize the ID of the links transforming into:
$(document).ready(function(){
$("#t1").click(function(){
//$("#container").hide();
$("#container").load($(this).attr("href"), function(){
$("#container").show();
event.preventDefault();
});
return false;
});
$("#click").click(function(){
//$("#container").hide();
$("#container").load($(this).attr("href"), function(){
$("#container").show();
event.preventDefault();
});
return false;
});
});
Where #click is id of the link contained in the page Utenti.php,but even so
I do not incorporate the page in the div.
I also tried to include directly the page with the script inside the page utenti.php but I recognize the first link (which is fine) but everyone else does!(not all other!)
If I understand correctly this system does not include actually the page as would the classic include of PHP.
He gives him also the values already included in the index is more a kind of visualization,only that I haven't understand how to pass the value of the links contained in utenti.php inside the main page index.php.
It should be
$(document).on("click","#t1",function(e){
e.preventDefault();
var href = $(this).attr("href");
$("#container").load(href);
});
If you want links on the page that is opened in the div to also be targeted to the div you can try a delegated click handler on the div itself.
$(document).ready(function () {
$("#t1").click(openLinksInDiv);
$("#container").on("click", "a", openLinksInDiv);
function openLinksInDiv(event) {
//$("#container").hide();
$("#container").load($(this).attr("href"), function () {
$("#container").show();
});
event.preventDefault();
}
});
Demo: http://jsfiddle.net/AN56C/
Or if you want all links on the page to open in that div, use:
$(document).on("click", "a", openLinksInDiv);
Noting that loading pages via Ajax won't work for any and all pages from external domains, but will work for pages from your own domain.
This whole thing seems to be the perfect case for an iframe rather than a div, in which case you could have links to external domains.
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'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.