I have an index page, in wich I have jquery.js and jquery.tabs.js included.
this page load content via ajax into a . The content is a set of tabs, their contents and at the bottom of the loaded content I have a call to tabs().
in FF it only works when I load content after refreshing the index page, and if I hit the link to reload the content, it stops working. in IE it's not working at all.
These are my tabs:
<ul id="horz-tabs">
<li>tab1</li>
<li>tab2</li>
<li>tab3</li>
</ul>
then I have the containers following, and at the very end of the page loaded via ajax I have:
<script type="text/javascript"><!--
$('#horz-tabs a').tabs();
//--></script>
My ajax function loads the page properly. I am wondering how I can fix this issue. Thanks for any help or advice.
The ajax loading function is as follow
<script>
function async(target, href) {
var loading = '<div class="loading">Loading</div>';
jQuery.ajax({
url: href,
beforeSend: function() {
$(target).prepend(loading);
},
error: function() {
$(target).html("<span class='error'>Failed</span>");
},
success: function(results) {
$(target).html(results);
}
})
}
</script
Look like you are loading the tab html via ajax, that could be the problem since when your script is running the dom for the tab elements may not be existing.
So you need to have a success callback to the async load method and add execute $('#horz-tabs a').tabs(); in the load success callback.
function async(target, href) {
var loading = '<div class="loading">Loading</div>';
return jQuery.ajax({
url : href,
beforeSend : function() {
$(target).prepend(loading);
},
error : function() {
$(target).html("<span class='error'>Failed</span>");
},
success : function(results) {
$(target).html(results);
}
});
}
Then
async('some-div', 'tab-url').done(function(){
$('#horz-tabs a').tabs();
})
Related
i want to submit form which loaded via jquery without refreshing the whole page.
but this code first load form without refreshing whole page then the form loaded via jquery refreshes whole page on submission.
how to solve this problem??
$(document).ready(function() {
$("body").on("click",".down",function(e) {
e.preventDefault();
var name = $("#down").attr("name");
var vote = $("#down").val();
var voteString = 'votedown='+ vote;
$.ajax({
type: "POST",
url: 'vote.php',
data: voteString,
cache: false,
error: function() {
$('#btn-vote').html('<p>An error has occurred</p>');
},
beforeSend: function() {
$('#load').html("<img src='../images/LoaderIcon.gif' />");
},
success: function(html) {
$("#re").html(html);
}
});
The on function takes a selector as well, that way you can use it on elements loaded with ajax. You also have to bind it to an element that exists when the page loads.
$('body').on('click', 'selector of the element created', function(){
...
})
Obviously you should not use body probably but a closer parent of the loaded element.
Currently, I have a wordpress website. I want to load the whole page of the website. I am aiming to put a footer player on the website, and that will only work if the rest of the pages are loaded with AJAX.
The goal is to click on the link of for example an article, and that then the website with the article will load. Because the lay-out of the article page differ from the homepage, just loading one div is not enough (see http://newtheme.favoritefm.com).
I have tried this:
$.fn.initLinks = function() {
$("a",this).click(function() {
var url = $(this).attr("href");
// transition to loading phase ...
// Ajax post parameter tells the site lo load only the content without header/footer
$.post(href,"ajax=1",function(data) {
$("#content").html(data).initLinks();
// transition to normal phase ...
});
return false;
});
};
$(function() {
$("body").initLinks();
});
Doesn't do anything. What to do?
Use the full jQuery Ajax Method: $.post instead of $.post.
So your code should look like this:
$.fn.initLinks = function() {
$("a", this).click(function() {
var url = $(this).attr("href");
// transition to loading phase ...
// Ajax post parameter tells the site lo load only the content without header/footer
$.ajax({
url: url // your href attr..
success: function(data) {
$("#content").html($(data).filter('#content').html());
// This fills in the #content on the current page with the html in #content from
// the Request page
},
error: function() {
alert('Could not load Data!!');
}
});
return false;
});
};
$(function() {
$("body").initLinks();
});
I have a View which renders an action. For example:
<h1>Test View</h1>
#Html.Action("Intro", "Account", new { id = "5" })
However, this Action takes 10-20 seconds to load.
How can i wrap it in an ajax with a loader?
Thanks!
Just create a DIV to serve as a placeholder, then load the content on document load event into the DIV. You can also add a GIF image to show progress and hide it when the content is loaded, Here's an example of how to do it:
<h1>Test View</h1>
<div id="accountInfo"></div>
<script>
$(document).ready(function () {
$.ajax({
type: "GET",
url: '#Html.Url("Intro", "Account")',
dataType: "html",
data: { id : 5 },
success: function (content) {
$("#accountInfo").html(content);
},
error: function (e) { }
});
});
</script>
Please note I didn't test that and just wrote it from the top of my head so there might be some minor syntax errors but this gives you the main idea.
Hope it helps!
Ok, so I'm pretty new to ajax and loading content externally and would appreciate any insight to my problem.
I currently have a hidden div that is empty where the ajax content should load in after a link is clicked.
<div id="#ajax-wrap"></div>
I currently have a list of links that all have the same class and I'd like to have, when clicked, the blank div do a slide toggle and then load in the content from the page that the link was to.
Link:
Current jQuery:
$("a.home-right").click(function () {
$('#ajax-wrap').slideToggle();
});
Being as I'm new to Ajax and loading the external content, I'd like to know how to load content from the linked page that's house in the #content tag. So essentially, I'd like a .home-right link, #ajax-wrap would slide toggle, and then Ajax would pull content from the linked page (which is always going to be a different random link) and it's #content div, placing that content in #ajax-wrap.
Thanks in advance for any help folks!
You want to set the ajax for the links. Requirements:
Writing a handler for links.
We must cancel the default behaviour of browser when somebody click on a link (that redirect to the page).
Removing old data ajax recieved from server and make the #ajax-wrap fresh.
Load the remote page via ajax and set it to #ajax-wrap.
Now slide it down.
// Document Ready
$(function () {
// attaching click handler to links
$("a.home-right").click(function (e) {
// cancel the default behaviour
e.preventDefault();
// get the address of the link
var href = $(this).attr('href');
// getting the desired element for working with it later
var $wrap = $('#ajax-wrap');
$wrap
// removing old data
.html('')
// slide it up
.slideUp()
// load the remote page
.load(href + ' #content', function () {
// now slide it down
$wrap.slideDown();
});
});
});
You can simply use the ajax like this:
$("a.home-right").click(function () {
$.ajax({
type: "get",
url: "YOUR URL HERE",
success: function(data){
$('#ajax-wrap').html(data);
$('#ajax-wrap').slideToggle();
},
error: function(){
alert("An error occured");
}
});
});
try this:
$(function(){
$("a.home-right").click(function () {
$('#ajax-wrap').slideUp();
var url = $(this).attr("href")
$.ajax({
type: "get",
url: url,
success: function(msg){
$('#ajax-wrap').html(msg)
$('#ajax-wrap').slideDown();
},
error: function(){
alert("An error occured");
}
});
})
})
Use get:
// Inside click handler
$.get('url_that_returns_data')
.done(function(response){
var $response = $(response);
$('#ajax-wrap').html($response.find('#content')).slideToggle();
});
I am using the below to get the whole page when I submit a form, now the page takes time to load as it calls its CSS and JavaScript.
I need to show that data is still being loaded in that page, before anybody uses it again.
I would like to use a modal popup with loading and once the page is loaded completely I will close the popup
How canI achieve that?
$.ajax({
type: "POST",
url: $url,
data: "post=" + post,
// data: form_data,
success: function(data) {
if(data!=""){
$('body').html(data);
...
additonal data:
I have two frames in a window. in the right side frame my page has links which when clicked will post certain data in hidden fields and get the whole right side page with the changed data. now my right side page has links such as
<link rel="Stylesheet" href="abc.css" type="text/css" />
<script src="jquery-1.6.3.min.js"></script>
<link href="jquery-ui.css" rel="stylesheet" type="text/css"/>
These files take time to be retrieved form server once the page is loaded by $('body').html(data); I want these files to be loaded and then let the user do his work
Use ajaxStart and ajaxEnd to show the loading message.
$("#myjaxloader").bind("ajaxStart", function(){
$(this).show();
}).bind("ajaxStop", function(){
$(this).hide();
});
Add the message and image in myajaxloader
You can use blockUI if you want more blocking features.
Since you are applying load to the entire body element, any modal popup display prior to this will be removed ready for the new content.
Therefore, I would suggest loading your content into a variable first by using $.get():
var content;
$.get($url, "post=" + post, function(data){
content = data;
});
This means you can have a loading icon displayed during this process, then load the content into the body which will remove the loading icon:
//show modal popup here
$.get($url, "post=" + post, function(data){
var content;
content = data;
if (content!=null){
$("body").html(content);
}
});
My syntax might not be quite right as I haven't been able to test this, but it should give you an idea of the logic which would work.
$(form).on('submit', function(e) {
e.preventDefault(); // to stop the page from reloading
$.ajax({
type: "POST",
url: $url,
data: "post=" + post, //use form.serialize to send the whole form
beforeSend: function () {
$(modal).show();
}
}).done(function(data) {
if(data!=""){ $('body').html(data); }
)).always(function() {
$(modal).hide();
});
});
You need to use the onload event of the loaded frame. If both your frames are on the same domain, you can do something like this:
navigation window:
$.post(url, data).then(
function() { // success handler
window.errorTimer = setTimeout(showErrorPopup, 10);
}, function() { // error handler
showErrorPopup();
}
);
showLoadingPopup();
content window:
$(function() { // runs after everything is loaded
window.top.otherFrame.clearTimeout(window.top.otherFrame.errorTimer);
window.top.otherFrame.hideLoadingPopup.call(window.top.otherFrame);
});