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);
});
});
});
Related
I have the following href link
Click Here to View data
and the pop is showing on page reload, but I want to show it only on click.
$('.modal-ajax').modal();
Now the page is redirect into url. I want to show the pop up
I didnt wrote any js code. i tried this now
$('a').click( function(e) {
e.preventDefault();
$('.modal-ajax').modal();
return true;
} );
but it raises $('.modal-ajax').modal(); is not a function error
You could simply put a comment on the javascript code that trigger the modal :
// $('.modal-ajax').modal();
Then add a click event listener for the element you wish to be clicked :
$('a.modal-ajax').click(function(event) {
event.preventDefault();
$('.modal-ajax').modal();
});
Please try this
Click Here to View data
$('.modal-ajax').on('click', function() {
var url = $(this).attr('data-id');
//place this value wherever you want in modal.
$('#openModal').show();
});
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');
});
});
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.
When a link is clicked, I want to clear the php session before redirecting to the destination page.
The way I thought of doing it is by loading a php script that clears the session with ajax in the origin page and once that script has loaded, to redirect to the destination page.
Here is the code I have:
$(document).ready(function() {
$("a").click(function(){
var clearSession = "clearsession.php";
$("#content").load(clearSession,"");
});
});
<a href="destination.html">
Currently it seems to follow the link before the php script completes loading.
A few guidelines :
You can't make the link point to any other page than "destination.html"
You can't add variables to the destination page either (destination.html?clear)
Use the load callback so you can execute the redirection after you receive a response.
$(document).ready(function() {
$("a").click(function(){
var clearSession = "clearsession.php";
$("#content").load(clearSession,"",function(){
window.location = $(this).attr("href");
return false;
});
});
});
<a href="destination.html">
Why not just redirect to clearsession.php?link=destination.html, which clears the session and then re-redirects to the desired URL?
$(document).ready(function() {
$("a").click(function(){
var clearSession = "clearsession.php";
$("#content").load(clearSession,"");
return false;
});
});
With "return false;", the browser won't follow the link.