Develop Reference

jquery noty on close goto a url

i'm using the jquery noty plugin and when someone clicks the popup, i want it to goto a URL (below) but i cant figure this out... can someone give me a quick fix.. ?
URL i want it to goto: script.php?hidenoty=true
<script type="text/javascript">
function generate(layout) {
var n = noty({
text: "<?php echo $motd?>",
type: 'warning',
dismissQueue: true,
layout: layout,
theme: 'defaultTheme',
animation: {
open: {height: 'toggle'},
close: {height: 'toggle'},
easing: 'swing',
speed: 500 // opening & closing animation speed
},
timeout: false, // delay for closing event. Set false for sticky notifications
force: false, // adds notification to the beginning of queue when set to true
modal: false,
maxVisible: 3, // you can set max visible notification for dismissQueue true option
closeWith: ['click'], // ['click', 'button', 'hover']
callback: {
onShow: function() {},
afterShow: function() {},
onClose: function() {
$.ajax({ url: 'script.php?hidenoty=true' });
},
afterClose: function() {}
},
buttons: false // an array of buttons
});
console.log('html: '+n.options.id);
}
function generateAll() {
generate('topCenter');
}
$(document).ready(function() {
generateAll();
});
</script>

Change this line...
$.ajax({ url: 'script.php?hidenoty=true' });
to this...
window.location.href = 'script.php?hidenoty=true';
ajax is used specifically to load something without changing the page, so the opposite of what you want :)

Jquery delegate/live does not work

I have system that I'm modifying that uses jquery 1.5.1, which means .on doesn't exist.
I have a table and in this table I have multiple links listed in a row, and when the user clicks it opens a pop up window. I have the following code to create a pop up link.
<tr>
<td class="view_detail_label">
</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>
In the first function below I open a popup window and it works perfectly except when you close the popup you can not reopen it from the link again. To solve this I subscribed my event lively and used delegate and live function. But when tracking it from the console I cannot seen any output from the console statement : console.log($(this).next('.result'));.
$('.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
//console.log($(this).next('.result'));
} //enf of success function
}); //end of ajax call
return false;
});
$('a.addSurvey').live( '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
console.log($(this).next('.result'));
} //enf of success function
}); //end of ajax call
}); //end of live
Why is this the case I used delegate method too and it does not work either. My delegate
function:
$(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: true,
title: 'Anket',
width: 500,
height: 'auto',
modal: true
}); //end of dialog
console.log($(this).next('.result'));
} //enf of success function
}); //end of ajax call
});//end of delegate
Thank you for your help.
*EDIT 1 After clesing the popup window when i click it it duplicates the responses somehow it is clicked as twice and when i refresh the page and click on it and then close the responses triples. What might cause this awkward situation? *
**EDIT2 I solved the above problem by using close: function () { console.log("onClose"); $('.surveyTable').load('Home/DetailsSurvey', {id:#Model.Id}); }. By this I reload the the div table and can click on any pop up.

If you are using live then you do not need the first call. Try preventDefault() rather than return false.
$('a.addSurvey').live( 'click', function (e) {
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
}); //end of dialog
console.log($(this).next('.result'));
} //enf of success function
}); //end of ajax call
}); //end of live

Change to this:
$(".addSurvey").die().live("click", function (event) { event.stopPropagation();
.......rest of code.

Hello everyone I solved my problem as follows: on close action of the popup I reload the page from the server and re render it therefor now it works like a charm. Thanks everyone for your time and attention.
$('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 o

use .on instead of live. live is deprecated..
$('a.addSurvey').on( 'click', function () {
}

on() method is the new replacement for the bind(), live() and delegate() methods. Please use on().

how to reopen modal dialog in jquery after closing it?

I have an Asp.Net MVC application, where in 1 View, I have a list with every record showing Edit icon. Clicking the edit icon opens a modal dialog popup to update the record .
I face problem in reopening the dialog or clicking other edit icon for popup after closing the dialog .
Following is my jquery code to open the dialog :
var singltym;
$(function () {
$('#addSingleTimeDialog').dialog({
cache: false,
autoOpen: false,
width: 450,
height: 450,
closeOnEscape: true,
resizable: true,
modal: true});
$('#singletymlink').on('click', function () {
singltym = $(this);
var dialogDiv = $('#addSingleTimeDialog');
var viewUrl = singltym.attr('href');
$.ajax({
cache: false,
url: viewUrl,
dataType: 'html',
success: function (data) {
dialogDiv.html(data);
dialogDiv.dialog('open');
}
});
return false;
});
});

var singltym;
$(function () {
$('#addSingleTimeDialog').dialog({
cache: false,
autoOpen: false,
width: 450,
height: 450,
closeOnEscape: true,
resizable: true,
modal: true});
$('#singletymlink').on('click', function () {
singltym = $(this);
var dialogDiv = $('#addSingleTimeDialog');
var viewUrl = singltym.attr('href');
$.ajax({
cache: false,
url: viewUrl,
dataType: 'html',
success: function (data) {
dialogDiv.html(data);
dialogDiv.dialog('open');
//I work in this method
$( this ).dialog( "close" );
}
});
});
});
Or
$.ajax({
cache: false,
url: viewUrl,
dataType: 'html',
success: function (data) {
dialogDiv.html(data);
$("#dialogDiv").dialog("open");
$( this ).dialog( "close" );
}
If $( this ).dialog( "close" ); not working because not try this specific sentence??
$('#addSingleTimeDialog').dialog("close");

The above issue can be solved by including the below scripts in parent view from where the dialog popup is clicked & initiated :
<script type="text/javascript" src="../../Scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.validate.min.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.validate.unobtrusive.min.js"></script>
As well as insert the below scripts in child view which is the UI for modal dialog popup :
<script type="text/javascript" src="../../Scripts/jquery.validate.min.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.validate.unobtrusive.min.js"></script>
By scripting in such way, the jquery script conflict is avoided & reopening of dialog can be swiftly done.

You could use the open method:
$('#addSingleTimeDialog').dialog('open');

Came across this older question, found a simpler solution not listed here.
Add an event listener for the close event, and call destroy when the dialog is closed.
close: function(event, ui) {$(this).dialog("destroy");}

Try writing $( this ).dialog( "close" ); method in close function. Eg :
close: function(){ $( this ).dialog( "close" ); },
$( this ).dialog( "close" ); does not destroy the dialog, instead it just closes and makes it available to be used for next time.

My problem was solved by replacing
$(this).dialog("close");
with
$(this).dialog("destroy");

Dialog Box is not close after i update the button in dialogbox

i am trying to close the dialog box automatically after i update the button in dialogbox, but it will not close automatically, is there any proper solution to resolve this issue? this is my code.
<script>
jQuery(function () {
var jQuerydialog = jQuery("#view_dialog").dialog({
autoOpen: false,
title: 'Schedule',
height: 200,
width: 350,
resizable: true,
modal: true,
});
jQuery(".view_dialog").click(function () {
jQuerydialog.load(jQuery(this).attr('href'),
function () {
jQuerydialog.dialog('open');
});
return false;
});
});
</script>

$('#view_dialog').dialog('close'); should work fine.

change of code will work. :)
function dialogOpen(param){
//Getting Html For View
var result = jQuery.ajax({
type: "POST",
url: FULL_BASE_URL+"url"+param,
async: false
});
createDialogBoxById('view_dialog','title','350','200',result.responseText);
}

Get content from TinyMCE editor

I'm trying to get the Content from TinyMCE, but it only returns null. The problem it's loaded in a Dialog box.
The dialog view:
<form>
<textarea name="content" cols="40" rows="25" id="tinymce">
Dette er noget tekst
</textarea>
</form>
<input class="close" onclick="get_editor_content()" name="submit" type="submit" value="Kontakt Oline" style="float: right" id="contenttiny" />
<script type="text/javascript">
tinyMCE.init({
// General options
mode: "textareas",
theme: "advanced",
plugins: "autolink,lists,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
</script>
The view where the dialog is opened from:
<a class="openDialog" data-dialog-id="emailDialog" data-dialog-title="Kontakt/prospekt" href="/Home/tinymce">Contact US</a>
<div id="result"></div>
<script type="text/javascript">
$.ajaxSetup({ cache: false });
$(document).ready(function () {
$(".openDialog").live("click", function (e) {
e.preventDefault();
$("<div ></div>")
.addClass("dialog")
.attr("id", $(this).attr("data-dialog-id"))
.appendTo("body")
.dialog({
title: $(this).attr("data-dialog-title"),
close: function () { $(this).remove() },
modal: true,
position: ['center', 40],
minWidth: 670,
resizable: false
})
.load(this.href);
});
});
$(".close").live("click", function (e) {
e.preventDefault();
var content = tinyMCE.get('tinymce').getContent(); //$("#contenttiny").val();
$.ajax({
type: "POST",
url: "/Home/tinymce",
data: { "content": content },
success: function (data) {
$("#result").html(data.nameret);
$(".dialog").dialog("close");
},
error: function (data) {
alert("There was error processing this");
$(this).closest(".dialog").dialog("close");
}
});
});
</script>
The Controller:
[HttpPost]
public ActionResult tinymce(string content)
{ /*Your other processing logic will go here*/
return Json(new
{
nameret = content
}, JsonRequestBehavior.
AllowGet);
}
P.S. I have used this example to create the modal dialog. Which is an PartialView. It's possible to get the content from tinymce in the main index view. But not in the ajax call.

The solution to the problem was rather simple. The reason was that the tinymce is returning html text, which per default is not allowed. The solution was to put [ValidateInput(false)] over the Controller method.