I am using jQuery Extend dialog box in my application it working fine in Chrome as well as IE but from the server has not working for IE
I have included the following libraries
<script src="/CLG/JavaScript/jquery-1.11.1.min.js" type="text/javascript" ></script>
<script src="/CLG/JavaScript/jquery-migrate-1.2.1.min.js" type="text/javascript" ></script>
<link href="/CLG/Stylesheets/jquery/jquery-ui.css" rel="stylesheet" />
<script src="/CLG/JavaScript/jquery-ui.js"></script>
<script src="/CLG/JavaScript/jquery.dialogextend.js"></script>
And Please find the below function from where dialog Box is opening
function ShowNewDialogv1(URL, Style,width) {
var hostname = document.domain;
var dialogOptions = {
"open": function () {
},
"close": function () {
},
"title": Style,
// "width": 400,
// "height": 300,
"modal": true,
"resizable": false,
"draggable": true
//"close": function () { }
};
var dialogExtendOptions = {
"closable": true,
"maximizable": true,
"minimizable": true,
"collapsable": true
};
$(".ui - widget - header").css("width", "100");
$("#NewPopupWindowv1 iframe").attr("src", "http://" + hostname + URL);
$("#NewPopupWindowv1 iframe").css("height", "100%").css("border", "0px");
$("#NewPopupWindowv1 iframe").css("width", "100%");
$("#NewPopupWindowv1").dialog(dialogOptions).dialogExtend(dialogExtendOptions).dialog({
// $("#NewPopupWindowv1").dialog(dialogOptions).dialog({
dialogClass: "no-close",
title: Style,
height: 600,
//appendTo: $("form:first"),
width: parseInt(width),
open: function () {
if ($.browser.msie && $.browser.version <= 8) {
$(".ui-dialog").css("left", "25%").css("top", "10%").css("position", "absolute").css("overflow", "hidden").css("display", "block").css("height", "auto").css("width", "950px").css("z-index", "101");
$(".ui-dialog-titlebar-close").css("top", "30%");
$(".ui-widget-header").css("width", "98%");
}
$("#NewPopupWindowv1 iframe").css("display", "block");
$(".ui-widget-header").css("background", "#617D8D").css("color", "#ffffff");
if (Style.indexOf("Demographic") > 0) {
$("#NewPopupWindowv1 iframe").find("#RadPane1").css("display", "none");
}
},
close: function () {
$("#NewPopupWindowv1 iframe").css("display", "none");
},
modal:true
});
}
Related
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>
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">
I'm trying to drag a dialog in a web app and its not working why?
My code is something like this... draggable is set to true but still its not dragging... and for your info there is movable objects in the background also. dragging symbol is shown but the dialog is not moving why? Can you explain how to make a dialog draggable?
$dlgLibrary = $('<div style="overflow-y:hidden;color:#FBFBEF"" id="eBLibrary"></div>')
.dialog({
autoOpen: false,
title: 'Browse & Select',
maxWidth:1000,
maxHeight: 600,
width: 800,
height: 600,
dialogClass: "alertDialog",
modal: true,
closeOnEscape: true,
canMaximize:true,
draggable: true,
resizeHt: 0,
resizeWd: 0,
resizeStop: function(event, ui) {
if (resizeHt== 0 && resizeWd== 0) {
resizeHt = $dlgLibrary.dialog( "option", "height" );
resizeWd = $dlgLibrary.dialog( "option", "width" );
};
$('#eBLibrary-Show').width(Number(resizeWd-(resizeWd*16/100)));$('#eBLibrary-Show').height(Number(resizeHt-(resizeHt*35/100)));
resizeHt= 0;
resizeWd= 0;
},
open: function(event, ui) {
}
$.ajax({ url: './Library.html',
success : function(data) {
},
buttons: libButtons,
close: function() {
});
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index3</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript">
$dlgLibrary =
$(function () {
$('<div style="overflow-y:hidden;color:#FBFBEF"" id="eBLibrary"></div>').dialog(
{
autoOpen: true,
title: 'Browse & Select',
maxWidth: 1000,
maxHeight: 600,
width: 800,
height: 600,
dialogClass: "alertDialog",
modal: true,
buttons: {
"Create an account": libButtons,
Cancel: function () {
dialog.dialog("close");
}
},
closeOnEscape: true,
canMaximize: true,
draggable: true,
resizeHt: 0,
resizeWd: 0,
resizeStop: function (event, ui) {
if (resizeHt == 0 && resizeWd == 0) {
resizeHt = $dlgLibrary.dialog("option", "height");
resizeWd = $dlgLibrary.dialog("option", "width");
};
$('#eBLibrary-Show').width(Number(resizeWd - (resizeWd * 16 / 100))); $('#eBLibrary-Show').height(Number(resizeHt - (resizeHt * 35 / 100)));
resizeHt = 0;
resizeWd = 0;
},
open: function (event, ui) {
var person = {};
person.Name = "Amir";
var pdata = { "p": person };
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "../../SimpleService.asmx/GetData",
data: JSON.stringify(pdata),
dataType: "json",
async: true,
success: function (data, textStatus) {
if (textStatus == "success") {
if (data.hasOwnProperty('d')) {
msg = data.d;
} else {
msg = data;
}
$('#divMore').append(msg);
}
},
error: function (data, status, error) {
alert("error");
}
});
},
close: function (event, ui) {
}
}
);
});
function libButtons() {
var valid = true;
allFields.removeClass("ui-state-error");
valid = valid && checkLength(name, "username", 3, 16);
valid = valid && checkLength(email, "email", 6, 80);
valid = valid && checkLength(password, "password", 5, 16);
valid = valid && checkRegexp(name, /^[a-z]([0-9a-z_\s])+$/i, "Username may consist of a-z, 0-9, underscores, spaces and must begin with a letter.");
valid = valid && checkRegexp(email, emailRegex, "eg. ui#jquery.com");
valid = valid && checkRegexp(password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9");
if (valid) {
$("#users tbody").append("<tr>" +
"<td>" + name.val() + "</td>" +
"<td>" + email.val() + "</td>" +
"<td>" + password.val() + "</td>" +
"</tr>");
dialog.dialog("close");
}
return valid;
}
</script>
</head>
<body>
</body>
</html>
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?
});
Regarding the browser version, the player height should change
if older then ie9
//height is fixed
else
//height is auto
The above code is working but, it's the worst thing I've seen, because I do repeat myself again and again, when only one line changes on this conditional.
<script type="text/javascript">
$(document).ready(function() {
if ($.browser.msie && $.browser.version.substr(0,1)<9) {
$("#jquery_jplayer_1").jPlayer({
ready: function ()
{
$(this).jPlayer("setMedia",
{
m4v: "/video/videoK.mp4",
ogv: "/video/videoK.ogg"
}).jPlayer("play");
$('article.about-k').hide();
olark('api.box.hide');
},
swfPath: "/scripts/",
supplied: "m4v, ogv",
size: {
width: "100%",
height: "400px" // THE ONLY CHANGE IS HERE
},
backgroundColor: "#fff",
click: function() {
$(this).jPlayer("play");
},
ended: function() {
$('.jplayer-k').hide();
$('article.about-k').show();
}
})
} else {
$("#jquery_jplayer_1").jPlayer({
ready: function ()
{
$(this).jPlayer("setMedia",
{
m4v: "/video/videoK.mp4",
ogv: "/video/videoK.ogg"
}).jPlayer("play");
$('article.about-k').hide();
olark('api.box.hide');
},
swfPath: "/scripts/",
supplied: "m4v, ogv",
size: {
width: "100%",
height: "auto" // THE ONLY CHANGE IS HERE
},
backgroundColor: "#fff",
click: function() {
$(this).jPlayer("play");
},
ended: function() {
$('.jplayer-k').hide();
$('article.about-k').show();
}
})
}
});
</script>
As noted by the comments, the only change is on ONE single line.
How can I remake this, without stupidly repeating myself ?
height: "auto" //THIS IS THE ONLY DIFFERENCE!
Please advice
That's quite simple with a ternary operator:
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
m4v: "/video/videoK.mp4",
ogv: "/video/videoK.ogg"
}).jPlayer("play");
$('article.about-k').hide();
olark('api.box.hide');
},
swfPath: "/scripts/",
supplied: "m4v, ogv",
size: {
width: "100%",
height: ($.browser.msie && $.browser.version.substr(0, 1) < 9)
? "400px"
: "auto"
},
backgroundColor: "#fff",
click: function () {
$(this).jPlayer("play");
},
ended: function () {
$('.jplayer-k').hide();
$('article.about-k').show();
}
})
If you don't like that (e.g. because of a more complex condition), you still can use a simple variable:
var height = "auto";
if (/* IE too old */)
height = "400px";
$…({
… // huge config object
height: height,
…
});
Why not:
<script type="text/javascript">
$(document).ready(function() {
if('<?= $cookie; ?>' > '1' || $(window).width() <= 768) {
$('.jplayer-k').remove();
$('article.about-k').show();
}
$("#jquery_jplayer_1").jPlayer({
ready: function ()
{
$(this).jPlayer("setMedia",
{
m4v: "/video/videoK.mp4",
ogv: "/video/videoK.ogg"
}).jPlayer("play");
$('article.about-k').hide();
olark('api.box.hide');
},
swfPath: "/scripts/",
supplied: "m4v, ogv",
size: {
width: "100%",
height: ($.browser.msie && $.browser.version.substr(0,1)<9) ? "400px" : "auto"
},
backgroundColor: "#fff",
click: function() {
$(this).jPlayer("play");
},
ended: function() {
$('.jplayer-k').hide();
$('article.about-k').show();
}
})
It could be like this:
<script type="text/javascript">
$(document).ready(function() {
if('<?= $cookie; ?>' > '1' || $(window).width() <= 768) {
$('.jplayer-k').remove();
$('article.about-k').show();
}
height = $.browser.msie && parseInt($.browser.version, 10) < 9 ? '400px' : 'auto';
$("#jquery_jplayer_1").jPlayer({
ready: function ()
{
$(this).jPlayer("setMedia",
{
m4v: "/video/videoK.mp4",
ogv: "/video/videoK.ogg"
}).jPlayer("play");
$('article.about-k').hide();
olark('api.box.hide');
},
swfPath: "/scripts/",
supplied: "m4v, ogv",
size: {
width: "100%",
height: height
},
backgroundColor: "#fff",
click: function() {
$(this).jPlayer("play");
},
ended: function() {
$('.jplayer-k').hide();
$('article.about-k').show();
}
})
});
</script>
UPDATE:
I added to code above the Fabriccio Matte suggestion so your code dont fail with IE10
Try:
var playerObj = { ready : function () { /* ... */ }, size : /* AUTO */ };
if (/*stupid IE TEST*/) {
playerObj.size.height = "...";
}
$("#jquery_jplayer_1").jPlayer(playerObj);
Separate your configuration from your processes, and it becomes much less of a hassle.
Also, like #Bergi said, a ternary-operation:
value = (test_with_optional_parentheses) ? passed_value : failed_value;
...or in this case, as an object parameter:
{ value : (test_with_optional_parentheses) ? passed_value : failed_value };
Works perfectly well for changing one thing, inline, in the middle of a configuration object.
Keep my advice in mind for organizing large blocks of code, when you start confusing what you need to do with what you're currently doing.
Keep Bergi's advice in mind for when you need to set one single value (at a time), based on a simple test.