jquery dialog calls a server side method with button parameters - asp.net

I have a gridview control with delete asp:ImageButton for each row of the grid. What I would like is for a jquery dialog to pop up when a user clicks the delete button to ask if they are sure they want to delete it.
So far I have the dialog coming up just fine, Ive got buttons on that dialog and I can make the buttons call server side methods but its getting the dialog to know the ID of the row that the user has selected and then passing that to the server side code.
The button in the page row is currently just an 'a' tag with the id 'dialog_link'. The jquery on the page looks like this:
$("button").button();
$("#DeleteButton").click(function () {
$.ajax({
type: "POST",
url: "ManageUsers.aspx/DeleteUser",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
// Replace the div's content with the page method's return.
$("#DeleteButton").text(msg.d);
}
});
});
// Dialog
$('#dialog').dialog({
autoOpen: false,
width: 400,
modal: true,
bgiframe: true
});
// Dialog Link
$('#dialog_link').click(function () {
$('#dialog').dialog('open');
return false;
});
The dialog itself is just a set of 'div' tags.
Ive thought of lots of different ways of doing this (parameter passing, session variable etc...) but cant figure out how to get any of them working.
Any ideas are most welcome
As always, thanks in advance to those who contribute.

I've recently done something exactly the same at work - confirmation of a delete item. I solved it by using the Data http://docs.jquery.com/Data method to store the value I wanted to pass along.
So for example my delete links had the following:
Delete
Then monitor all clicks on for class "delete", when this happens set the data on the dialog:
$("#dialog").data("id", $(this).attr("id"));
Which will then be accessible when you're in your dialog.
$("#dialog-confirm").dialog({
resizable: false,
height:140,
modal: true,
buttons: {
'Delete': function() {
alert($(this).data('id'));
$(this).dialog('close');
},
Cancel: function() {
$(this).dialog('close');
}
}
});
Hope this helps, shout if it's not clear.

Related

button in ASP.NET are all post method?

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>

How to change page title dynamicly without refresh site

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.

jquery accordion effect doesnt work when I use ajax

When I use ajax, I noticed that Jquery effects don't work. The reason is "The new HTML you're adding to the DOM (page) didn't exist when your jquery ran the first time "
another similar question
Therefore, I changed my code to following but still I don't get the jquery effects.
Where I have done the mistake?
Previous code
$("#sendemp").click(function(e) {
e.preventDefault();
var submit_val = $("#searchbox").val();
//alert('submitval is ' + submit_val);
$.ajax( {
type : "POST",
//dataType :"jason",
url : "./wp-admin/admin-ajax.php",
data : {
action : 'employee_pimary_details',
user_name : submit_val
},
success : function(data) {
// alert('hhh');
$('#accordion21').html(data);
// $( "#searchbox" ).autocomplete({
// source: data
// });
}
});
});
New code
$("button").on( "click", "#accordion3",function(){
$.ajax( {
type : "POST",
dataType : "json",
url : "./wp-admin/admin-ajax.php",
data : {
action : 'employee_deatils_search',
user_name : submit_val
},
success : function(data) {
// alert('hhh');
$('#accordion3').html(data);
$("tr:odd").css("background-color", "#F8F8F8");
$("#accordion3").accordion({ heightStyle: "fill", active: 0 });
// $( "#searchbox" ).autocomplete({
// source: data
// });
}
});
} );
I have following submit button
<input type="submit" id="sendemp" value="Search" />
I don't think your click binding is correct, if you want to handle clicks on button inside #accordion3 change it to:
$("#accordion3").on( "click", "button",function(){...});
It is hard to tell without your html, but it looks like in your old code you are replacing the sendemp button. In your new code your event delegation is incorrectly specified. You are applying delegation to a button element (which doens't exist since your sendemp button is an input element).
Apply delegate to something that is the parent of #sendemp like so:
$('body').on('click', '#sendemp', function() {
// your ajax call
});
I could fix the issue, I tried the above solution that is using on method. However, it doesn't make sense to my problem.
As following artical explain I think, Accordion is already instantiated and effects are persistance. When it is called second time, it won't create again since there is already the effects.
Therefore, I needed to destroy it and recreate accordion.
support link
I changed the code on success as follows
success : function(data) {
// alert('hhh');
$('#accordion3').accordion('destroy');
$('#accordion3').html(data);
$("tr:odd").css("background-color", "#F8F8F8");
//$("#accordion3").accordion( "disable" );
$("#accordion3").accordion({ active: 0 });
}
And out of $(document).ready(function() {
I added
$(function() {
$("#accordion3").accordion({
// heightStyle: "fill",
active: 0 });
});

Jquery UI AutoComplete Sending extra dynamic parameters to ashx

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?

I want to display a circular progress indicator using jquery in asp.net when textbox textchange event occurs

I want to display a circular progress indicator using jquery in asp.net when textbox textchange event occurs. When user enters some value in a textbox and textchange event occurs or when user loses the focus on that textbox, system checks values in databases. I want to give user a progress indicator type when query is in progress.
How can I accomplish this with jquery?
Code here:
$("#Txturl").blur(function() {
$.ajax({
type: "POST",
url: "Default.aspx/Getvalue",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,
success: function(msg) {
///to to do here? i ve no idea;
}
});
return false;
});
This is relatively straightforward. You would start by creating the animated GIF for your indicator (or download a freely available one) and add it to your site. Then in your Javascript, you would add something closely resembling the following:
$('#yourTextBox').change(
function(){
$("#yourProgressImg").show();
$.ajax({
type : "get",
url : <your request uri>,
success: <what to do if it comes back happy>
fail: <what to do if it fails>
complete: function(){ $("#yourProgressImg").hide(); }
});
}
);
The complete functionality of the $.ajax() function is here: http://api.jquery.com/jQuery.ajax/
Not sure how every other site does it, but I would show an animated GIF on the textchange event and hide it in the AJAX success (or failure) function.
Have a hidden div with your animated GIF.
<style>.hidden { display: none; }</style>
<div class="hidden"><img src="spinner.gif" /></div>
Then show it on change and hide it in the success or error callback.
$('#mytextbox').change(function(){
$('#divwithGIF').show();
$.ajax({
type: 'POST',
url: 'Default.aspx/Getvalue',
data: '{}',
contentType: 'application/json; charset=utf-8',
dataType: 'json',
async: true,
complete: function(msg){
$('#divwithGIF').hide();
};
});
});
Repeat for the blur() event.
See my answer on this one: jquery submit and loading gif for an example of how you can construct a global (on the page) event monitor for ajax to display an animated gif as you describe. You can customize this as you wish for your events.

Resources