Trying to load contents from an element into another element from another page, problem is in chrome it loads the entire page in to the element. See for yourself here: http://www.monsterhighshop.co.uk/gadgets-electonics
$(function(){
e.preventDefault();
/*
if uncomment the above line, html5 nonsupported browers won't change the url but will display the ajax content;
if commented, html5 nonsupported browers will reload the page to the specified link.
*/
//get the link location that was clicked
$("a[rel='sort']").click(function(e){
pageurl = $(this).attr('href')+"?rel=sort #categoryproducts-productlisting";
$('#categoryproducts-productlisting').load(pageurl);
//to change the browser URL to 'pageurl'
if(pageurl!=window.location){
window.history.pushState({path:pageurl},'',pageurl);
}
return false;
});
});
/* the below code is to override back button to get the ajax content without reload*/
$(window).bind('popstate', function() {
$.ajax({url:location.pathname+'?rel=sort',success: function(data){
$('#categoryproducts-productlisting').html(data);
}});
});
Related
I have an AJAX chat. AJAX reloads session every 750ms so it deselect text which I selected in chat. How can I solve it?
My code:
document.getElementById('content-frame').onload = msg_loading();
$(document).ready(function(e) {
$.ajaxSetup({
cache: false
});
setInterval(function() {
$('#content-frame').load('<? echo('init/conversation.php?uid='.$id.'&cid='.$u['id']); ?>');
}, 750);
});
Personally I would be reloading the data via ajax on the page that contains the chat. Like so:
Right now you have your chat box reloading from the "Main page" which I think is the problematic part. I would use ajax to call a REST API instead. This will solve your problem with the page reloading and deselecting the text because the page is not reloading, the data is being updated via ajax.
setInterval(function(){
$.ajax({
url: '/conversation-rest-api.php?uid=' + uid
})
.done(function(data){
// Use templating tool to generate html from `data`
// var content = getContentFromData(data);
$('#content-output').html(content);
});
}, 750);
I have created a Admin Panel in the header part with bootstrap , when i click on any nav bar option (ul->li->a) the whole page jerk and reload i want to load it smoothly with the hllp of ajax i.e, without page refresh.
How can i acheive that i have tried various material supplied in the net but it wont help.
I have limited knowledge in ajax.
Please help
Usually I think you've used jQuery. It's would be simplest. https://jquery.com
You'll need to have a back-end that should returns only part of your page (that needs to be loaded). Or use (not recommended) $.load
http://api.jquery.com/load/
If you have the back-end that returns part of your page:
var $container = $('#container'); // It's a block that will be used for content displaying
// Renderring content
function renderPage(response) {
// Wrapped content hidden by default
var $content = $('<div style="display: none">' + response + '</div>');
// Then clear current content
$container.find('*').remove();
// Then append our response and fade it to display
$content.appendTo($container).stop(true, true).fadeIn(300);
}
// Loading page
function loadPage(url, params) {
$.get(url, (params||{}), renderPage);
}
// Adding handler
function go(e) {
loadPage($(e).attr('href'));
return false;
}
And then in your items:
<ul>
<li>Page</li>
</ul>
I am using a rails application, in which I am trying to open a new page, all the static page, https://www.mazzey.com/ is the link, if you click on the header buttons, it opens new page with fade in and fade out effect with the header and footer without refreshing in Mozilla Firefox but in Google Chrome the header also refreshes. I also found that that header and footer refreshes in Firefox as well but it does not that unlike Google Chrome. So can I use to Ajax or any plugin to do that to avoid refresh of header and footer ?
$(function(){
var newHash = '',
$mainContent = $("#main-content");
$(".nav").delegate("a","click",function(){
window.location.hash = $(this).attr("href");
return false;
});
$(window).bind('hashchange',function(){
newHash = window.location.hash.substring(1);
if(newHash){
$mainContent.find("#guts").fadeOut('slow',function(){
$mainContent.hide().load(newHash + " #guts",function(){
$mainContent.fadeIn('slow');
});
});
}
});
$(window).trigger("hashchange");
});
This what I am using with the ba-hashchange plugin
for more information check this
css-tricks.com/video-screencasts/85-best-practices-dynamic-content/
I have a jquery to show links in a div without reloading page:
jQuery Code:
<script type="text/javascript">
$(document).ready(function() {
$("a").click(function(event) {
// Prevent default click action if javascript is enabled
event.preventDefault();
//load the content of the new page into the content of the current page
$("#content").load( $(this).attr("href") + " #content");
})
});
</script>
everything is fine and working, but this is so simple! how i can add a loading image before content loading in this code?
and second question, is there any way to show a new page link in address bar after loading?
You can use the call back function to remove the loader.
<script type="text/javascript">
$(document).ready(function() {
$("a").click(function(event) {
// Prevent default click action if javascript is enabled
event.preventDefault();
//load the content of the new page into the content of the current page
$('#loader').show(); // Show some hidden loader on the page
$("#content").load( $(this).attr("href") + " #content", function() {
$('#loader').hide(); // Hide the loader when it completely loads the given URL.
});
})
});
</script>
For your second question this should be the answer. Change the URL in the browser without loading the new page using JavaScript
I have a website that pages' contents loaded by ajax. All of my pages are seperate files actually and when I need to call a page, I just passed the link to my "pageLoader" function.
pageLoader handle with content loading and re-ignite/re-define the necessary functions like close button.
Since the actual function have ~250 lines, I did re-write a short version;
var pageLoader = function(link){
var page = $(link).attr("href").replace('#','');
if(page != lastCalledURL){
// Load the page.
$.ajax({
beforeSend: function(){ /* remove previously loaded content; */ },
success: function(data){
// remove the loaded content if user clicked to close button.
$("a.close-button").live("click", function(){
$(this).parent().fadeOut().remove();
return false;
});
// load another page if user click another page's link.
$("a.content-loader-link").live("click",function(){
pageLoader(this);
});
// handle with tabs
$("a.tabs").live("click", function(){
var index = $("a.tabs").index(this);
console.log(index);
return false;
});
}
});
lastCalledURL = page;
}
return false;
OK. If I click a link in the page, It calls pageLoader. If I click one of the links just once, pageLoader called once. If I click another link, pageLoader called twice. If I click another link again, pageLoader called third times and so on.
Same things happen for the links that bind with "live" function in the code. If I click a.tabs, it write to console twite. If I clicked another .tabs link, it write to console four times and increasing double for every click.
I don't why it happens. Please let me know if you have any idea.
You can solve it by using the bind and unbind. Like this:
$("a.tabs").unbind('click').bind("click", function(){
var index = $("a.tabs").index(this);
console.log(index);
return false;
});
But i would prefer that you attach this events in your $(document).ready function instead of everytime you make an AJAX call.
$(document).ready(function() {
// Attach your events here.
});
Those live event handlers "Attach a handler to the event for all elements which match the current selector, now and in the future." so you shouldn't need them in your ajax call.