The Discover Meteor book shows how to use the sasha:spin package to show a loading spinner template (<template name="loading">) while IronRouter waits for data.
How do I use this same loading template while I'm waiting for a regular jQuery ajax call to finish?
var locationInfoByZipcode = function(zipcode, callback){
$.ajax({
url: "http://api.zippopotam.us/us/" + zipcode,
type: "GET",
beforeSend: function(){
// Render the loading template. I tried Blaze.render("loading") but I'm not using it right
}.
success: function(response){
// Stop the loading template.
},
error: function(){
callback("error");
}
});
};
Blaze.render takes a template and a parent, not a string, so it'd be Template.loading and then the parent template you want to render into. You'd probably want to destroy it in the success callback.
What might be a little bit cleaner is putting the HTTP req inside a method along with a reactive variable & calling that method on click. Then, you can keep the loading template inside an #if reactiveVarIsTrue type thing in spacebars. Just a personal preference to not use jquery ajax calls if I can help it because they're not very expressive.
I got it.
var locationInfoByZipcode = function(zipcode, callback){
var renderedView = {};
$.ajax({
url: "http://api.zippopotam.us/us/" + zipcode,
type: "GET",
beforeSend: function(){
// $('body')[0] is the DOM node object that .render() needs
renderedView = Blaze.render( Template.loading, $('body')[0] );
},
success: function(response){
// to remove the template you need to pass Blaze.remove() the returned value from the initial Blaze.render() call
Blaze.remove(renderedView);
callback(response);
},
error: function(){
callback("error");
}
});
};
Related
Are all button control has to be post method? or we can set it to get method, for example, I want to see an employee details by giving employeeId and click submit button
There is no difference between GET and POST method. They both provide url and parameters. POST method only have some advantages and some restrictions.
If your button is on form (as in classic asp.net), and there is no javascript handler for this button - only POST method can be here.
If you create jquery code (or pure javascript), that overrides default behaviour of the button, you can select what method use: POST or GET
<script>
$('#button').click(function() {
$.ajax({
url: '....',
data: { ....},
type: 'GET', //or 'POST'
success: function(res) {
//all fine
},
error: function() {
//invalid url or server error
}
};
return false; //to avoid default submit
});
</script>
In my layout page I've got this html:
<div id="ajax-loading" class="global-loading-image" runat="server">
<img src="/content/travelbill/img/small-loading-image.gif"/>
</div>
Which is a loading-symbol. I want it to show when my code is doing its business.
I've read on other threads here on Stackoverflow that if you use runat="server", you are supposed to be able to access the div in the controller. Like so:
ajax-loading.Visible = true;
EditTravelBillViewModel model = this.travelBillService.GetTravelBill(travelBillId);
model.StageOfProcess = (int)TravelBillStageOfProcessEnum.APPROVED;
this.travelBillService.Update(model, true);
ajax-loading.Visible = false;
return RedirectToAction("GetTravelBillsPerCompany");
But I get the error that the loading and the ajax do not exist in the current context. What am I doing wrong?
That was in the old ASP.NET pages. In ASP MVC you don't have a ViewState, isPostBack or runat="server" you can pass variables from the controller to the view using ViewBag and ViewData like:
Controller:
ViewBag.Name = "My Name";
ViewData["Name"] = "My Name";
View:
#ViewBag.Name
#ViewData["Name"]
I don't think you need to do that. You can have a action that do the task that you need to get done and with JavaScript request that action via AJAX. You can then with JavaScript show and hide the loading as you wish:
function LoadAjax(containerId, url, params){
//Set loading in container
$(containerId).html('<img src="loading.gif" alt="loading"/>');
//Do the request
$.ajax({
type: 'POST',
dataType: "html",
url: url,
data: params,
success: function(data){
// show response inside container (removes loading)
$(containerId).html(data);
},
error: function( jqXHR, textStatus, errorThrown){
// show error inside container (removes loading)
$(containerId).html(textStatus);
}
});
}
While the page is loading it will display the loading image. You will need Jquery to use my code. Hope it helps.
i wanna have a Faceook-Feature in my website: Everytime a user gets a Private Message, the title should be change in something like "[1 PM] TITLE",
How to do that?
I know its easy to change the page-title, the question is how to run a database query every 10 seconds (or is that to often?) and change the title - Without an user interaction (ajax?)
You can use jquery setInterval to make a AJAX request after a certain interval to get data from the db.
$(function(){
setInterval(function() {
$.ajax({
url: "page.html",
success: {
document.title ='new title';
},
error: function(){
//error occurred
}
});
}, 2000);
});
And on AJAX success you can change the page title.
Dont know what's wrong with the following jquery.I can't get to grab the the variable 'ltable' with 'GET' in my PHP script which is in a div #dispsome in the same page.
var text = $('#ltable option:selected').val();
$.get('searchnsendmail2.php', {ltable:text}, function(data) {alert(ltable);
$('#dispsome').fadeIn('fast');
$('#sall').fadeOut('fast');
});
Just to make the question clearer, I need to use the value of Text in a PHP mysql query in #dispsome. I am trying to capture it with $_GET['ltable']. But doesnt work ! The alert is showing [Object HtmlSelectElement] and not the value of ltable/text
use $.ajax my example:
$("#edit_client").submit(function(){
var data = $(this).serialize();
$.ajax({
type:"POST",
url:"./../ajax/ajax.php",
data: data,
success: function(response){
$("td#output").html(response);
}
});
event.preventDefault();
});
It works.
I am trying to pass extra parameters through to my ashx when using Jquery UI auto complete.
I have seen lots of examples and have spent ages fiddling but I can't get mine to work.
I have two auto complete textboxes, what ever is entered in the first one needs to narrow down the search for the second one.
On my first autocomplete textbox all works fine and the ID that is returned is set to a hidden field.
$("#<%=txtSearch1.ClientID%>").autocomplete('/Search1.ashx');
$('#<%=txtSearch1.ClientID%>').result(function (event, data, formatted)
{
if (data) {
var id = data[1];
$("#<%=hdnSearched1.ClientID%>").val(id);
}
});
I want to use the value of the hidden field along with the value the user enters into the second textbox to do the search for the second auto complete
I first tried this:
$("#<%=txtSearch2.ClientID%>").autocomplete('/Search2.ashx',{
extraParams: { "Id": $("#<%=hdnSearched1.ClientID%>").val() }});
This fired my ashx but the Id in the extraparams was blank. A bit of googling told me this was because it was set when the page loaded so the value for the extra param was set before I set the value of the hidden field.
I did a bit more fiddling and searching and came up with something like this which a lot of people seem to be using.
$('#<%=this.txtSearch2.ClientID %>').autocomplete({
source: function (request, response)
{
$.ajax({
url: '/Search2.ashx',
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
data: {
term: request.term,
sId: $("#<%=hdnSearched1.ClientID%>").val()
},
success: function (data)
{
response(data);
},
error: function (XMLHttpRequest, textStatus, errorThrown)
{
alert(textStatus);
}
});
}
});
The problem is this doesn't even fire the ashx! I have been fiddling about with this for ages, following example after example but I can't seem to work what I am doing wrong!
I'm sure it must be obvious!
Can anyone help?