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.
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);
});
});
});
My question may sound confusing but actually it's not. Let me clear you the things. The scenario is I've following HTML code:
/*This is the hyperlink I've given for example here. Many such hyperlinks may present on a webpage representing different question ids' */
<a delhref="http://localhost/eprime/entprm/web/control/modules/questions/manage_question_issue.php?op=fixed&question_id=21679" title="Fixed" href="#fixedPopContent" class="fixed" data-q_id="21679" id="fix_21679">Fixed</a>
/*Following is the HTML code for jQuery Colorbox pop-up. This code has kept hidden initially.*/
<div class="hidden">
<div id="fixedPopContent" class="c-popup">
<h2 class="c-popup-header">Question Issue Fix</h2>
<div class="c-content">
<h3>Is question reported issue fixed?</h3>
Yes
No
</div>
</div>
</div>
Now upon clicking on this hyperlink I'm showing a pop-up(I've used jQUery Colorbox pop-up here. It's ok even if you are not familiar with this library.) On this pop-up there are two buttons Yes and No. Actually these are not buttons, these are hyperlinks but showing as a buttons using CSS. Now my issue is when user clicks on hyperlink 'Yes' the page is redirecting to the href attribute value and the page reloads.
Actually I want to get to the page mentioned in href attribute but the page should not get reload or refresh. How to achieve this? Following is the jQuery code for colorbox pop-up as well as for Yes and No buttons present on this pop-up. I've tried this much but it didn't work for me. The page is getting redirected and reloaded.
My code is as follows:
$(document).ready(function() {
$(".fixed").click(function(e) {
var action_url1 = $(this).attr('delhref');
var qid = $(this).data('q_id');
$('#fixedPop_url').attr('href', action_url1);
$(".fixed").colorbox({inline:true, width:666});
$("#fixedPop_url").click(function(event) {
event.preventDefault();
$("#fix_"+qid).hide();
$("#notfix_"+qid).show();
});
$(".c-btn").bind('click', function(){
$.colorbox.close();
});
});
});
So you need to load the page at the url but not navigate to it.
You can use .load() .
So in your case, lets say that your pop container div class is .popup, and the div where you want to load the urls content has an id say #container.
$(".popup a").on('click', function(e){
e.preventDefault();
var url = $(this).attr('delhref');
$("#container").load(url);
});
Few things to keep in mind,
This will mostly not work for urls pointing to any other domain. (Same Origin Policy)
Any content loaded with this function (.load()) shall be inserted within the container and all the incomming scripts if any shall be executed.
You can do that with history.js. Here is an example;
HTML:
Delete
Update
<div id="content"></div>
JS:
var History = window.History;
if (!History.enabled) {
return false;
}
History.Adapter.bind(window, 'statechange', function() {
var State = History.getState();
$('#content').load(State.url);
});
$('body').on('click', 'a', function(e) {
var urlPath = $(this).attr('href');
var Title = $(this).text();
History.pushState(null, Title, urlPath);
return false;
});
You can see code here: jsfiddle code
You can see demo here: jsfiddle demo
Note: Urls in example cannot be found. You need to update it according to your needs. This simply, loads content in href without refreshing your 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'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.
I have a simple jQuery click and scrollTO anchor script. I have another page, in which I link the content as index.php#home, index.php#about and so on...
How can I achieve the scrollTo effect from the external page? I'm thinking of linking the section as index.php?page=home and when the page loads, take the home variable and apply the animation.
Any other ideas?
EDIT, my code is below
$("nav a").click(function(event){
//prevent the default action for the click event
//event.preventDefault();
//get the full url - like mysitecom/index.htm#home
var full_url = this.href;
//split the url by # and get the anchor target name - home in mysitecom/index.htm#home
var parts = full_url.split("#");
var trgt = parts[1];
//get the top offset of the target anchor
var target_offset = $("#"+trgt).offset();
var target_top = target_offset.top;
//goto that anchor by setting the body scroll top to anchor top
$('html, body').animate({scrollTop:target_top}, 500);
});
I think index.php?page=home is an easy way to go.
While index.php is being generated in php test for the variable being set using
if ( !empty($_REQUEST['page']) )
Make sure to filter all user input before you use it
$sanitizedPage = htmlentities($_REQUEST['page']);
Output javascript onto your page that calls the appropriate scrollto action when the page loads
<script type="text/javascript">
window.onload = functionThatScrolls('<?php echo $sanitizedPage; ?>');
</script>
Here I assumed you have a javascript function that takes the anchor name as an argument to cause the scrollTo effect. If you are using jquery or another framework of course use their onload event handlers.