What is the proper way to close an ExtJS tab programmatically?
I need to make this work in IE6; although remove'ing the tab from the TabPanel works, I see an IE warning: This page contains secure and unsecure items... When I click the X on the tab, I do not see this warning. So, clearly something clever is happening when I click the X.
Note: the warning occurs when I use tabPanel.remove(aTab, true) and it does not occur when I use tabPanel.remove(aTab, false). So, the mixed content warning is displayed during the removal and subsequent destruction of the panel.
Does it make sense to simulate the click on a tab?
EDIT
IE is telling me I have mixed SSL content when I don't
Are you removing the tab's element directly, or are you removing the tab component from its container? E.g.:
Ext.fly('tab-id').remove(); // Element API
vs.
myTabPanel.remove('tab-id'); // Panel API
Both should work OK in terms of nuking the tab markup, but removing the element directly may have undesirable consequences. If you are doing the latter (correct), then I'm not sure what the issue might be. I don't have IE 6 handy myself.
This closes a tab by clicking the middle button of your mouse.
var middleClick = $(document).mousedown(function(e) {
if(e.which == 2){
var tabPanel = <%= tabPanel.ClientID %>;
var activeTab = tabPanel.getActiveTab();
if (e.target.textContent == activeTab.title) {
var activeTabIndex = tabPanel.items.findIndex('id', activeTab.id);
tabPanel.remove(activeTabIndex);
}
}
return true;
});
Hope it helps!! =)
Related
To improve performance on some bulky web apps, I've created an update that converts them to single-page apps. Only JS / jQuery are in use; thus far, it hasn't seemed useful to introduce Angular, React, Meteor, etc. However, beta testing has revealed a problem, which is that (duh) sometimes a user will want to open something in a new tab / window. The interactive elements in question are currently anchors with no href attribute, so it is not currently possible to open in a new tab.
My understanding is that if I were to use an a with an href and preventDefault(), users would still not be able to open in a new tab.
I considered placing "open in new tab" checkboxes next to the interactive elements, and I considered some other approaches that would require people to learn new, idiomatic interaction patterns. Bad idea.
Now, I'm thinking that I'll try using the onbeforeunload event handler to prevent changing the current window's location and instead affect the desired changes to the current screen. I believe this would not prevent opening in a new tab, since doing opening in a new tab won't fire the unload event.
I can't be the first person to try to address this problem, but I can't find any info on it, either. Anyone know how to prevent opening in the same tab while allowing opening in a new tab and while not forcing people to learn new interaction patterns? Anyone have a reason to believe that using the onbeforeunload event handler will not allow me to achieve that?
Update
In case it helps anyone in the future, below is what I developed. Thanks to #Kiko Garcia; it hadn't occurred to me that one could detect which mouse button was used. Tested on Firefox 54, Chrome 57, Edge, IE 11 (all on Windows 10) and on Safari for iOS10 and on Android Browser for Android 7. (Will test on Mac next week, but assuming it's good for now.)
// track whether or not the Control key is being pressed
var controlKeyIsPressed = 0;
$(document).keydown(function(keyDownEvent) {
if(keyDownEvent.which == "17") {
controlKeyIsPressed = 1;
}
});
$(document).keyup(function(){
controlKeyIsPressed = 0;
});
// on clicking anchors of the specified type
$("a.some-class").on("click", function(clickEvent) {
// left click only
if (clickEvent.which == 1 && controlKeyIsPressed == 0) {
// prevent default behaviour
clickEvent.preventDefault();
// perform desired changes on this screen
// middle click
} else if (clickEvent.which == 2) {
// prevent default behaviour because behaviour seems to be inconsistent
clickEvent.preventDefault();
}
});
Just as this answer says you can just provide different actions for different mouse events. Of course that can be an window.open() or a location.href change, for example.
With that you can do something like:
left click: change location.href
middle click: open new window
right click: open your custom menu
$(document).mousedown(function(e){
switch(e.which)
{
case 1:
//left Click
break;
case 2:
//middle Click
break;
case 3:
//right Click
break;
}
return true;// to allow the browser to know that we handled it.
});
Try that
Please note that I just pasted the answer's code. You should adapt to your tagname and usability
I use JQwidgets ,, I use to print data onclick print-button
as code :
$("#print").click(function () {
var gridContent = $("#jqxgrid").jqxGrid('exportdata', 'html');
var newWindow = window.open('', '', 'width=800, height=500'),
document = newWindow.document.open(),
pageContent =
'<!DOCTYPE html>\n' +
'<html>\n' +
'<head>\n' +
'<meta charset="utf-8" />\n' +
'<title>jQWidgets Grid</title>\n' +
'</head>\n' +
'<body>\n' + gridContent + '\n</body>\n</html>';
document.write(pageContent);
document.close();
newWindow.print();
});
When I close printing-widow(not continue printing), I can't use the grid-scroll (on chrome)..
google-chrome Version 34.0.1847.131 m
This worked fine on Firefox and IE..
How to fix the scroll after closing printing-window on chrome
Fiddle-Demo
It looks like you're not the only one with this issue.
I understand that your code is already setup and you want to run with what you have, but unless someone comes up with a hack or Google decided to fix what is clearly a bug, I think you need to re-think how you are approaching this issue.
If chromeless windows were an option, or if the print dialogue were a modal then you could pull this off with the current strategy, but neither of those options are possible in Chrome. Even if you were able to get around this scrolling issue somehow you're still left with a less than desirable UX problem in that if the user hits "cancel" in the print dialogue then they are left with a still open blank window.
Here is a JS fiddle to demonstrate that you need to change your approach: DEMO
You can see from this demonstration that even if we run a completely separate script from within the new window by passing it as plain text in the content object, it still causes the same issue. This means to me that this is a parent/child type of a relationship that is not easily circumvented with JS.
I recommend 2 alternative possible solutions:
Option1:
<input type="button" value="Print" onclick="window.print(); return false;" />
This triggers a full screen print dialogue that can't be closed from the "Windows Close Button." That way you can avoid the issue all together. Then you can use a combination of JS and Print Styles to target and isolate the information you want to print. I know it's more work but I think may be the better cross-platform solution.
This option is more brute force and simplistic in nature (and you have already commented that you know this but I'm leaving it up because it's still an option).
DEMO
Option2:
User clicks on a link/button that opens a new tab/window
In the same function the data from your table gets loaded into a JSON Object
The JSON object is loaded into a print template in the new tab/window
the template initiates the print function
By taking these actions, I think you will have disassociated the JS instance enough that the new tab will not affect the initiating script.
This is a browser bug - you'd have to find some sort of hack to fix it.
Doesn't sound like you want to put the print dialog code elsewhere thus not affecting your scroll bar. That is the obvious solution but it sounds like you can't do that.
Here's what I would do: Wait until someone has triggered the problematic condition, then put an event listener on the scroll event. when it happens... go ahead and reload the page.
Simple, easy, fun.
var needToReload = false;
$("#print").click(function () {
... as you have
needToReload = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
}
$('#contentjqxgrid').scroll(function () {
if (needToReload) {
window.location.reload();
}
});
$("#jqxscrollbar").jqxScrollBar({
width: 5,
height:180,
theme:'energyblue',
vertical:true
});
$("#jqxscrollbar1").jqxScrollBar({
width: 300,
height:5,
theme:'energyblue'
});
Look at jsfiddle: http://jsfiddle.net/8PtUX/6/
I came across this in some JS code I was working on:
if ( typeof( e.isTrigger ) == 'undefined' ) {
// do some stuff
}
This seems to be part of jQuery. As far as I can see it tells you if an event originated with the user or automatically.
Is this right? And given that it's not documented, is there a way of finding such things out without going behind the curtain of the jQuery API?
In jQuery 1.7.2 (unminified) line 3148 contains event.isTrigger = true; nested within the trigger function. So yes, you are correct - this is only flagged when you use .trigger() and is used internally to determine how to handle events.
If you look at jQuery github project, inside trigger.js file line 49 (link here) you can find how isTrigger gets calculated.
If you add a trigger in your JavaScript and debug through, You can see how the breakpoint reaches this codeline (checked in jQuery-2.1.3.js for this SO question)
Modern browsers fight against popup windows opened by automated scripts, not real users clicks. If you don't mind promptly opening and closing a window for a real user click and showing a blocked popup window warning for an automated click then you may use this way:
button.onclick = (ev) => {
// Window will be shortly shown and closed for a real user click.
// For automated clicks a blocked popup warning will be shown.
const w = window.open();
if (w) {
w.close();
console.log('Real user clicked the button.');
return;
}
console.log('Automated click detected.');
};
I am new to both Javascript and designing for Facebook. I am using Shortstack to create custom tabs and have created a 3 panel sub-tab application using the service. In the 3rd panel, I have 19 div's holding information. By default, I use CSS to hide these DIVs (display:none;) and have a series of links at the top of the panel that change the visibility of each DIV onclick. Only the active onclick content is visible at any time.
The tab functions properly in Firefox, Chrome, and even Safari on the Mac, but fails in all browsers on the PC, and fails differently. In IE, immediately after the swap happens an error message pops up which mentions the publisher not allowing the action in an iFrame. In Firefox the tab just goes blank with no error message.
My script is below. As I stated, I am new to coding for Facebook and working with Javascript as I am a designer and not a programmer, but am eager to learn.
Thank you in advance for your thoughts and ideas.
function showhide(layer_ref) {
var thisDiv;
// check to see if any DIVs are currently showing
var divlist = ["div1","div2","div3","div4","div5","div6","div7","div8","div9","div10","div11","div12","div13","div14","div15","div16","div17","div18","div19"];
// loop through the list of DIVs in "divlist"
for (x = 0; x < divlist.length; x++) {
thisDiv = document.getElementById(divlist[x]);
// if the DIV is showing, hide it
if (thisDiv.style.display == "block") {
thisDiv.style.display = "none";
}
}
// show the appropriate DIV
thisDiv = document.getElementById(layer_ref);
thisDiv.style.display = "block";
}
If you try to change the things in iframe that could be a problem if the iframe is loaded from different domain. It is basically security rule - you don't want to allow rogue code to change/read/write things on the page other than it's own.
To answer your question better we need to know where is changing javascript is located and what it tries to change (are those two things loaded from the same domain or not).
The script itself looks ok to me.
I have a window I'm opening with a Javascript function:
function newwindow()
{
window.open('link.html','','width=,height=,resizable=no');
}
I need it that once the new window opens that the focus returns to the original window.
How can I do that?
And where do I put the code - in the new window, or the old one?
Thanks!
This is known as a 'pop-under' (and is generally frowned upon... but I digress).. It should give you plenty to google about
You probably want to do something like:
var popup = window.open(...);
popup.blur();
window.focus();
Which should set the focus back to the original window (untested - pinched from google). Some browsers might block this technique.
After calling window.open, you may try to use
window.resizeTo(0,0);
window.moveTo(0,window.screen.availHeight+10);
this way can not really open window in background, but works in similar way. Chrome works fine, did not try other browser.
If Albert's solution doesn't work for you and you actually want the window visible, but to be opened behind the current window, you can try opening a new tab in the opener window and closing it right away, this will bring the focus back to the opener window.
window.open('link.html','','width=,height=,resizable=no');
window.open().close();
However, I believe whether the second window opens in a tab or a new window depends on your browser settings.
Please don't use "pop-unders" for evil.
You can use either
"blur" or
"focus" to do that required action.
"blur"
function newwindow()
{
var myChild= window.open('link.html','','width=,height=,resizable=no');
myChild.blur();
}
"focus"
function newwindow()
{
window.open('link.html','','width=,height=,resizable=no');
window.focus();
}
Put the code in your parentWindow (i.e. the window in which you are now)
Both will work.
tl;dr - in 2022 - ctrl/cmd clicking on a button and window.open(url, "_blank") in a javascript button handler's for loop will open multiple tabs in the background in Chrome.
I'm looking for this as of 2022 and none of the answers here worked (here and everywhere else I looked). My use case is clicking a button in a (progressive) web app which opens deep links to items in a list in background tabs (i.e. not "for evil").
It never occurred to me that ctrl/cmd + clicking on the button would open tabs in the background, but it does just as if the user clicked on an anchor tag itself directly - but only in Chrome. Combined with Chrome's relatively recent tab grouping feature, this can be very useful inside PWAs.
const isMozilla =
window?.navigator?.userAgent?.toString().toLowerCase().includes('firefox') ?? false;
for (let index = 0; index < urls.length; index++) {
const url = isMozilla ? urls.reverse()[index] : urls[index];
window.open(url, "_blank");
}
Note: I reverse() the array on Mozilla to get the order of newly created tabs as the user would expect them.
You can just use '_self'. It will be stay to the same page an
window.open(url, '_self');