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.
Related
I have a script function its working fine in while i click a tag
I need to call the function when site load or body load how to do this Please help me
This is the code i used
<div class="html-code">
Open modal
<div class="white-popup-block mfp-hide" id="test-modal">
<span>hi</span>
<p>Dismiss</p>
</div>
</div>
<script type="text/javascript">
$(function () {
$('.popup-modal').magnificPopup({
type: 'inline',
preloader: true,
focus: '#username',
modal: true
});
$(document).on('click', '.popup-modal-dismiss', function (e) {
e.preventDefault();
$.magnificPopup.close();
});
});
</script>
Have you tried to insert it into the
$(document).ready(function() { ... }
and call open() method?
$(document).ready(function() {
$('.popup-modal').magnificPopup({
type: 'inline',
preloader: true,
focus: '#username',
modal: true
}).open();
});
I shown a partial view in a jquery dialog to create news group . my code are:
"_AddNewsGroup" partialView:
#model SmsMenu.Models.NewsGroupViewModel
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
#using (Html.BeginForm("AddNewsGroup", "News", FormMethod.Post, new { id = "newsGroupForm" }))
{
#Html.AntiForgeryToken()
#Html.ValidationSummary(true)
<div id="MessBox"></div>
<div class="editor-label">
#Html.LabelFor(model => model.NewsGroupTitle)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.NewsGroupTitle)
#Html.ValidationMessageFor(model => model.NewsGroupTitle)
</div>
<p>
<input type="submit" id="SubmitButton" value="Save" />
</p>
}
Jquery Codes in "Index" view to show dialog:
<script type="text/javascript">
$(document).ready(function () {
$("#addnewsgroup").css('display', 'none');
});
$(function () {
$('#addnewsgroup').dialog({
autoOpen: false,
width: 400,
resizable: false,
// title: 'hi there',
modal: true,
open: function (event, ui) {
//Load the CreateAlbumPartial action which will return
// the partial view _CreateAlbumPartial
$(this).load("#Url.Action("AddNewsGroup","News")");
},
buttons: {
"Close": function () {
$(this).dialog("close");
}
}
});
});
$("#SubmitButton").click(function () {
if (!$("#newsGroupForm").valid()) {
return false;
}
var groupTitle = $("#NewsGroupTitle").val();
$.ajax({
url: '/Admins/NewsGroup/AddNewsGroup',
type: 'post',
dataType: 'json',
data: JSON.stringify({ newsgroup: { 'NewsGroupTitle': groupTitle } }),
contentType: 'application/json; charset=utf-8',
success: function (result) {
$("#MessBox").html(result.message).dialog({
buttons: [{
text: "Ok",
click:
function () {
$("#addnewsgroup").dialog('close');
location.href = '/Admins/NewsGroup/Index';
}
}]
});
}
});
});
</script>
function for add button in index view for showing dialog:
function AddNewsGroup() {
$('#addnewsgroup').dialog('open');
}
and these are my actions:
public ActionResult AddNewsGroup()
{
return View("_AddNewsGroup");
}
[HttpPost]
public ActionResult AddNewsGroup(NewsGroupViewModel newsgroup)
{
if (newsSrv.AddNewsGroup(newsgroup))
{
return Json("successful!",JsonRequestBehavior.AllowGet);
}
else
{
return Json("Error!",JsonRequestBehavior.AllowGet);
}
}
I want to show "Successfull!" and "Errors!" after posting in previous dialog box that has been shown ;
but these are shown in a blank page!!
what should i do?
thanks for helping...
You need to use preventDefault first inside the click handler, otherwise the default action (submitting the form) will proceed.
$("#SubmitButton").click(function (e) {
e.preventDefault();
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().
I'm having a problem with a jQuery dialog that is probably right in front of me but I can't figure out...
The dialog works fine. It shows the fields and sends the information and, if it's the case, brings back the validation message. My problem is that when I initialize it, I tell it to hide a div inside of if, and it does. On open the div is not there, but if I try to send the information and it brings back the validation message, it shows the div.
Here is the js that calls the dialog:
$(function () {
$('.openDialog').click(function () {
$.ajax({
url: this.href,
type: 'GET',
cache: false,
data: { idUsuario: $('#idUsuario').val() },
success: function (result) {
$('#result').html(result).dialog('open');
$('#formButtom').hide();
}
});
return false;
});
$('#result').dialog({
autoOpen: false,
modal: true,
show: { effect: "drop", direction: "up" },
dialogClass: "dialog",
width: 400,
resizable: false,
position: "center",
buttons: {
"Confirmar": function () {
$("form").submit();
},
"Cancelar":function () { $('#result').dialog('close'); }
}
});
});
function dialogSucces(result) {
if (result.cadastro) {
$('#result').dialog('close');
window.location.href = '/usuario/index';
} else {
$('#result').html(result);
}
}
and here is the html:
<form id="createUsuarioForm">
Nome
<div class="editor-field">
#Html.EditorFor(model => model.Nome)<br />
#Html.ValidationMessageFor(model => model.Nome, String.Empty, new { #class = "text-error"})
</div>
<br />
E-mail / Login
<div class="editor-field">
#Html.EditorFor(model => model.Login)<br />
#Html.ValidationMessageFor(model => model.Login, String.Empty, new { #class = "text-error"})
</div>
<br />
<div id="formButtom" class="row demo-row">
<div class="span2">
<input type="submit" value="Confirmar" class="btn btn-primary" />
</div>
<div class="span2">
#Html.ActionLink("Cancelar", "Index", "Usuario", new { #class = "btn btn-primary" })
</div>
</div>
</form>
I've seen this post: jQuery Show/Hide not working after postback and tried doing this in the function, but it didn't work:
$(function () {
$('.openDialog').click(function () {
$.ajax({
url: this.href,
type: 'GET',
cache: false,
data: { idUsuario: $('#idUsuario').val() },
success: function (result) {
$('#result').html(result).dialog('open');
$('#formButtom').hide();
}
});
return false;
if (this.isPostback) { $('#formButtom').hide(); };
});
Does anyone know what I'm doing wrong?
You didn't show how your dialogSuccess function runs, but I suppose it executes in case of form fault also. If that is, you should to add a line into your if else statement there. Like this:
function dialogSucces(result) {
if (result.cadastro) {
$('#result').dialog('close');
window.location.href = '/usuario/index';
} else {
$('#result').html(result);
$('#formButtom').hide(); // once defected form rendered again,
// div hide directive should be launched again too
}
}
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);
}