How to load a page dynamically using Ajax & History? - javascript

I am confused with the following problems in using Ajax and History:
Specifications:
I have a page that calls another page using Ajax.
Now the loaded page has datatables which inturn uses Ajax to get data(As of now 2 ajax calls)
I have used history.js for page navigation, which uses common ajax call for loading the content in page div
Now, I face with the following problem:
For first datatable page call, I get one ajaxcall.
Surprisingly, when I navigate to another page using history and call the datatable page, the ajax call now doubles. It goes on in a linear manner.
This is a new problem I have been facing while loading a page using ajax which inturns contain Ajax call. What can be the major cause of this problem? Also, what is the solution of this problem?
My common code looks like this:
<script>
var index=function(url,update_id,state){
$.ajax({
url: url,
}).done(function(data) {
$("#"+update_id).html('');
$("#"+update_id).html(data);
if(state == 1){
history.pushState({url: url,id:update_id},"name",url);
}
});
}
jQuery(document).ready(function($) {
$(document.body).on('click','.link_click',function(){
var url = $(this).attr('href');
var update_id = $(this).attr('update_id');
index(url,update_id,1);
})
});
window.addEventListener('popstate', function(event) {
if(event.state.url != null){
index(event.state.url,event.state.id);
}
});
</script>
My link looks like this:
My Contact
I am using this common code for linking every page using Ajax and history

Are you using a framework for your project? I've noticed similar behaviour before using the Yii Framework. What I noticed is that if you create your objects with a static Id, it will cause a multiplication in the number of ajax calls.
Try giving your objects unique ids so that the events don't get clogged.

Just an idea: Does the page loaded with Ajax by any chance attach the click-event on the "link_click"-links again?

Related

Limited with JavaScript onCLick() when making AJAX call

I am working on an existing project and heavily using jQuery AJAX calls. Existing pages have three different sections header, left menu and main content. Implemented with Spring MVC it is updating whole page whenever view is returned from Spring controller.
Now since I am working with one of the menu item but having tab content I am using jQuery to manipulate data within tabs using jQuery. While doing so whenever I have to work with hyperlink I can't use <a> tag since return from link will replace whole page . So I am always limited to use onClick() even ton the link and do AJAX call then put response back in window using jQuery.
Details
<script>
$.ajax({
type: ...,
url: ...,
success: function(response) {
$('#tab1-content').empty().html(response);
}
});
</script>
So my question is - Is there any other way so that I can use href properties of <a> tag and update window with response view?
I am not sure if I understood you correctly. Could you try something like this:
Details
<script>
$('a').click(function(e) {
e.preventDefault();
var href = $(this).attr('href');
loadDetail(href);
});
function loadDetail(url) {
alert("Load from: " + url);
// Ajax call
}
</script>
Fiddle
You can prevent default behaviour of tag just return false from your function.
See this fiddle http://jsfiddle.net/s8mpwokt/
Or just like in Michael answer attach event from javascript so you'll get event instance in your callback function with preventDefault() and stopPropagation().

How to change URL path when paging using ajax + jQuery

I am using ajax post requests for doing paging on a feed in my site. When getting the post request data I am reforming the page by clearing previous data and rendering the new data that came from the request. I want to be able to change the URL as well so saving the new page link will get the user to the current page.
Example:
User on page example.com/feed - seeing content of page #1
User clicking to get to page #2 -> ajax post is send and data on the page is changed using js (no refresh)
URL is still example.com/feed but the content is of example.com/feed?page=2
How can I set the URL to point to the new page without triggering a refresh (no redirect) ?
I am using Nodejs + express.
I understand you are aiming at a single page application.
While keeping the url is nice, note you might want distinct urls for directly accessing different parts of your application. Still, you can load content with AJAX and keep a smooth application. The way to go is using the hash part of the location.
The Sammy.js framework gives you a nice base to build upon, you can try it out.
You can use history pushstate but some browsers does not support.
history.pushState({id: 'SOME ID'}, '', 'myurl.html');
And don't forget about window.onpopstate, it pops if user clicks back button.
Redirect the user to an anchor point.
Page 2
And in your document.ready:
if (window.location.hash.length > 1){
var pageNumber = window.location.hash.substring(1);
loadPage(parseInt(pageNumber));
} else{
loadPage(0);
}
I don't believe it is possible to change the query part of the URL without triggering a refresh (probably due to security issues). However you may change the anchor and use an event listener to detect when the anchor is being changed.
//Listener
$(window).on('hashchange', function() {
if(loaction.hash.length > 1) {
//The anchor has been changed.
loadPageWithAjax("example.com/feed.php?page=" + location.hash.substring(1));
} else {
//Load standard page
...
}
});
Change the anchor to load new feed
Page 2
Remember to not use an anchor that is used as an id, since this makes the browser scroll to that element.

Load content in div using javascript

Currently I am facing a problem with Jquery ajax call. The Ajax call in my jsp takes more time to load data where as javascript form submit takes less time.
Using javascript form submit i am unable to load the content form result in another tab.
Could any one help me on this
Javascript Function
function getCircuitMaintenanceDetails(event,refno)
{
var eve = event;
var ref_no = refno;
var url = "circuitMaintenanceDetails.do?EVENT_KEY="+eve+"&REF_NO="+ref_no;
document.getElementById('sessReferenceId').value=refno;
$.ajax({
type:'post',
cache:false,
url:url,
beforeSend: function ( xhr ) {
$('#content02').html('<div class="loading"><center><img src="../images/ajax-loader.gif" alt="Loading..." /><center></div>');
},
success:function(data){
window.scrollTo(0,0);
$('#content02').html(data);
}
});
}
Above javascript function loads data in another tab using ajax call. It takes more time
The jsp code has been placed in http://jsfiddle.net/mJ8m3/
I am using IE8 and Jquery 1.7.1 in my jsp file. Any one guide me how to improve the performance of Ajax call or could guide me how to load data in second tab ie (content02) tab using javascript function.
If I use document.forms[0].submit is loading the content in the same tab instead of tab2.
After Submitting the form in javascript I am unable to load the content in another tab defined using div tag
Any one can help me in this problem. Really need a solution for this. Help me to increase the speed
You can use jquery's load() method.

Passing php variables on click without refresh

The problem:
I have a series of 'accept' buttons, on click it opens a lightbox (a modal- using bootstrap), of course this is done without refreshing the page.
On the lightbox I need to show information regarding what is being accepted (therefore I need to pass a PHP variable to the lightbox). So the problem is how can I pass on a variable on click without refreshing the page? I tried using javascript, but the thing is once I set up a variable in JS I can't get that variable to PHP without refreshing the page.
The button has this code.
<button class="btn btn-acceptColor m-t-lg">Accept</button>
The other code isn't relevant for the purpose of this question. I just need the concept of how to actually do it.
Any help!?
there are many examples.
I provides some links, you can use them in your code as you suitability..
1). Ajax Tutorial
2). jQuery Ajax POST example with php
3). jQuery Ajax POST example with php
4). show data in lightbox
5). How to add jquery lightbox to content added to page via ajax?
I hope above links helpful for you
$(".btn-acceptColor").click( function (){
var person = {
name: $("#id-name").val(),
address:$("#id-address").val(),
phone:$("#id-phone").val()
}
$.ajax({
type: "POST",
url: "exaple.php",
data: person,
success: function(msg) {
var msg = $.parseJSON(msg);
if(msg.success=='yes')
{
return true;
// fill you light-box form get value from example.php page
}
else
{
alert('Server error');
return false;
}
}
});
});

redirect using javascript without flash

I trying to do the following:
I want to redirect to another page using javascript, but I want the page (that we redirect to) to fade in instead of being redirect to aggressively. How can Iget that done using jquery?
I tried the following:
$('.splash').hide();
$('.splash').fadeIn(2000,
function() {
setTimeout(
function() {
document.location.href = 'test.html';
},100)
<div class = "splash"></div>
Well you could $('html').fadeOut(); the current page you are on, then do your redirect. But that second page would have to have it's own $('html').fadeIn();
There is no way to push a jQuery execution onto a totally separate page unfortunately :/
You could try loading the page with $.load() AJAX style also.

Categories

Resources