So, IE is giving me issues, surprise, surprise...
I create a jquery dialog box (Div3) and then inside div3, i display a table (Div4). This works fine in firefox. However, in IE it is not displaying div 3, the popup window. Instead it returns the error "Unspecified error," and only displays div4, the table. Code is below...
I believe the error is somewhere in the else statement.
Any help is appreciated. Thanks!
function displayMid(count) {
var x = $("#Pid"+count).text();
var y = $("#PidSeries"+count).text();
//alert(x);
if (x == 0) {
return;
}
else if (y == null || y == " " || y == "") {
$("#inputDiv3").html("").dialog('destroy');
$("#inputDiv3").dialog({
title: 'You must add the Product before you can assign catalogs!!!',
width: 500,
modal: true,
resizable: false,
buttons: {
'Close': function() { $(this).dialog('close'); }
}
});
}
else {
$("#inputDiv3").dialog('destroy');
$("#inputDiv3").html('<div style="height:300px;overflow-y:scroll;"><div id="inputDiv4"></div></div>').dialog({
title: 'Catalog for ' + $("#PidTitle"+count).text(),
width: 500,
modal: true,
resizable: false,
open: $.get('content_backend_pub_pid.ashx', { cmd: 4, pid: x }, function(o) {
$("#inputDiv4").html(o);
}),
buttons: {
'Close': function() { $(this).dialog('close'); }
}
});
}
}
Not sure about this but I think you should wrap the ajax call for open: in a anonymous function.
open: function(){
$.get('content_backend_pub_pid.ashx', { cmd: 4, pid: x }, function(o) {
$("#inputDiv4").html(o);
});
},
Usually IE specifies a line number for the error. You have a lot going on in there, try breaking down each part into its own statement on a separate line. You can then throw in console logs between each line as well.
In general I like to create a new variable and assign that to the property, or create a new local function if the property is a function.
The issue seems to be in your open function. Maybe try wrapping that in an anonymous function like so:
$("#inputDiv3").html('<div style="height:300px;overflow-y:scroll;"><div id="inputDiv4"></div></div>').dialog({
title: 'Catalog for ' + $("#PidTitle"+count).text(),
width: 500,
modal: true,
resizable: false,
open: function() {
$.get('content_backend_pub_pid.ashx', { cmd: 4, pid: x }, function(o) {
$("#inputDiv4").html(o);
});
},
buttons: {
'Close': function() { $(this).dialog('close'); }
}
});
Otherwise, the "get" will fire immediately as opposed to when you actually open the dialog.
Related
So i have this function onDisplayError which is called each time if request fails. This means if user press save button and 3 request are failing i currently getting 3 popup messages. My goal is that this function checks if my popup window is already opened. If it is then i will append errors in my already opened window otherwise it should open this error popup
onDisplayError: function (response, message) {
var errorPanel = Ext.create('myApp.view.popup.error.Panel',{
shortMessage: message,
trace: response
});
if(errorPanel.rendered == true){
console.log('Do some other stuff');
}else{
errorPanel.show();
}
},
This is Panel.js
Ext.define('myApp.view.popup.error.Panel', {
extend: 'Ext.panel.Panel',
requires: [
'myApp.view.popup.error.PanelController'
],
controller: 'myApp_view_popup_error_PanelController',
title: 'Fail',
glyph: 'xf071#FontAwesome',
floating: true,
draggable: true,
modal: true,
closable: true,
buttonAlign: 'center',
layout: 'border',
shortMessage: false,
width: 800,
height: 200,
initComponent: function() {
this.items = [
this.getMessagePanel(),
this.getDetailsPanel()
];
this.callParent(arguments);
},
getMessagePanel: function() {
if(!this.messagePanel) {
var message = this.shortMessage;
this.messagePanel = Ext.create('Ext.panel.Panel', {
bodyPadding: 5,
height: 200,
region: 'center',
border: false,
html: message
});
}
return this.messagePanel;
},
getDetailsPanel: function() {
if(!this.detailsPanel) {
this.detailsPanel = Ext.create('Ext.panel.Panel', {
title: 'Details',
hidden: true,
region: 'south',
scrollable: true,
bodyPadding: 5,
height: 400,
html: '<pre>' + JSON.stringify(this.trace, null, 4) + '</pre>'
});
}
return this.detailsPanel;
}
The problem is that i'm still getting multiple popups displayed. I think that the problem is that var errorPanel loses reference so it can't check if this popup (panel) is already opened. How to achieve desired effect? I'm working with extjs 6. If you need any additional information's please let me know and i will provide.
You could provide to your component definition a special xtype.
Ext.define('myApp.view.popup.error.Panel', {
extend: 'Ext.panel.Panel',
xtype:'myxtype'
and then you could have a very condensed onDisplayError function:
onDisplayError: function (response, message) {
var errorPanel = Ext.ComponentQuery.query('myxtype')[0] || Ext.widget('myxtype');
errorPanel.appendError(message, response)
errorPanel.show();
},
The panel's initComponent function should initialize an empty window, and appendError should contain your logic to append an error (which may be the first error as well as the second or the third) to the list of errors in the panel.
Using Ext.create will always create a new instance of that class.
You can use the reference config to create a unique reference to the panel.
Then, use this.lookupReference('referenceName') in the controller to check if the panel already exists, and show().
You also have to set closeAction: 'hide' in the panel, to avoid panel destruction on close.
Otherwise, you can save a reference to the panel in the controller
this.errorPanel = Ext.create('myApp.view.popup.error.Panel' ....
Then, if (this.errorPanel) this.errorPanel.show();
else this.errorPanel = Ext.create...
I have a Alert function defined as follow:
this.Alert = function(stitle, message) {
var myself = this;
if(window.alertDiv == undefined) {
window.alertDiv = $('<div></div>');
window.alertDiv.dialog({
modal: true,
autoOpen: false,
title: stitle,
height:300,
buttons: {
Ok: function() {
$(this).dialog('close');
}
}
});
}
window.alertDiv.dialog('option','title', stitle);
if(!window.alertDiv.dialog('isOpen')) {
window.alertDiv.dialog('open');
window.alertDiv.html(message);
} else {
window.alertDiv.html(window.alertDiv.html() + '<div style="text-align:center;">----------</div><br /><br />' + message);
window.alertDiv.css('height','300px');
}
}
Now I need create another Alert function with the same definition but with a callback. Does anybody how do I create the second Alert function by calling the current one while adding callback?
Accept a callback as a parameter, then execute said callback when you intend for it to be executed.
this.Alert = function(stitle, message, callback) {
and then:
window.alertDiv.dialog({
modal: true,
close: callback,
I have a modal dialog. I need to close the dialog on a different key combination than the Easape key. How can I do that.
I have the following code, but that never is executed. Any clues why ?
var agreeDialog = $j('#termsOfAgreementConfirm').dialog({
modal: true,
autoOpen:false,
resizable:false,
width : 1000,
height :400,
stack:false,
title:"Terms of Usage",
open: function(event, ui) { $j('.ui-dialog-titlebar-close').hide(); },
buttons: {
Disagree: function() {
disagree.dialog('open');
disagree.dialog('moveToTop');
},
Agree: function() {
$j(this).dialog('close');
$j.cookie("agree","Y");
new Ajax.Request('/test/user/ajaxUpdateAgreementForUser',
{
onSuccess:function(resp){
},
onError: function(resp) {
alert("Error:" + resp.toJSON());
return;
},
asynchronous:true,
evalScripts:true
});
$j(this).dialog('close');
}
}
});
if (result == "false" && $j.cookie("agree")== null) {
agreeDialog.dialog('open')
agreeDialog.keyup(function e() {
alert(e.keyCode);
});
}
You will need to catch the key events on the body and then trigger the close event. See this exmaple. Pressing any key will close the dialog box. You have to do it outside your declaration.
http://jsfiddle.net/yu8Sg/
$('body').keyup( function(e) {
$('#dialog').dialog('close');
});
Here's my code:
$("#ticker-wrapper").rssfeed("http://news.hse.gov.uk/feed/", {
limit: 5,
linktarget: '_blank',
titletag: 'p',
snippet: false,
header: false,
date: false,
content: false
});
$('#js-news').ticker({
controls: false,
titleText: ''
});
Basically, a rssfeed is placed inside the wrapper, I then want .ticker to add a ticker effect to the items pulled through by the .rssfeed.
The problem seems to be that the .rssfeed creates the id #js-news (which is where I want to apply the .ticker). Then it seems the .ticker gets fired before #js-news has been created. Effectively it seems to be trying to apply .ticker to the element which hasn't yet been created which then results in nothing appearing.
I've been looking into jQuery .live() and I can get all the code working on a click command. But I need to create the rss feed and apply the ticker when the page loads. Not quite sure what to do?
------ Edit ------
ah ha!
Seems it works now I've moved the main .rssfeed bulk into the html (out of the .ready) and rewriting the ticker code:
var tickerTryCount = 0;
function addTicker() {
if (tickerTryCount < 5) {
if ($('#js-news').size() > 0) {
$('#js-news').ticker({
controls: false,
titleText: ''
});
} else {
tickerTryCount++;
setTimeout(addTicker, 1000);
}
}
}
Call the ticker() on ajaxStop()
$("#ticker-wrapper")
.rssfeed("http://news.hse.gov.uk/feed/", {
limit: 5,
linktarget: '_blank',
titletag: 'p',
snippet: false,
header: false,
date: false,
content: false
})
.ajaxStop(function() {
$('#js-news').ticker({controls: false, titleText: '' });
});
ah ha!
Seems it works now I've moved the main .rssfeed bulk into the html (out of the .ready) and rewriting the ticker code:
var tickerTryCount = 0;
function addTicker() {
if (tickerTryCount < 5) {
if ($('#js-news').size() > 0) {
$('#js-news').ticker({
controls: false,
titleText: ''
});
} else {
tickerTryCount++;
setTimeout(addTicker, 1000);
}
}
}
I want the callingFunction to be able to override the default options provided in the showDivPopUp function.
function calling(){
showDivPopUp("title of pop up box", "message to show",
{
buttons:{
Yes: function () {
$(this).dialog("destroy");
},
No :function () {
$(this).dialog("destroy");
}
}
});
}
function showDivPopUp(title,msg,options){
var mgDiv = $("#msgDiv");
mgDiv.attr("innerHTML", msg);
return mgDiv.dialog({
modal: true,
buttons: {
Ok: function () {
$(this).dialog("destroy");
}
},
resizable: true,
show: "explode",
position: "center",
closeOnEscape: true,
draggable: false,
title : titl,
open: function (event, ui) { $(".ui-dialog-titlebar-close").hide(); }
});
}
So, the above code should show two buttons viz. Yes and No instead of just OK. I don't want to do if check for each option.
UPDATE:
In options parameter there might be options for which default is not applied. So the calling function may specify size option which is not mentioned in the showDivPopUp function.
You want to use the JQuery extend() method to merge the options you pass into the function with the defaults that are specified within it.
See:
http://www.zachstronaut.com/posts/2009/05/14/javascript-default-options-pattern.html
and
http://api.jquery.com/jQuery.extend/
//calling function source excluded, use exactly the same.
function showDivPopUp(title, msg, options) {
//create basic default options
var defaults = {
modal: true,
buttons: {
Ok: function() {
$(this).dialog("destroy");
}
},
resizable: true,
show: "explode",
position: "center",
closeOnEscape: true,
draggable: false,
title: title,
open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); }
}
//merge the specified options with the defaults.
//in example case, will have the above except with the new buttons specified
if (typeof options == 'object') {
options = $.extend(defaults, options);
} else {
options = defaults;
}
var mgDiv = $("#msgDiv");
mgDiv.attr("innerHTML", msg);
return mgDiv.dialog(options);
}
Looks like 'options' is in JSON format. Try omitting the first {buttons: portion in the 3rd argument to showDivPopUp or set buttons: options.buttons in the showDivPopUp function.
To expand on this, create more json pairs, and test for their existence in the showDivPopUp function. Exists? Override. Doesn't exist? Keep defaults.
{buttons:{
Yes: function () {
$(this).dialog("destroy");
},
No :function () {
$(this).dialog("destroy");
}
},
background:"blue",
fontsize:15
}
Access each via:
options.buttons
options.background
options.fontsize
Test for existence using:
if ( typeof( window[ 'option.fontsize' ] ) != "undefined" ) {override code}
Response to the update in the question:
Use jquery.each to iterate over all elements in the passed option.
In your mgDiv.dialog function, modify the buttons key to have a conditional value. E.g.:
function showDivPopUp(title,msg,options){
var mgDiv = $("#msgDiv");
mgDiv.attr("innerHTML", msg);
return mgDiv.dialog({
modal: true,
buttons: options.buttons || {
Ok: function () {
$(this).dialog("destroy");
}
},
resizable: true,
show: "explode",
position: "center",
closeOnEscape: true,
draggable: false,
title : titl,
open: function (event, ui) { $(".ui-dialog-titlebar-close").hide(); }
});
}