We Keep Coding

How to access Json return value in popup in jquery

This is my Json function. Using doAjax function i access the value from controller and i gives me the value.
function doAjax(type, url, data, callback) {
$.ajax({
type: type,
url: url,
data: data,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
callback(data);
},
failure: function (errMsg) {
alert(errMsg);
}
});
}
here is my jquery code on button click. when i use debugger it have the values.
$('.btn-setting').click(function () {
var data = "";
doAjax("GET", "/Dashboard/OrderDetails/", data, function (result) {
data = result;
for (var i = 0; i < 1; i++) {
var Html = "<ul><li><span>Name</span></li><li>??Name??</li></ul><ul><li><span>AirCraft Type</span></li><li>??AirCraftType??</li></ul>;
Html = Html.replace("??Name??", data.Title + " " + data.FirstName + " " + data.LastName);
Html = Html.replace("??AirCraftType??", data.AirCraftType);
}
});
});
and here is my div and i want to show my json value in div popup.
<div class="modal hide fade" id="myModal">
<div class="modal-body">
</div>
</div>
So please help me to get the values on popup.
Thanks in advance

assuming you want to put the content inside modal-body,
using jquery:
$('.modal-body').html('html string')
using javascript:
document.getElementsByClassName('modal-body')[0].innerHTML='html string'

Try like this
success: function (data) {
$('.modal-body').dialog();
}
or you can append data

var data = [
{title:'tt', FirstName:'name first', LastName:'last name', AirCraftType:'Air Craft'},
{title:'tt1',FirstName:'name first1',LastName:'last name1',AirCraftType:'Air Craft 1'}
];
var Html = "";
$(data).each(function(i, value){
Html = Html+ here your code ;
//here you get value.title ,value.FirstName ...
});
$('div.modal-body', $('#myModal')).html(Html);

Use the open function to load your AJAX result in your dialog.
$('.btn-setting').click(function ()
$("#myModal").dialog({
title: 'Dialog Title',
autoOpen: false,
resizable: true,
height: 350,
width: '550px',
show: { effect: 'drop', direction: "up" },
modal: true,
draggable: true,
open: function (event, ui) {
$.ajax({
url: url //Your AJAX call URL,
cache: false,
context: this,
success: function (result) {
$(this).html(result);
}
});
},
close: function (event, ui) {
}
}
});
});

Browser is intermittently showing JSON when I do not want it to

I have the following jQuery function. I do not want to display the JSON data that is returned. I just want my dialog box to show a message to the user. What is strange is that sometimes I get a dialog message as desired and sometimes I get a page with the raw JSON response. What might cause such an intermittent problem?
$("#btnSubmit").click(function (event) {
event.preventDefault();
$.ajax({
url: "/Transfer/Receive?TransferID=" + $("#TransferID").val(),
dataType: "json",
type: "post",
success: function (data) {
if (data.Message == "success") {
$("#divTransferNo").dialog("destroy");
$("#systemMsg").dialog({ autoOpen: true, title: "System Message", height: 150, modal: true });
$("#systemMsg").html("<p>Transfer Received Successfully.</p>");
$('div#systemMsg').bind('dialogclose', function (event) {
window.location = "../DrawMandrel/";
});
}
else if(data.Message=="verifyreceiveback") {}
else if (data.ErrorType == "validation") {
$("#systemMsg").dialog({ autoOpen: true, title: "System Message", height: 150, modal: true });
$("#systemMsg").html("<p>ERROR - This transfer has already been received.</p>");
}
else {
$("#systemMsg").dialog({ autoOpen: true, title: "System Message", height: 150, modal: true });
$("#systemMsg").html("<p>ERROR - Check your transfer number.</p>");
}
}
});
});
UPDATE:
I just received the response below which should have called:
else {
$("#systemMsg").dialog({ autoOpen: true, title: "System Message", height: 150, modal: true });
$("#systemMsg").html("<p>ERROR - Check your transfer number.</p>");
{"Message":"ERROR: This transfer has already been completed.","ErrorType":"validation","ErrorMessage":"ERROR: This transfer has already been completed.","OperationMessage":"ERROR: This transfer has already been completed.","BarCode":null}
UPDATE:
So I changed my ajax request to:
$.ajax({
url: "/Transfer/Receive?TransferID=" + $("#TransferID").val(),
dataType: 'json',
type: 'post',
accept: {
json: 'application/json',
xml: 'application/xml'
},
success: function (data) {
And I am producing the following Request Headers:

Javascript Confirm change into jquery modal dialog

I have here a delete record via ajax. I add confirm message if I want to delete the record or not. What I need is change the confirm message into modal dialog http://jqueryui.com/dialog/#modal-confirmation.
I want to change this javascript code
if(confirm("All PR and PO in this record will be deleted. Are you want to delete?"))
into this jquery modal dialog. Any help?
<script>
$(function () {
$("#dialog-confirm").dialog({
resizable: false,
height: 140,
modal: true,
buttons: {
"Delete all items": function () {
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
}
});
});
</script>
Ajax delete
<script>
$(function () {
$(".delbutton").click(function () {
//Save the link in a variable called element
var element = $(this);
//Find the id of the link that was clicked
var del_id = element.attr("name");
//Built a url to send
var info = 'name=' + del_id;
if (confirm("All PR and PO in this record will be deleted. Are you want to delete?")) {
$.ajax({
type: "GET",
url: "delete.php",
data: info,
success: function () {}
});
$(this).parents(".record").animate({
backgroundColor: "#fbc7c7"
}, "fast")
.animate({
opacity: "hide"
}, "slow");
}
return false;
});
});
</script>

You will override confirm method of javascript in your html code as follow
<script>
function confirm(message) {
var myTitle =
"<div style='float: left'>Error</div><div style='float: right; margin-right: 15px;'>Close</div>";
$('<div id="dlgTest1" style="display: none;min-height:auto;"><p style="text-align:justify;font-family:verdana;font-weight: bold;">'+message+'</p></div>').dialog({
resizable: false,
modal: true,
width: 300,
height: 'auto',
bgiframe: false,
//position: ['top', 5],
draggable: true,
closeOnEscape: true,
minHeight:20,
buttons: [{
text: "Cancel",
"style": 'background-color:#CCCCCC !important;color:rgb(119, 119, 119);font-family:verdana',
click:function(){
$(this).dialog('close');
return false;
}
},{
text: "Ok",
"style": 'background-color:#007AC0 !important;color:white;font-family:verdana',
click:function(){
$(this).dialog('close');
}
}
],
close:function(){ $(this).dialog('destroy').remove(); }
}).siblings('.ui-dialog-titlebar').append(myTitle); // title goes here;
//$("#dlgTest1").dialog("open").dialog("moveToTop");
};
and then use it , But be careful don't use html submit button on it, Use html normal button

//try this code
<script>
var isConfirmed=false;
$(function () {
$("#dialog-confirm").dialog({
resizable: false,
height: 140,
modal: true,
buttons: {
"Delete all items": function () {
isConfirmed=true;
$(this).dialog("close");
},
Cancel: function () {
isConfirmed=false;
$(this).dialog("close");
}
}
});
$(".delbutton").click(function () {
//Save the link in a variable called element
var element = $(this);
//Find the id of the link that was clicked
var del_id = element.attr("name");
//Built a url to send
var info = 'name=' + del_id;
$("#dialog-confirm").html("All PR and PO in this record will be deleted. Are you want to delete?");
if (isConfirmed) {
$.ajax({
type: "GET",
url: "delete.php",
data: info,
success: function () {}
});
$(this).parents(".record").animate({
backgroundColor: "#fbc7c7"
}, "fast")
.animate({
opacity: "hide"
}, "slow");
}
return false;
});
});
</script>

//replace your script with this code and try
<script>
var isConfirmed=false;
$(function () {
$("#dialog-confirm").dialog({
resizable: false,
height: 140,
modal: true,
buttons: {
"Delete all items": function () {
isConfirmed=true;
$(this).dialog("close");
},
Cancel: function () {
isConfirmed=false;
$(this).dialog("close");
}
}
});
$(".delbutton").click(function () {
//Save the link in a variable called element
var element = $(this);
//Find the id of the link that was clicked
var del_id = element.attr("name");
//Built a url to send
var info = 'name=' + del_id;
$("#dialog-confirm").html("All PR and PO in this record will be deleted. Are you want to delete?");
$("#dialog-confirm").dialog();
if (isConfirmed) {
$.ajax({
type: "GET",
url: "delete.php",
data: info,
success: function () {}
});
$(this).parents(".record").animate({
backgroundColor: "#fbc7c7"
}, "fast")
.animate({
opacity: "hide"
}, "slow");
}
return false;
});
});
</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');
});
});