We Keep Coding

Dailog Box not passing value after the Ajax call

I am opening a dialog box on click and it has a div with textarea in it. On the same page I use an ajax call to load content in another div.
After I make the ajax call, the text field in the dialog box doesn't pass the value on submit but it works perfectly fine, before the ajax call.
Jquery
$(document).ready(function() {
$("#popup").dialog({
autoOpen: false,
title: "Popup",
show: {
effect: "fade",
duration: 150
},
hide: {
effect: "fade",
duration: 150
},
clickOutside: true,
clickOutsideTrigger: "#btn"
});
$("#btn").click(function() {
$("#popup").dialog("open");
});
});
$.widget("ui.dialog", $.ui.dialog, {
options: {
clickOutside: false,
clickOutsideTrigger: ""
},
open: function() {
var clickOutsideTriggerEl = $(this.options.clickOutsideTrigger);
var that = this;
if (this.options.clickOutside) {
$(document).on("click.ui.dialogClickOutside" + that.eventNamespace, function(event) {
if ($(event.target).closest($(clickOutsideTriggerEl)).length == 0 && $(event.target).closest($(that.uiDialog)).length == 0) {
that.close();
}
});
}
this._super();
},
close: function() {
var that = this;
$(document).off("click.ui.dialogClickOutside" + that.eventNamespace);
this._super();
},
});
Html
<button type="button" id="btn>Open Popup</button>
<div id="popup" style="display:none;">
<textarea id="textID" style="resize:none"></textarea></div>
Ajax Call causing the problem
$('.link').on('click', function (e) {
var load= $(this).attr('href');
var $this = $(this);
if(load == "#open") {
$.ajax({
type: 'post',
url: "/page/view/" + $(this).parents("[data-id]").attr("data-id"),
complete: function (event) {
$("#content").contents().remove();
$("#content").append(event.responseText);
}
});
}
});

How to load a partial view in an iframe on ajax call?

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/

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>

how can i close the Model popup window jquery

i have a button on my view page whenever its get clicked,a pop up modal appears ... now i want to close that modal ...
here is my code
function openSirenModal() {
var timeout;
var progress;
var status;
$.modal({
contentAlign: 'center',
width: 240,
title: 'Loading',
content: '<div style="line-height: 25px; padding: 0 0 10px"><span id="modal-status">Contacting to the device...</span><br><span id="modal-progress">0%</span></div>',
buttons: {},
scrolling: false,
actions: {
'Cancel': {
color: 'red',
click: function (win) {
win.closeModal();
}
}
},
onOpen: function () {
// Progress bar
var progress = $('#modal-progress').progress(100, {
size: 200,
style: 'large',
barClasses: ['anthracite-gradient', 'glossy'],
stripes: true,
darkStripes: false,
showValue: false
}),
// Loading state
loaded = 0,
// Window
win = $(this),
// Status text
status = $('#modal-status'),
// Function to simulate loading
simulateLoading = function () {
};
// Start
//timeout = setTimeout(simulateLoading, 2500);
},
onClose: function () {
// Stop simulated loading if needed
clearTimeout(timeout);
}
});
var siren = "siren";
$.ajax({
type: "POST",
data: {
value: siren
},
url: "http://localhost/siren/siren/",
success: function (data) {
alert(data);
if (data == 1) {
var auto_refresh = setInterval(
function () {
$.get('siren/sirenjson', function (datas) {
if (datas == 1) {
$('#modal-progress').hideProgressStripes().changeProgressBarColor('green-gradient');
$('#modal-status').text('success!');
setTimeout(function () {
clearInterval(auto_refresh);
win.closeModal();//here i want to close the popup modal
}, 1500);
}
});
}, 1000);
} else {
}
//clearTimeout(timeout);
},
error: function () {
alert("error");
progress.hideProgressStripes().changeProgressBarColor('red-gradient');
setTimeout(function () {
win.closeModal();
}, 1500);
status.text('error!');
}
});
};
i have written code win.closeModal();but it isn't working because i cant access the win variable in setInterval..i dont know how can i access it

<div id="modal">Modal text <br /><button type='button' class='close'>CLOSE</button></div>
$('.close').on('click', function(){
$.modal.close();
$('#modal, #open_modal').toggle();
});
Try This if you can skip the closeModal();
JSFIDDLE TRIAL

How to fix this js script to send a value by method post

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");
}
}
});
});