Update another control after successful jeditable submit - asp.net-mvc

I am using jEditable to update a value on my MVC model and back to the database successfully. The updated value appears on the webpage which is exactly what I want. I also want to update another control on the page (as it is a calculated value using the updated field). What is the best way to do this? Is there a hook into a successful jEditable update that I can add some jQuery into to refresh the other control?
My jEditable call :
$(function () {
$(".editable_textarea").editable("#Url.Action("UpdateSharePrice","Home")", {
indicator: "<span style='color:#FF0000;'>Saving...</span>",
type: 'text',
submitdata: { _method: "put" },
select: true,
submit: 'OK',
cancel: 'X',
width: '40',
cssclass: "editable",
tooltip: 'click to edit...',
onblur: "submit"
});
});
Thanks
Colin.

Well, I figured it out in the end
You can use the JEditable callback method to get the parameters used to call the controller method:
$(function () {
$(".editable_textarea").editable("#Url.Action("UpdateSharePrice","Home")", {
indicator: "<span style='color:#FF0000;'>Saving...</span>",
type: 'text',
select: true,
submit: 'OK',
cancel: 'X',
width: '40',
cssclass: "editable",
tooltip: 'click to edit...',
onblur: "submit",
callback: function(value, settings)
{
var fundId = this.id;
$.ajax({
url: '#Url.Action("GetMarketValue", "Home")',
type: 'POST',
data: { id : fundId },
success: function (data) {
$('#marketValueDiv_' + fundId).html(data);
}
});
}
});
});
This parameter can then be used to do an ajax post to another action method that returns the calculated field from the model:
public ActionResult GetMarketValue(int id)
{
if (ModelState.IsValid && id > 0)
{
BaseFund targetFund = _context.Funds.Find(id);
return PartialView("GetMarketValue", targetFund);
}
else
{
return PartialView("0.00");
}
}
The success callback on the ajax call is then used to update the appropriate div html content

Related

Turbolink - Fullcalendar only showing on reload

I have fullcalendar calendar that does not show unless I use turbolinks. But I would like not to use turbolink. Is there another way of loading the calendar.
My calendar.js looks like:
var initialize_calendar;
initialize_calendar = function() {
$('.calendar').each(function(){
var calendar = $(this);
calendar.fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
lang: "en",
selectable: true,
selectHelper: true,
editable: true,
eventLimit: true,
events: '/events.json',
select: function(start, end) {
$.getScript('/events/new', function() {
$('#event_date_range').val(moment(start).format("MM/DD/YYYY HH:mm") + ' - ' + moment(end).format("MM/DD/YYYY HH:mm"));
date_range_picker();
$('.start_hidden').val(moment(start).format('YYYY-MM-DD HH:mm'));
$('.end_hidden').val(moment(end).format('YYYY-MM-DD HH:mm'));
});
calendar.fullCalendar('unselect');
},
eventDrop: function(event, delta, revertFunc) {
event_data = {
event: {
id: event.id,
start: event.start.format(),
end: event.end.format()
}
};
// noinspection Annotator
$.ajax({
url: event.update_url,
data: event_data,
type: 'PATCH'
});
},
eventClick: function(event, jsEvent, view) {
// noinspection Annotator
$.getScript(event.show_url, function() {
$('#event_date_range').val(moment(event.start).format("MM/DD/YYYY HH:mm") + ' - ' + moment(event.end).format("MM/DD/YYYY HH:mm"));
date_range_picker();
$('.start_hidden').val(moment(event.start).format('YYYY-MM-DD HH:mm'));
$('.end_hidden').val(moment(event.end).format('YYYY-MM-DD HH:mm'));
});
}
});
})
};
(I remove the following at the bottom because i am removing turbolinks from the app: $(document).on('turbolinks:load', initialize_calendar);
)
In my index.html.erb, i have :
<div class="homepage_box_top_dashboard">
<div class='calendar' id="calendar"></div>
</div>
Any help please?
You still need to have something trigger your initialize_calendar() function to fire.
This was getting triggered by TurboLinks. Now you need something else to trigger it.
In plain speak:
$(document).on('turbolinks:load', initialize_calendar);
means: "when the turbolinks:load event fires, call initialize_calendar"
Right now you are just telling the browser that initialize_calendar exists, but you're never turning it on.
You should be able to use this:
// Jquery
$(document).on('ready', initialize_calendar());
-or-
// JQuery shorthand
$(document).ready(initialize_calendar());
which means "when the document:ready event fires, call initialize_calendar"
-or-
// pure Javascript
document.addEventListener('DOMContentLoaded', function() {
initialize_calendar();
});
which means "when the DOMContentLoaded event fires, call initialize_calendar"
You always have to tell JavaScript when to do something. It doesn't have to be when the page loads.
For example, you could assign this action to a button:
$('#initialize_calendar_button').on('click', initialize_calendar);
Hope that helps.

Jquery dialog close funcationality

I am having a Jquery dialog with two buttons Add and Cancel. User will input few fields and on pressing Add button, I am doing UI modifications and validations. After all the operations are done, I am closing the dialog. But issue is, even though I am closing the dialog after save and other operations, but the dialog is getting closed before the operations gets completed.
Below is my Jquery dialog code,
dlg.dialog({
height:300,
width:600,
modal:true,
autoOpen:true,
title: "Add Property",
closeOnEscape:true,
buttons: {
"Cancel": function() {
$(this).dialog("close");
},
"Create Property": function() {
//Validate Property
// Save Property
$(this).dialog("close");
}
}
}
});
function save() {
$.ajax({
type: 'POST',
url: ServiceUrl,
data: parameter,
success : function(data) {
// Convert the response text to JSON format
var jsonData = eval('(' + data + ')');
if (jsonData.results) {
// success
}
}
});
};
In above code I am executing $(this).dialog("close"); after validate and save function but my dialog is getting closed , before these function finishes. This behavior doesn't happen if I execute line by line by keeping breakpoints in firebug. Please help in resolving and help me in understanding. Thanks in advance.
Since the .ajax() call(s) are asynchronous, the $(this).dialog("close"); does not wait for the .ajax() call to finish. Put the dlg.dialog("close"); inside the success of the .ajax() call after you see that the save/validations were successful.
dlg.dialog({
height:300,
width:600,
modal:true,
autoOpen:true,
title: "Add Property",
closeOnEscape:true,
buttons: {
"Cancel": function() {
$(this).dialog("close");
},
"Create Property": function() {
//Validate Property
// Save Property
$.ajax({
success: function (response) {
//test to see if the response is successful...then
dlg.dialog("close");
},
error: function (xhr, status, error) {
//code for error condition - not sure if $(this).dialog("close"); would be here.
}
})
}
}
}
});
Your logic should look something like:
dlg.dialog({
height:300,
width:600,
modal:true,
autoOpen:true,
title: "Add Property",
closeOnEscape:true,
buttons: {
"Cancel": function() {
$(this).dialog("close");
},
"Create Property": function() {
$.ajax({//Validate request
...
success:function(response){
$.ajax({//Save request
...
success:function(response){
//close the dialog here
}
});
}
});
}
}
}
});
Either you can chain your ajax calls like this, or you can make them asynchronous by passing an async:false option.
I understand the need for a global "save" function, as it eliminates the need to write the same script over and over again.
Try doing something like this:
dlg.dialog({
height: 300,
width: 600,
modal: true,
autoOpen: true,
title: "Add Property",
closeOnEscape: true,
buttons: {
"Cancel": function () {
$(this).dialog("close");
},
"Create Property": function () {
save(true); //!!!
}
}
});
And then:
function save() {
$.ajax({
type: 'POST',
url: ServiceUrl,
data: parameter,
success: function (data) {
// Convert the response text to JSON format
var jsonData = eval('(' + data + ')');
if (jsonData.results) {
//!!!! Then close the dialog
dlg.dialog("close") //!!!!
}
}
});
}
This way, your close function is not called until the AJAX response is received.
EDIT: I would also set the dlg variable and the save() function-name as globals by attaching them to the window object like so:
window.dlg = $("#myDialogElement");
window.save = function () {
//function stuff here
}
This will ensure they're always available.

mvc jquery passing form values after user presses "Accept" button

So I have a form and a submit button that posts the form to an action. But I wanted to show a popup where the user can deny or accept an agreement.
Here's my jquery
$(document).ready((function () {
var dialog = $('#confirmation-dialog').dialog({
autoOpen: false, width: 500, height: 600, resizable: false, modal: true,
buttons: {
"Accept": function () {
$(this).dialog('close');
$.ajax({
type: 'POST',
data: {__RequestVerificationToken: $("input[name=__RequestVerificationToken]").val()}
});
},
"Cancel": function () {
$(this).dialog('close');
}
}
});
$('#registration-submit').click(function (e) {
var action = $(this.form);
console.log(action);
var form = $('form');
dialog.dialog("open");
return false;
});
}));
My problem with this is that it would post, but it would only send my AntiforgeryToken, and not the values of the form. But when it goes through the TryupdateModel it would go through for some reason but will not Save (cuz of the missing data that wasn't passed on the formcollection).
You are not sending the data of the form... You are only sending __RequestVerificationToken: in your ajax request.
Maybe try:
$(this).dialog('close');
var dataObj = $('form').serialize();
dataObj.__RequestVerificationToken = $("input[name=__RequestVerificationToken]").val();
$.ajax({
type: 'POST',
data: dataObj
});
This way, you add to data the values in the form inputs and then add your token to it.

reopen jquery ui dialog, empty and refresh

This jquery ui dialog is filled with html and form values from an ajax call (works). I want to close or submit it and then reopen and reuse it just the same. I can close and reopen fine but it has the old values still there and then the new ones are added. It keeps adding the html values after each close and reopen. There are many questions about this on SO but I don't see a clear answer. I have tried close, empty, destroy but the combination isn't working the way I need it. Any ideas?
$("#StoreForm").dialog({
autoOpen:false,
width:500,
height:900,
modal:true,
buttons: {
OK: function() {
$('#StoreForm').dialog('close');
$(this).dialog('hide');
$(this).dialog('empty');
},
'Save': function() {
$(this).dialog('empty');
}
}
});
//additional code to click and open the dialog
$(".sel").unbind('click');
$(".sel").on("click", function(e){
e.preventDefault();
$("#StoreForm").dialog('open');
var valueSelected = $(this).closest('tr').children('td.item').text();
$.ajax({
url: 'query/categories.cfc',
dataType: 'json',
cache: false,
data: {method: 'getProductInfo',
queryFormat: 'column',
returnFormat: 'JSON',
productID: valueSelected
},
success: function(response, status, options){
$("#PROD_SUPER_ID").val(response.DATA.PROD_SUPER_ID[0]);
$("#color").val(response.DATA.COLOR_ATTRIB);
$("#SIZE_ATTRIB").val(response.DATA.SIZE_ATTRIB);
$("#price").val(response.DATA.PRICE);
var w = [];
w.push("<p>", response.DATA.ICON[0], "</p>", "<p>",
response.DATA.FULL_DESCRIPTION [0], "</p>")
$("#StoreForm").prepend(w.join(""));
What I found was you can close the dialog and empty the html and it will clear this type of dialog set-up. For reopening I nested the 2nd ajax call in the success response of the initial one..
//set up dialog with options
$("#StoreForm").dialog({
autoOpen: false,
width: 500,
height: 500,
modal: true,
buttons: {
Cancel: function(){
$('#StoreForm').dialog('close');
$('#StoreForm').html("");
},
//pop-up individual items
"Add to Cart": function(){
$.ajax({
url: $("#storeCart").attr('action'),
data: $("#storeCart").serializeArray(),
type: 'POST',
success: function(response){
var name = $( "#name" ),
email = $( "#email" ),
password = $( "#password" ),
allFields = $( [] ).add( name ).add( email ).add( password ),
tips = $( ".validateTips" );
if you have any questions please respond. Thanks

Using zClip on click event of a jQuery UI Dialog button

I want to use a jQuery zClip plugin in jQuery UI dialog button, but I don't know how to adapt in this case. Anyone can help me?
Thank you in advance!
$.ajax({
url: '/music/lyrics/' + hash,
success: function (data) {
data = jQuery.parseJSON(data);
$('#dialog-modal').html(data.lyrics);
$('#dialog:ui-dialog').dialog('destroy');
$('#dialog-modal').dialog({
modal: true,
resizable: false,
title: 'Lyric: ' + data.song,
width: 500,
height: 400,
buttons: {
'Copy' : function () {
// use zClip to copy $('#dialog-modal').text() here
}
}
});
},
error: function (msg) {
alert(msg);
}
});
I would ignore the normal way dialog buttons handle actions, and separately use the way zClip handles actions. Something like this:
$.ajax({
url: '/music/lyrics/' + hash,
success: function (data) {
data = jQuery.parseJSON(data);
$('#dialog-modal').html(data.lyrics);
$('#dialog:ui-dialog').dialog('destroy');
$('#dialog-modal').dialog({
modal: true,
resizable: false,
title: 'Lyric: ' + data.song,
width: 500,
height: 400,
buttons: {
'Copy' : function () { return true; }
}
});
$('#dialog-modal ui-button:contains(Copy)').zclip({
path:'../whatever/ZeroClipboard.swf',
copy:$('#dialog-modal').text()
});
},
error: function (msg) {
alert(msg);
}
});
Assuming you are using jQuery 1.8+, you can specifiy your buttons in a different way to add IDs to them:
$("#mydialog").dialog({
...
buttons : [{
text: "Close",
click: function() {
$(this).dialog("close");
}
},{
text: "Copy to clipboard",
id: "copyButton", // here is your ID
click : function() {
alert("Sorry, copy not supported in your browser, please copy manually.");
}
}]
...
});
//after .dialog("open");
$("#copyButton").zclip({
...
clickAfter: false // dont propagate click: will suppress unsupported warning
...
});
The only issue I have is that it seem you can only mount zclip on visible buttons, so I do the zclip() call inside the handler for the button that opens the dialog

Resources