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
Related
I have an anchor element with a class called .trigger. I have a listener for that class which opens a modal using the iziModal framework. On first click the function works as expected. On second click the listener does not work. Instead i get in console "$(...).iziModal is not a function". What am i doing wrong? Any help would be greatly appreciated. I am bot of a newbie with JS.
** Jquery ver **
3.6.3
Ajax Example 8
$(document).on('click', '.trigger', function(event) {
event.preventDefault();
var url = $(this).attr('href');
var wtitle = $(this).data('title');
$('#my-modal').iziModal({
title: wtitle,
bodyOverflow: true,
width: 600,
headerColor: '#000',
fullscreen: false,
openFullscreen: false,
transitionIn: 'fadeInDown',
transitionOut: 'fadeOutUp',
onOpening: function(modal) {
modal.startLoading();
$.ajax({
url: url,
type: 'GET',
success: function(data) {
modal.stopLoading();
modal.setContent(data);
},
error: function() {
alert('Error loading content.');
}
});
}
});
$('#my-modal').iziModal('open');
});
I have tried initialising the izi modal outside of the trigger event (suggested by ChatGPT).
I think this would work but I am not sure how to pass the URL from the onClick event to $('#my-modal').iziModal(). If someone could suggest that then i could try.
// Initialize the iziModal
$('#my-modal').iziModal({
title: '',
bodyOverflow: true,
width: 600,
headerColor: '#000',
fullscreen: false,
openFullscreen: false,
transitionIn: 'fadeInDown',
transitionOut: 'fadeOutUp',
onOpening: function(modal) {
modal.startLoading();
$.ajax({
url: '',
type: 'GET',
success: function(data) {
modal.stopLoading();
modal.setContent(data);
},
error: function() {
alert('Error loading content.');
}
});
}
});
// Bind the click event to the trigger element
$(document).on('click', '.trigger', function(event) {
event.preventDefault();
event.stopPropagation();
var url = $(this).attr('href');
var wtitle = $(this).data('title');
// Set the modal title
$('#my-modal').iziModal('setTitle', wtitle);
// Set the modal content
$('#my-modal').iziModal('setContent', '');
$('#my-modal').iziModal('startLoading');
$.ajax({
url: url,
type: 'GET',
success: function(data) {
$('#my-modal').iziModal('stopLoading');
$('#my-modal').iziModal('setContent', data);
},
error: function() {
$('#my-modal').iziModal('stopLoading');
alert('Error loading content.');
}
});
// Open the modal
$('#my-modal').iziModal('open');
});
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 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 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');
});
});
I am using jQuery UI Modal. I have created common function to create modal dialog.
Below is the code
function createDialogWithClose(sourceDivId, url, targetDivId)
{
var dialog = jQuery(sourceDivId).dialog({
autoOpen: false,
height: 450,
width: 650,
modal: true,
open: function(event, ui){
jQuery('body').css('overflow','hidden');
},
close:function(event,ui){
jQuery(targetDivId).load(url + " " +targetDivId);
}
});
}
Now inside the dialog, I am perfoming some operation which need to reflect in the parent page.
So on close I have written to load that div. which on request set parameter in init() method and on loading it displays new result.
But problem is div get inside the div
Any other way to obtain above steps?
A good way to use $.ajax request
function createDialogWithClose(sourceDivId, url, targetDivId)
{
var dialog = jQuery(sourceDivId).dialog({
autoOpen: false,
height: 450,
width: 650,
modal: true,
open: function(event, ui){
jQuery('body').css('overflow','hidden');
},
close:function(event,ui){
$.ajax({
url: url,
type: "POST",
data: "",
cache: true,
success: function(response){
$("#targetDivId").html(response);
}
});
}
});
}