How do you count characters of a textarea within a dialog? - javascript

I have the following code:
<script type="text/javascript">
function createDialog(text, id) {
return $("<div class='dialog'><textarea id='textarea' class ='texbox' name='textarea' value='text'>" + text + "</textarea></div>"
.dialog({
dialogClass: "dialogStyle",
title: "Edit Description",
resizable: false,
position: {
my: "right+240 top-200",
at: "center",
of: $("body"),
within: $("body")
},
height: 200,
width: 300,
modal: true,
buttons: {
"Save": function() {
var product = $(this).find('textarea [name="textarea"]').val();
$(this).dialog("close");
$("#" + id).val(product);
},
Cancel: function() {
$(this).dialog("close");
}
},
overlay: {
opacity: 0.5,
background: "black"
}
});
}
</script>
How do i incorporate a character count with max 255 characters for the textarea within the dialog box?
I've looked around for code but placing it within the function createDialog won't work and getting length variable doesn't work either when putting it inside the dialog.

Change your dialog to include a DIV for the count:
return $("<div class='dialog'><textarea id='textarea' class ='texbox' name='textarea' value='text'>" + text + "</textarea><div>Characters: <span class='charcount'>0</span></div></div>"
Then add the following JS:
$(document).on("keyup edit paste", ".dialog .texbox", function(e) {
var charcount = $(this).val().length;
if (charcount > 255) {
e.preventDefault();
return;
}
$(this).closest(".dialog").find(".charcount").text(charcount);
});
function createDialog(text, id) {
return $("<div class='dialog'><textarea id='textarea' class ='texbox' name='textarea' value='text' placeholder='"+text+"'></textarea><div>Characters: <span class='charcount'>0</span></div></div>")
.dialog({
dialogClass: "dialogStyle",
title: "Edit Description",
resizable: false,
position: {
my: "right+240 top-200",
at: "center",
of: $("body"),
within: $("body")
},
height: 200,
width: 300,
modal: true,
buttons: {
"Save": function() {
var product = $(this).find('textarea[name="textarea"]').val();
$(this).dialog("close");
$("#" + id).val(product);
},
Cancel: function() {
$(this).dialog("close");
}
},
overlay: {
opacity: 0.5,
background: "black"
}
});
}
$("#button").click(function() {
createDialog("This is a message", "foo");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<button id="button">Show dialog</button>
<input id="foo"/>

You would want to use delegation for this. You could do something like this:
$(document).on('input propertychange', '#textarea', function() {
var text = $('#textarea').val();
if (text.length > 255) {
$('#textarea').val(text.substring(0,255));
}
//Maybe some code to display a message to the user, or update a character count element or something?
});

Related

How to trigger the function inside kendo window?

I have a page(A.html) that will open a kendo window with iframe(B.html) inside.
Here is my configuration to open the kendo window in A.html:
var contentUrl = 'B.html';
var window = $("<div id='dvB' />").kendoWindow({
title: "B", content: contentUrl, animation: false,
resizable: false, modal: false, draggable: true, iframe: true, height: 550, width: 430,
close: function () {
this.destroy();
}
}).data('kendoWindow');
window.open();
So now I want to call the retrieveFunction() in B.html from A.html.
I try to do it like below:
Window = $('#dvB').data('kendoWindow');
Window.retrieveFunction();//not work
var windowElement = $("#dvB");
var iframeDomElement = windowElement.children("iframe")[0];
var iframeDocumentObject = iframeDomElement.contentDocument;
iframeDocumentObject.retrieveFunction(); //not work
Anyone know how to achieve that?
You can trigger custom event from B.html and pass function as parameter and listening it on A.cshtml, something like this:
B.html
<script>
function retrieveFunction() {
console.log('retrieveFunction');
}
$(function () {
window.parent.$('body').trigger('customEvent', { func: retrieveFunction});
});
</script>
A.html
<script>
$(function () {
$('body').on('customEvent',
function(event, data) {
console.log('triggered');
data.func();
});
$("<div id='dvB' />").kendoWindow({
title: 'B', content: contentUrl, animation: false,
resizable: false, modal: false, draggable: true, iframe: true, height: 550, width: 430,
close: function () {
this.destroy();
}
}).data('kendoWindow').open();
});
</script>

Open dialog with jquery

I have a dialog referenced by $imageDialog and I'm trying to open it with $imageDialog.dialog("open"), but it doesn't work.
The problem is that, by debugging, I've seen the $imageDialog.dialog("open") line executing, but then the open function inside $imageDialog does not execute. It doesn't show any errors and I checked that $imageDialog has the reference well set when executing the $imageDialog.dialog("open").
Here is the html dialog:
<div class="dialog" id="image-dialog"></div>
And here is the javascript code:
var selectedImage;
var $imageDialog = $("#image-dialog");
$imageDialog.dialog({
autoOpen: false,
buttons: [
{
text: "Cerrar",
icons: {
primary: "ui-icon-close"
},
click: function() {
$(this).dialog("close");
}
}
],
maxHeight: 580,
modal: true,
position: { my: "top", at: "top+160" },
resizable: false,
title: "Vista de imagen",
width: 1000,
close: function() {
$imageDialog.empty();
},
open: function() {
content += " <img alt='previsualizacion'" + "src='" + imageSrc + "'>";
$imageDialog.append(content);
}
});
function showImage(img) {
selectedImage = img.src;
console.log($imageDialog);
$imageDialog.dialog("open");
}
To open JQuery UI dialog just use:
Jquery:
$(document).ready(function(){
$('#dialog').dialog();
});
HTML:
<div id="dialog">
</div>
Working Fiddle
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#dialog" ).dialog();
} );
</script>
<script type="text/javascript">
$("#dialog").dialog({
autoOpen: false,
buttons: [
{
text: "Cerrar",
icons: {
primary: "ui-icon-close"
},
click: function() {
$(this).dialog("close");
}
}
],
maxHeight: 580,
modal: true,
position: { my: "top", at: "top+160" },
resizable: false,
title: "Vista de imagen",
width: 1000,
close: function() {
$imageDialog.empty();
},
open: function() {
content += " <img alt='previsualizacion" + "src='" + imageSrc + "'>";
$imageDialog.append(content);
}
});
function showImage(img) {
selectedImage = img.src;
console.log($imageDialog);
$imageDialog.dialog("open");
}
</script>
</head>
<body>
<div class="dialog" id="dialog">Dialog</div>
</body>
</html>
There are three thing you need to fix in your code
You have added modal html with id calibration-image-dialog but you are using #image-dialog in your script.
imageSrc is not defined
In modal Open event callback you have a single quote missing.
content += "<img alt='previsualizacion" + "src='" + imageSrc + "'>";
it should be
content += "<img alt='previsualizacion'" + "src='" + imageSrc + "'>";
Here is working demo .
var $imageDialog, imageSrc;
$(function() {
$imageDialog = $("#image-dialog");
$imageDialog.dialog({
autoOpen: false,
buttons: [{
text: "Cerrar",
icons: {
primary: "ui-icon-close"
},
click: function() {
$(this).dialog("close");
}
}],
maxHeight: 580,
modal: true,
position: {
my: "top",
at: "top+160"
},
resizable: false,
title: "Vista de imagen",
width: 500,
close: function() {
$imageDialog.empty();
},
open: function() {
var content = " <img alt='previsualizacion'" + "src='" + imageSrc + "'>";
$imageDialog.html(content);
}
});
});
function showImage(img) {
imageSrc = img.src;
$imageDialog.dialog("open");
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="dialog" id="image-dialog"></div>
<img onclick="showImage(this)" alt ="image" src="http://www.publicdomainpictures.net/pictures/100000/velka/autumn-by-the-lake.jpg#.WLnFxbbRDek.link" width="100" height="100">
<img onclick="showImage(this)" alt ="image" src="http://www.publicdomainpictures.net/pictures/40000/nahled/lion-head-portrait.jpg" width="100" height="100">

jquery how to get this dialog Ok button to work?

The dialog is displayed and works perfectly. The top right "X" Close button properly dismisses the dialog, but the OK button does nothing.
(I'm using jquery 1.9.1)
function showFollowProjectInDialog(followurl){
$.ajax({
url: followurl,
success: function(data) {
$("#TFdialog").html(data).dialog({
resizable: true,
height: 600,
width: 700,
modal:true,
buttons: {
Ok: function() {$( "#TFdialog" ).dialog( "close" );}
},
}).dialog('open');
}
});
}
I've also tried it without the comma following the button like:
buttons: {
Ok: function() {$( "#TFdialog" ).dialog( "close" );}
}
}).dialog('open');
And I've tried these:
buttons: [{
text: "Ok",
Click : function () {
$("#TFdialog").dialog("close");
}
}]
and:
buttons: [{
Ok: function() {
$("#TFdialog").dialog("close");
}
}]
and I've tried replacing the "#TFdialog" with 'this' like:
$(this).dialog("close");
try doing
buttons: [
{
text: "Ok",
click: function() {
$( this ).dialog( 'close' );
// your code goes here
}
}
]
Assumption is you use jQuery UI Reference https://jqueryui.com/dialog/#modal-form
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
You can also use the dialog as an object:
var myDialog;
myDialog = $("#TFdialog").html(data).dialog({
resizable: true,
autoOpen: false,// added this
height: 600,
width: 700,
modal:true,
buttons: {
Ok: function() {
myDialog.dialog( "close" );
},
"Close this Soon" : DelayClose,
}
});
myDialog.dialog('open');
function DelayClose(){
setTimeout(function() {
myDialog.dialog( "close" );
}, 500 );
}
Example for why to use an object for yours:
var myDialog;
myDialog = $("#TFdialog").dialog({
resizable: true,
autoOpen: false,// added this
height: 600,
width: 700,
modal:true,
buttons: {
Ok: function() {
myDialog.dialog( "close" );
}
}
});
function showFollowProjectInDialog(followurl){
$.ajax({
url: followurl
}).done(function(data){
$("#TFdialog").html(data);
myDialog.dialog('open');
});
}

Issue generating dynamically a popup in jQuery mobile

I'm trying to dynamically generate a popup in mobile app I'm working on, but I'm experiencing an issue that I can figure out. I added a control-group with a couple of buttons, but the buttons are added twice (see image below). I'm sure it is very simple, but I can't see it. What am I missing here. Thansk!
This is the jQuery code:
var $popUp = $("<div><div/>").popup({
dismissible: false,
theme: "a",
overlyaTheme: "a",
transition: "pop",
positionTo: "window"
}).on("popupafterclose", function () {
//remove the popup when closing
$(this).remove();
}).css({
'width': '270px',
'height': '200px',
'padding': '5px'
});
$("<h2/>", {
text: "Location Details"
}).appendTo($popUp);
$("<label/>", {
text: "Location: " + locationName
}).appendTo($popUp);
$("<label/>", {
text: "Note:"
}).appendTo($popUp);
$("<p/>", {
text: locationNote
}).appendTo($popUp);
$("<div data-role='controlgroup' data-type='horizontal' class='myGroup'/>").trigger("create").appendTo($popUp);
$("<a>", {
text: "Submit"
}).buttonMarkup({
inline: false,
mini: true,
icon: "check",
}).on("click", function () {
$popUp.popup("close");
}).appendTo('.myGroup');
$("<a>", {
text: "Back",
"data-rel": "back"
}).buttonMarkup({
inline: false,
mini: true,
theme: "e",
icon: "back",
}).appendTo('.myGroup');
$popUp.popup('open').trigger("create");
I ended up doing it using grids instead of controlgroup, for my purpose it work just fine:
var $popUp = $("<div><div/>").popup({dismissible: false, theme: "a", overlyaTheme: "a", transition: "pop",positionTo: "window"
}).on("popupafterclose", function () {
$(this).remove();
}).css({
'width': '270px',
'height': '200px',
'padding': '5px'
});
$('<div class="ui-grid-a"><div class="ui-grid-solo"><div class="ui-block-a"> <h2>' + locationName + '</h2><label>Note: </label><textarea disabled="disabled">' + itemClickedNote + '</textarea></div></div>').appendTo($popUp);
$('<div class="ui-block-a" style="width:48%"><a data-icon="back" data-rel="back" data-role="button" class="ui-mini">Cancel</a>').on("click", function () {
$popUp.popup("close");
}).appendTo($popUp);
$('</div>').appendTo($popUp);
$('<div class="ui-block-b" style="width:48%; float:right"><a data- icon="plus" id="addLocationsBtn" data-role="button" class="ui- mini">Submit</a>').appendTo($popUp);
$('</div> </div>').appendTo($popUp);
$popUp.popup('open').trigger("create");

jquery modal-dialog button close doesn't work properly

$(function () {
$('#modalDlg2').live("click", function (event) {
event.preventDefault();
loadDialog(event, "/User/Create");
});
function loadDialog(event, target) {
var $dialog = $('<div></div>');
$dialog.empty();
$dialog
.load(target)
.dialog({
title:"Novo utilizador",
modal: true,
autoOpen: false,
width: 600,
show:'fade',
hide:'fade',
minHeight: 400,
resizable: false
});
$dialog.dialog( "option", "buttons", {
"Cancelar": function() {
$(this).dialog("close");
$(this).empty();
} });
$dialog.dialog('open');
}
})
I have a problem with my close button "Cancelar" it should close the modal dialog and then empty it, but it seems that $(this).dialog("close") does not work, and .empty() does.
I've looked everywere for the solution of my problem. Could anyone help me with this?
try this:
$dialog.dialog( "option", "buttons", {
"Cancelar": function() {
$dialog.dialog("close");
$(this).empty();
}
});
$dialog.dialog('open');
or
$dialog.dialog( "option", "buttons", {
"Cancelar": $.proxy(function() {
$(this).dialog("close");
$(this).empty();
},this)
});
$dialog.dialog('open');
I would try putting this in a callback function for the load:
$(function() {
$('#modalDlg2').on("click", function(event) {
event.preventDefault();
loadDialog(event, "/User/Create");
});
function loadDialog(event, target) {
var $dialog = $('<div></div>');
$dialog.empty();
$dialog.load(target, function() {
$dialog.dialog({
title: "Novo utilizador",
modal: true,
autoOpen: false,
width: 600,
show: 'fade',
hide: 'fade',
minHeight: 400,
resizable: false
});
$dialog.dialog("option", "buttons", {
"Cancelar": function() {
$(this).dialog("close");
$(this).empty();
}
});
$dialog.dialog('open');
});
});
Try the following code:
$dialog.dialog("option", "buttons", { "Cancelar": function() { $(this).remove(); } });

Categories