We Keep Coding

ASP.NET and C#: hide spinning wheel when button has finished processing

In my web form, I have a button, and when users click on it, I show a spinning wheel to signal that the request is being processed:
<td class="auto-style1"><asp:LinkButton ID="lblButton" runat="server" OnClick="doSomething">Button</asp:LinkButton></td>
<td id="load" style="display:none"> <img src="Images/usethiswheel.gif" height="30" width="30" /> </td>
To regulate the appearance of the spinning wheel, I am using the following snippet:
<script>
$(document).ready(function () {
$('#lblButton').click(function () {
$('#load').show();
setTimeout(function () { $('#load').hide() }, 40000);
});
});
</script>
However, I am using a timeout function expiring after 40 seconds. How can I make the spinning wheel disappear in the exact moment the button has finished processing?

use ajax calls to wait for response from server, you might need something like this (depends on type of calls you do to serverside) since its c#:
<script>
$(document).ready(function () {
$('#lblButton').click(function () {
$('#load').show();
$.ajax({
url: '#Url.Action("SomeMethod", "Somecontroller")',
type: 'GET',
cache: false,
success: function (data) {
$('#load').hide();
}
});
});
</script>

As Davit Mikuchadze says you could try to show the loading gif when using ajax to make
the request to the code-behind(e.g webmethod), then you could hide the gif in the ajax
success function.
But, you could also try to use ajaxtoolkit updatepanel and UpdateProgress control to
achieve your requirement.
About how to install the ajaxtookit control, you could refer to this article
https://github.com/DevExpress/AjaxControlToolkit/wiki/Step-by-Step-Installation-Guide.
The code example:
ASPX:
<asp:ScriptManager runat="server">
</asp:ScriptManager>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
<div class="modal">
<div class="center">
<img alt="" src="loader.gif" />
</div>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div align="center">
<h1>
Click the button to see the UpdateProgress!</h1>
<asp:Button ID="Button1" Text="Submit" runat="server" OnClick="Button1_Click" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
Code-behind:
protected void Button1_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(5000);
}

For this you should try as below on completion of ajax call you should hide the spinning wheel.
<script>
$(document).ready(function () {
$('#lblButton').click(function () {
$('#load').show();
$.ajax({
url: '#Url.Action("SomeMethod", "Somecontroller")',
type: 'GET',
cache: false,
success: function (data) {
$('#load').hide();
},
failure: function(response){
$('#load').hide();
},
error: function(response){
$('#load').hide();
}
});
});
</script>

Send selectedText from AutocompleteTextView Automatically - Jquery / Asp.net

I searched a lot.
So I created an autocomplete jquery for cityTextBox and get the selectedItem from this autocomplete textbox. I split selectedItem with "|" and assign to string[] lines after user select it from autocomplete view. On my code I assign lines like below( lines[0] to cityTextBox and lines[1] to postCodeTextBox);
$('#postCodeTextBox').text = $("#<%=postCodeTextBox.ClientID%>").val(lines[1].trim());
$('#cityTextBox').text = $("#<%=cityTextBox.ClientID%>").val(lines[0].trim());
});
This all works fine after my select when I click to somewhere or focus ect(events that i define in $("#cityTextBox").bind()). this happens. But I just want to send the lines[0] and lines[1] to the text boxes automatically when I select from the autocomplete list without click etc. You can see my java script code below:
$(function () {
$("#cityTextBox").autocomplete({
source: function (request, response) {
var param = { cityName: $('#cityTextBox').val() };
$.ajax({
url: "Default.aspx/GetCities",
data: JSON.stringify(param),
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
dataFilter: function (data) { return data; },
success: function (data) {
response($.map(data.d, function (item) {
return {
value: item
}
}))
},
//error: function (XMLHttpRequest, textStatus, errorThrown) {
// alert(textStatus);
//}
});
},
select: function (event, ui) {
if (ui.item) {
var parameter = { selectedItem: ui.item.value }
function process() {
entered = $('#cityTextBox').val();
lines = entered.split("|");
$(function getLines () {
$('#postCodeTextBox').text = $("#<%=postCodeTextBox.ClientID%>").val(lines[1].trim());
$('#cityTextBox').text = $("#<%=cityTextBox.ClientID%>").val(lines[0].trim());
});
}
}
$(document).ready(function () {
//$("#cityTextBox").bind('mouseout', process);
$("#cityTextBox").bind('blur focus focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup errorscroll errorkeydown ', process);
});
},
minLength: 3
});
});
I get the data from ESD table in database. And the query work properly. Here is the html code part :
<table style="margin:50px; padding:10px">
<tr>
<td colspan="2">
<asp:Label ID="countryLabel" runat="server" Text="Ülke : "></asp:Label>
</td>
<td colspan="2">
<div>
<asp:DropDownList ID="countryDropDownList" runat="server" AutoPostBack="True" OnSelectedIndexChanged="countryDropDownList_SelectedIndexChanged" TabIndex="-1">
</asp:DropDownList>
</div>
</td>
</tr>
<tr>
<td colspan="3" >
<asp:Label ID="postCodeLabel" runat="server" Text="Posta Kodu :"></asp:Label></td>
<td colspan="3">
<asp:TextBox ID="postCodeTextBox" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td colspan="3">
<asp:Label ID="cityLabel" runat="server" Text="Şehir : "></asp:Label>
</td>
<td colspan="3">
<asp:TextBox ID="cityTextBox" runat="server"></asp:TextBox>
</td>
</tr>
</table>

Load Jquery popup box when click on link tag and show the information from the ID?

I have listed some things from a database in a datalist with a link tag. Look like this on front page.
ID= 21 something click me
<HeaderTemplate>
<p class="overskrift_bestil">Ekstra varer</p>
</HeaderTemplate>
<ItemTemplate>
<td><asp:TextBox ID="TextBox_deli" runat="server" Width="15" Height="15"></asp:TextBox></td>
<td><p><%#Eval("deli_navn") %></p></td>
<td>
Show the Dialog
</td>
</ItemTemplate>
</asp:DataList>
When I click the click me link I want the popup box to show all the information on the product on ID=21. I know that I have to load some querystring when I click the html link, but I am stuck. This is what I have now:
$(document).ready(function () {
$('#contactFormContainer').hide();
$('#showdialog2').click(function () {
$("#contactFormContainer").load("bekraeft.aspx?deli_id=deli_id");
$("#contactFormContainer").fadeToggle('slow');
});
});
</script>
Hope someone could help me
/Tina

You need to do an ajax call.
<script>
$(document).ready(function () {
$('#contactFormContainer').hide();
$('#showdialog2').click(function () {
var deli_id = $('#deli_id').text(); //get deli_id from some container
$.ajax({
url: "bekraeft.aspx?deli_id=" + deli_id, //send id to aspx page
cache: false
})
.done(function(html) { //retrive html from aspx page once ajax call is completed
$("#contactFormContainer").html(html); //load html into container
$("#contactFormContainer").fadeIn('slow'); //fade container in
});
});
});
</script>

You need to change a litle bit your code:
Change showDialog2 id for a class (so you are going to attach click listener to all element with that class)
Add a data attribute to the link, storing the deli_id
aspx:
<HeaderTemplate>
<p class="overskrift_bestil">Ekstra varer</p>
</HeaderTemplate>
<ItemTemplate>
<td><asp:TextBox ID="TextBox_deli" runat="server" Width="15" Height="15"></asp:TextBox></td>
<td><p><%#Eval("deli_navn") %></p></td>
<td>
<a href="#" class="showdialog2" data-id='<%#Eval("deli_navn") %>'>Show the Dialog</a>
</td>
</ItemTemplate>
JS:
$(function () {
var clickedLink = $(this);
$('#contactFormContainer').hide();
$('.showdialog2').click(function () {
$("#contactFormContainer").load("bekraeft.aspx?deli_id=" + clickedLink.attr("data-id"));
$("#contactFormContainer").fadeToggle('slow');
});
});

Dropdownlist change function doesn't fire in Jquery dialog

I need to update my second drop down list from database according to the value selected from first drop down list in the Jquery dialog.
ASPX
<asp:UpdatePanel ID="upnl" OnLoad="upnl_Load" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div id="dv" style="display: none;" title="Tile">
<table>
<tr>
<td>Parent</td>
<td>
<asp:DropDownList ID="ddlDialog1" runat="server" /></td>
</tr>
<tr>
<td>Child</td>
<td>
<asp:DropDownList ID="ddlDialog2" runat="server" /></td>
</tr>
</table>
</div >
</ContentTemplate>
</asp:UpdatePanel>
JQuery
function ShowDialog() {
jQuery(document).ready(function () {
$("#dv").dialog({
draggable: true,
modal: true,
width: 500,
height: 400
});
});
}
jQuery(document).ready(function () {
$("#<%= ddlDialog1.ClientID %>").change(function () {
//This doesn't fire
__doPostBack('<%= upnl.ClientID %>', "DialogOnChange");
});
});
Problem here is,
How to change function doesn't fire when I select different values from first drop down list(ddlDialog1).
Any idea?

Since $("#dv").dialog(); make your document changed.
you have to bind $("#<%= ddlDialog1.ClientID %>") after the dialog opened.
$("#dv").dialog({
//...,
open: function(){
//..bind item in this dialog
},
});

This may help you.
$('#ddlDialog1').change(function(){
alert(Selected Value : + $('#ddlDialog1').val());
});​

Bind unique click event to each item in repeater (ajax/jquery)

ok so I have this repeater:
<asp:Repeater runat="server" ID="rep" >
<ItemTemplate>
<tr>
<td>
<div id="resultDiv">
click me
</div>
</td>
</tr>
</ItemTemplate>
</asp:Repeater>
and i have this jquery ajax call:
$(document).ready(function () {
$("#resultDiv").click(function () {
$.ajax({
type: "POST",
url: "Page.aspx/GetDate",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
// Replace the div's content with the page method's return.
$("#resultDiv").text(msg.d);
}
});
});
});
the problem is that this only works for the first div inside the repeater. If i click any other divs, the click event isn't being fired.
I know this is because they all have the same id, being "resultDiv".
I am now looking for a way of giving them unique ID's, which is something I can do like this: (inside the repeater itemtemplate)
<td>
<div id="resultDiv_<%#Eval("divId") %>">
click me
</div>
This gives all the divs inside the repeater a unique ID, but this way the ajax click event doesnt fire anymore because
$("#resultDiv").click(function () {
resultDiv is now something like resultDiv_1 or resultDiv_2.
so im looking for something to bind a click event to each div inside the repeater. I tried doing it like this in the ajax call:
$("#<%#Eval("divId") %>").click(function ()
but this doesn't work and gives me all kinds of errors.
Is there any way i can do this ? Please not that I do not want to use updatepanels.

If you need a live event handler, you should use on :
$("body").on('click', '#resultDiv', function(e) { });
If you want to handle all #resultDiv the same way (by using resultDiv_1 or resultDiv_2) you could use :
$("body").on('click', 'div[id^=resultDiv]', function(e) { });
You might use classes instead of ID's because they aren't unique, you could easily play with them with addClass or removeClass !
In your case, I would add the same class to each div, and pass a parameter into some data-attr (if you need to have each click to call a different task) :
<div id="resultDiv" class="result" data-some-var="some-param">
click me
</div>
And than on your event :
$("body").on('click', '.result', function(e) {
var param = $(this).attr('data-some-var');
//send or do something different according to the param
});