We Keep Coding

Passing data from jQueryUI dialog form to controller

I'm new with ASP.NET/Javascript and I'm having a little trouble with the implementation of simple CRUD operations using jQueryUI dialog form. This is my code:
<button class="update" id="#Model.id">Update</button>
<div id="dialog-form" title="Update">
<form>
<fieldset>
<input type="text" name="state" id="state">
<input type="text" name="note" id="note">
<input type="submit">
</fieldset>
</form>
</div>
<script>
$(function() {
var dialog,
state = $("#state"),
note = $("#note"),
id = this.id, //??
dialog = $("#dialog-form").dialog({
autoOpen: false,
height: 400,
width: 350,
modal: true,
buttons: {
"Ok": function() {
$.ajax({
type: "POST",
url: "#Url.Action("Update","Ticket")",
data: {
id: id,
state: state,
note: note
},
cache: false,
dataType: "json",
success: function(data) {
$("#dialog").dialog("close");
}
});
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
$(".update").button().on("click", function() {
dialog.dialog("open");
});
});
</script>
Finally the Update action in TicketController:
public ActionResult Update(String id, String state, String note)
{
//do some stuff
}
However nothing happens and it doesn't get into the action. Any help is greatly appreciated

change your data as below you need to pass value rather than the object by using .val()
state = $("#state").val(),
note = $("#note").val(),
id = "Pass anything you wants"
data: { 'id':id,'state':state,'note':note },
Decorate your action method with [HttpPost]
[HttpPost]
public ActionResult Update(String id, String state, String note)
{
}

Jquery-Ui Dialog form for each button in a dynamic table

I am generating an HTML table with a button for each row which have to open a Jquery ui dialog form.
//The table
<table class="table table-reporting table-condensed table-striped" id="tableoperator">
<tbody>
#for (int h = 0; h < Model.ToList().Count; h++)
{
<tr>
<td class="hidden-phone hidden-tablet">
<button class="update" id="#Model.ElementAt(h).id">Update</button>
</td>
</tr>
}
</tbody>
</table>
//The dialog form
<div id="dialog-form" title="Update Ticket" >
<form>
<fieldset>
<label for="state">State</label>
<input type="text" name="state" id="state" class="text ui-widget-content ui-corner-all">
<label for="note">Note</label>
<input type="text" name="note" id="note" class="text ui-widget-content ui-corner-all">
<input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
</fieldset>
</form>
<script>
$(function () {
var dialog,
state = $("#state").val(),
note = $("#note").val(),
id = id of button Update??
dialog = $("#dialog-form").dialog({
autoOpen: false,
height: 400,
width: 350,
modal: true,
buttons: {
"Ok": function () {
$.ajax({
type: "POST",
url: "#Url.Action("Update","Ticket")",
data: { 'id': id, 'state': state, 'note': note },
cache: false,
dataType: "json",
success: function (data) {
$(this).dialog("close");
}
});
},
"Cancel": function () {
$(this).dialog("close");
}}
});
$(".update").button().on("click", function () {
dialog.dialog("open");
});
});
</script>
But the problem is that in the action Update of TicketController the parameters state and node are empty. What can I do? And How can I set id = id of button Update?
//////// Edit: this is the correct code (as suggested by #Igor)
<script>
$(function () {
var state = $("#state").val(),
note = $("#note").val(),
dialog = $("#dialog-form").dialog({
autoOpen: false,
height: 400,
width: 350,
modal: true,
buttons: {
"Ok": function () {
$.ajax({
type: "POST",
url: "#Url.Action("Update","Ticket")",
data: { 'id': $(this).data("idt"), 'state': $("#note").val(), 'note': $("#note").val() },
cache: false,
dataType: "json",
success: function (data) {
$(this).dialog("close");
}
});
},
"Cancel": function () {
$(this).dialog("close");
}}
});
$(".update").button().on("click", function () {
dialog.data("idt", this.id);
dialog.dialog("open");
});
});
</script>

1.Store id of the clicked button in the dialog data property before you open the dialog.
2.Retrieve values to be sent inside the "Ok" click.
"Ok": function () {
var id = dialog.data("buttonid");
var state = $("#state").val();
var note = $("#note").val();
$.ajax({
...
$(".update").button().on("click", function () {
dialog.data("buttonid", this.id);
dialog.dialog("open");
});

jquery dialog add button after ajax call

I have a dialog window that has some confirmation stuff in it as the result of a form submit:
$('#newUserDialog').dialog({
autoOpen: false,
width: 600,
modal: true,
resizable: false,
close: function() {
window.location.reload(true);
},
buttons: {
"Complete": function() {
$.ajax({
type: "POST",
url: "checkData.php",
data: formData+"&complete=1",
success: function(result){
alert(result);
$('#newUserDialog').html('User has been built');
}
});
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
when the user clicks complete, it fires off the ajax call and does checkdata.php stuff. when that is complete I want to remove "Complete" and "Cancel" and add a button "Continue". The continue button will reload the page. how can i accomplish this?
currently in this code, it works as desired but if the user doesn't like what he sees in confirmation window before he clicks Complete, if he clicks cancel, it reloads page. I only want to reload page after the ajax call.

You can use following for adding new button in ajax callback;
var buttonSet = $('#newUserDialog').parent().find('.ui-dialog-buttonset');
var newButton = $('<button>Continue</button>');
newButton.button().click(function () {
window.location.reload(true);
});
buttonSet.html(newButton);
You can see demo here: jsfiddle

<script>
var myModalExample;
$(function() {
myModalExample = $( "#newUserDialog" ).dialog({
autoOpen: true,
width: 600,
modal: true,
resizable: false,
close: function() {
window.location.reload(true);
},
buttons: {
"Complete": function() {
$.ajax({
type: "POST",
url: "checkData.php",
data: formData+"&complete=1",
success: function(result){
myModalExample.dialog({ buttons: [ { text: "Continue", click: function() { $( this ).dialog( "close" ); } } ] });
}
});
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
});
</script>

Popup window opens once after close unless refresh

I have a problem that I'm stuck with. I have MVC 3 application and in this application I have the concepts of Survey and Training. Each Training having 1 Survey. To let the users take Survey I open a pop-up page when the HTML actionlink clicked. Below is the code for this in DetailsSurvey.cshtml:
<tr> <td class="view_detail_label">
Eğitim Adı
</td>
<td>
#Html.ActionLink(
training.Name.Name,
"AddSurvey",
new {
employeeId = Model.Id,
trainingId = training.Id
},
new {
#class = "addSurvey"
}
)
<div class="result" style="display:none;"></div>
</td>
</tr>
Then in javascript side I have following functions to open popup:
$(document).ready(function () {
$('.addSurvey').click(function () {
$.ajax({
url: this.href,
type: 'GET',
cache: false,
context: this,
success: function (result) {
$(this).next('.result').html(result).dialog({
autoOpen: true,
title: 'Anket',
width: 500,
height: 'auto',
modal: true
}); //end of dialog
} //enf of success function
}); //end of ajax call
return false;
});
});
$(document).delegate('.addSurvey', 'click', function () {
$.ajax({
url: this.href,
type: 'GET',
cache: false,
context: this,
success: function (result) {
$(this).next('.result').html(result).dialog({
autoOpen: false,
title: 'Anket',
width: 500,
height: 'auto',
modal: true
}); //end of dialog
} //enf of success function
}); //end of ajax call
});
There can be 1 or more Survey links. What happens is when I click the button, pop up windows opens for the first time but when I close the popup window and try to reopen it, it does not open at all. If i open it in new tab or window it opens respectively. I used delegate subscribe the event but it does not work. Is this caused by the action taken by close button, it somehow loses the functionality after closing. Are there are any fixes?

<tr> <td class="view_detail_label">
Eğitim Adı
</td>
<td>
#Html.ActionLink(
training.Name.Name,
"AddSurvey",
new {
employeeId = Model.Id,
trainingId = training.Id
},
new {
#class = "addSurvey"
#onclick="javascript:OpenSurveyPopup();"
}
)
<div class="result" style="display:none;"></div>
</td>
</tr>
<script type="text/javascript">
function OpenSurveyPopup()
{
$.ajax({
url: this.href,
type: 'GET',
cache: false,
context: this,
success: function (result) {
$(this).next('.result').html(result).dialog({
autoOpen: true,
title: 'Anket',
width: 500,
height: 'auto',
modal: true
}); //end of dialog
} //enf of success function
}); //end of ajax call
return false;
});
}
</script>
Also remove $(document).ready() and $(document).delegate().
This will work. Thanks.

I solved problem using the following live function, what i did is: In close action of popup I called my controller and re render the page now it works like a charm.
$('a.addSurvey').live('click', function (e) {
var $this = $(this);
e.preventDefault();
$.ajax({
url: this.href,
type: 'GET',
cache: false,
context: this,
success: function (result) {
$(this).next('.result').html(result).dialog({
autoOpen: true,
title: 'Anket',
width: 500,
height: 'auto',
modal: true,
close: function () { console.log("onClose"); $('.surveyTable').load('Home/DetailsSurvey', {id:#Model.Id}); }
}); //end of dialog
console.log($(this).next('.result'));
}, //enf of success function
complete: function () {
console.log("Complete");
},
error: function () {
console.log("Error");
}
}); //end of ajax call
}); //end of live

error from dialog when using jquery and ajax

I get a an alert: Object XMLHttpRequest. This happens when I click Add Recipient on my dialog. The code below POSts the new values to the database. It opens a dialog or form and the action of the form is to add or insert a new value to the database. I pasted the code below because I think thats likely the source of the error.
Below is the javascript for my code:
$(function () {
$('#dialog-form-add').dialog({
autoOpen: false,
modal: true,
height: 425,
width: 475,
buttons: {
'Add Recipient': function () {
$.ajax({
type: "POST",
url: $("#add-recipient-form").attr('action'),
data: $("#add-recipient-form").serialize(),
dataType: "text/plain",
success: function (response) {
$('#dialog-form-add').dialog('close');
$("#grid").load('/Default/ #grid', function () {
$('tbody > tr:first')
.effect("highlight", {}, 2000);
});
},
error: function (response) {
alert(response);
$('#dialog-form').dialog('close');
}
});
},
Cancel: function () {
$('#dialog-form-add').dialog('close');
}
}
});
$('#requestdate').datepicker({ dateFormat: 'yy-mm-dd' });
$('#add-recipient')
.button().click(function () {
$('#dialog-form-add').dialog('open');
});
});