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');
});
});
Related
I am working on MVC 4 and trying to load a partial view in an iframe using $.ajax call like this :
$(document).ready(function () {
$("#btnInsert").click(
function(e) {
e.preventDefault();
var loc = window.location.href;
loc = (loc.substr(loc.length - 1, 1) == "/") ? loc + "Home" : loc;
console.log(loc + "/Insert");
$.ajax({
type: "GET",
url: loc+ "/Insert",
success: function (msg) {
console.log(msg);
//$('FrameforPopUp.html').html(msg);
//$("#ShowNextView").css(
$("#ShowNextView").html(msg);
//$("ShowNextView").src
showView(msg);
$("#ShowNextView").attr("disabled", "enabled");
//if (msg.d)
// showView(msg.d);
//else
// alert("Data is invalid")
},
error: function () {
alert("An unexpected error has occurred during processing.");
}
});
});
function showView(resultView) {
$("#ShowNextView").dialog({ //resultView
modal: true,
width: "auto",
height: "auto",
position: "center",
resizable: false,
closeOnEscape: true,
open: function (ev, ui) {
}
});
}
and my frame is as follows :
<iframe id="ShowNextView" style="visibility:hidden;">
but it is not showing iframe with a pop up..
I want that iframe to load the "Insert" view and show it in pop up after the ajax call on the btnInsert click. Please help?
This is how you can write HTML content into iframe.
$("#btnInsert").click(function (e) {
// ...
$.ajax({
type: "GET",
url: loc + "/Insert",
success: function (msg) {
showView(msg);
},
error: function () {
alert("An unexpected error has occurred during processing.");
}
});
});
function showView(resultView) {
$('<div>').append('<iframe id="ShowNextView"></iframe>').dialog({
modal: true,
width: "auto",
height: "auto",
position: "center",
resizable: false,
closeOnEscape: true,
open: function (ev, ui) {
$(this).find('#ShowNextView').contents().find('body').html(resultView);
}
});
}
And also remove <iframe id="ShowNextView" style="visibility:hidden;"> from HTML.
Demo: http://jsfiddle.net/ssqxyvjc/
I have the following js code:
$("#add_station").on('click', function () {
$(this).closest('form').submit(function () {
alert("working!");
$.ajax({
url: advoke.base_url + "/new-vendor-user/station/ajax",
method: 'post',
processData: false,
contentType: false,
cache: false,
dataType: 'json',
data: new FormData(this),
beforeSend: function () {
$('.info').hide().find('ul').empty();
$('.success_message').hide().find('ul').empty();
$('.db_error').hide().find('ul').empty();
},
success: function (data) {
if (!data.success) {
$.each(data.error, function (index, val) {
$('.info').find('ul').append('<li>' + val + '</li>');
});
$('.info').slideDown();
setTimeout(function () {
$(".info").hide();
}, 5000);
} else {
$('.success_message').slideDown();
$('#add_station').remove();
$("#station").append(data.new_station);
setTimeout(function () {
$(".success_message").hide();
}, 5000);
} //success
},
error: function () {
//db error
$('.db_error').append('<li>Something went wrong, please try again!</li>');
$('.db_error').slideDown();
//Hide error message after 5 seconds
setTimeout(function () {
$(".db_error").hide();
}, 5000);
} //error
});
});
return false;
});
When I click the button with the id add_station it alerts on click function after $($this).closest('form').submit(function(){...) it doesn't work as you can see I've put an alert 'works' after submit function.I get no errors on the console and I can't figure what the problem is. Also, the button that is clicked is inside a form.
I need to use $($this).closest('form').submit(function(){...) inside because after ajax success a new form will be generated with add station button that will use this code.
You should block the default submit trigger by using
e.preventDefault();
$(this).closest('form').submit(function (e) {
e.preventDefault();
<!--rest of the code-->
})
add a separately submit handler
$("#add_station").on('click', function () {
$(this).closest('form').submit();
});
$("form").on("submit", function (e) {
e.preventDefault();
alert("working!");
$.ajax({
url: advoke.base_url + "/new-vendor-user/station/ajax",
method: 'post',
processData: false,
contentType: false,
cache: false,
dataType: 'json',
data: new FormData(this),
beforeSend: function () {
$('.info').hide().find('ul').empty();
$('.success_message').hide().find('ul').empty();
$('.db_error').hide().find('ul').empty();
},
success: function (data) {
if (!data.success) {
$.each(data.error, function (index, val) {
$('.info').find('ul').append('<li>' + val + '</li>');
});
$('.info').slideDown();
setTimeout(function () {
$(".info").hide();
}, 5000);
} else {
$('.success_message').slideDown();
$('#add_station').remove();
$("#station").append(data.new_station);
setTimeout(function () {
$(".success_message").hide();
}, 5000);
} //success
},
error: function () {
//db error
$('.db_error').append('<li>Something went wrong, please try again!</li>');
$('.db_error').slideDown();
//Hide error message after 5 seconds
setTimeout(function () {
$(".db_error").hide();
}, 5000);
} //error
});
});
after ajax success a new form will be generated with add station
button that will use this code
If you generate a new button you have to bind the click again after it is placed to the dom.
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>
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
I have this Javascript and I want to click ok and call detel method in my controller,
but its not working and I don't know why.
I need to but two values in this submit:
id and name.
Also I don't know what url it should be because the method doesn't change. I'm in delete right now but in get method.
Here is the code:
<script type="text/javascript">
$(function () {
$("#dialog-confirm").dialog({
resizable: false,
height: 140,
modal: true,
buttons: {
"Ok": function () {
$.ajax({
type: "POST",
url: "",
data: { name: ViewBag.ProductName, id: ViewBag.ProductID },
success: function () {
alert("succes");
$("#result").html('submitted successfully');
},
error: function () {
alert("failure");
$("#result").html("there is error with submit");
}
})
$(this).dialog("close");
},
Anuluj: function () {
$(this).dialog("close");
}
}
});
});
</script>
Try this
<script type="text/javascript">
$(function () {
$("#dialog-confirm").dialog({
resizable: false,
height: 140,
modal: true,
buttons: {
"Ok": function () {
$.ajax({
type: "POST",
url: "/ControllerName/ActionName",
data: { name: '#ViewBag.ProductName', id: '#ViewBag.ProductID' },
success: function () {
alert("succes");
$("#result").html('submitted successfully');
},
error: function () {
alert("failure");
$("#result").html("there is error with submit");
}
})
$(this).dialog("close");
},
Anuluj: function () {
$(this).dialog("close");
}
}
});
});