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!
Related
I am trying to make the change from jQuery to Vue.js and am having some difficulty running an Ajax Call using vueresource. Below is a sample script I am using, with both jQuery and Vuejs. Both trying to access the same ajax call. The jQuery call works, the vuejs call doesn't. The sendAjax method is being called because the first 2 alerts show - then nothing.
Edit - this is only causing an error while running the Ajax call through Wordpress. Outside of WP, it does work. Any ideas??
<!DOCTYPE html>
<html>
<head>
<title>Vue Resource</title>
<script src="https://cdn.jsdelivr.net/npm/jquery#3.2.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resource#1.5.1"></script>
</head>
<body>
<button id="jQueryAjax">Jquery AJAX</button>
<div id="myvue">
<button #click.prevent="sendAjax()">AJAX</button>
</div>
<script>
let AjaxUrl = "http://localhost:8888/mySite/wp-admin/admin-ajax.php";
const postData = { action: 'my_ajaxcall', function: 'AjaxTest' };
Vue.use(VueResource);
const ajax_app = new Vue({
el: '#myvue',
methods: {
sendAjax() {
alert("VueAjax");
alert(JSON.stringify(postData));
this.$http.post(AjaxUrl, postData).then(res => {
alert(JSON.stringify(res));
});
}
}
});
$("#jQueryAjax").click(function() {
alert("jQueryAjax");
alert(JSON.stringify(postData));
alert(AjaxUrl);
$.ajax({
type: 'POST',
url: AjaxUrl,
data: postData,
dataType: 'json',
success: function(data) {
alert(JSON.stringify(data));
},
error: function (xhr, ajaxOptions, thrownError) {
alert("Error");
}
});
});
</script>
</body>
</html>
You AJAX call probably encounters an error and you handle only the successful calls. Please extend your sendAjax function like this:
this.$http.post(AjaxUrl, postData).then(res => {
alert(JSON.stringify(res));
}, err => {
alert(err);
});
Now an error should be alerted.
BTW: It is better to use console.log() instead of alert(), it is much more readable and you won't have to confirm every alert.
After #mbuechmann pointing me to be able to see the actual error, I was able to determine that the issue I was having was actually to do with Wordpress. In order to use the Wordpress Ajax handler, you need to send an action to the REQUEST header. To do this, you need to send FormData, and without sending headers.
This code was found in this question : Custom Shortcode AJAX 400 Bad Request and enabled me to get my Fetch working with Wordpress.
var data = new FormData();
data.append( 'action', 'aj_ajax_demo' ); data.append( 'nonce', aj_ajax_demo.aj_demo_nonce );
fetch(aj_ajax_demo.ajax_url, {
method: 'POST',
body: data, }).then(response => {
if (response.ok) {
response.json().then(response => {
console.log(response);
});
} });
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.
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();
})
I am trying to update a dropdown using knockout and data retrieved via an ajax call. The ajax call is triggered by clicking on a refresh link.
The dropdown is successfully populated when the page is first rendered. However, clicking refresh results in clearing the dropdown instead of repopulating with new data.
Html:
<select data-bind="options: pages, optionsText: 'Name', optionsCaption: 'Select a page...'"></select>
<a id="refreshpage">Refresh</a>
Script:
var initialData = "[{"Id":"231271443653720","Name":"Car2"},{"Id":"439319486078105","Name":"Electronics1.2"},{"Id":"115147185289433","Name":"Product"},{"Id":"145033098963549","Name":"Product2"}]";
var viewModel = {
pages : ko.mapping.fromJS(initialData)
};
ko.applyBindings(viewModel);
$('#refreshpage').click(function() {
$.ajax({
url: "#Url.Action("GetPageList", "FbWizard")",
type: "GET",
dataType: "json",
contentType: "application/json charset=utf-8",
processData: false,
success: function(data) {
if (data.Success) {
ko.mapping.updateFromJS(data.Data);
} else {
displayErrors(form, data.Errors);
}
}
});
});
Data from ajax call:
{
"Success": true,
"Data": "[{"Id":"231271443653720","Name":"Car2"},{"Id":"439319486078105","Name":"Electronics1.2"},{"Id":"115147185289433","Name":"Product"},{"Id":"145033098963549","Name":"Product2"}]"
}
What am I doing wrong?
The problem you have is that you are not telling the mapping plugin what to target. How is it suppose to know that the data you are passing is supposed to be mapped to the pages collection.
Here is a simplified version of your code that tells the mapping what target.
BTW The initialData and ajax result were the same so you wouldn't have noticed a change if it had worked.
http://jsfiddle.net/madcapnmckay/gkLgZ/
var initialData = [{"Id":"231271443653720","Name":"Car2"},{"Id":"439319486078105","Name":"Electronics1.2"},{"Id":"115147185289433","Name":"Product"},{"Id":"145033098963549","Name":"Product2"}];
var json = [{"Id":"231271443653720","Name":"Car2"},{"Id":"439319486078105","Name":"Electronics1.2"},{"Id":"115147185289433","Name":"Product"}];
var viewModel = function() {
var self = this;
this.pages = ko.mapping.fromJS(initialData);
this.refresh = function () {
ko.mapping.fromJS(json, self.pages);
};
};
ko.applyBindings(new viewModel());
I removed the jquery click binding. Is there any reason you need to use a jquery click bind instead of a Knockout binding? It's not recommended to mix the two if possible, it dilutes the separation of concerns that KO is so good at enforcing.
Hope this helps.
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);
});