We Keep Coding

How to get Chrome to throw exception when changing url if it fails

I have a reference to a new window opened with js
var theNewTab="";
theNewTab = window.open(theURL, 'winRef');
then I change the url in the as the user clicks on another link in the parent window using
theNewTab.location.href = targetLink;
theNewTab.focus();
The problem i'm having with chrome that id doesn't throw exception if the the window doesn't exist anymore "closed" unlink FF & IE which im using to open the window again.
try {
theNewTab.location.href = targetLink;
theNewTab.focus();
}catch(err) {
theNewTab = window.open(theURL, 'winRef');
theNewTab.focus();
}
PS: I tried to use "window.open" every time but if the window already open, id does not reload the page or it does but it doesn't re-execute the script I have in document ready I think.

I'm not sure what you need.
<script type="text/javascript">
var theNewTab = null;
function openNewTab(theURL) {
if (theNewTab == null || theNewTab.closed == true) {
theNewTab = window.open(theURL);
} else {
theNewTab.location.href = theURL;
}
theNewTab.focus();
};
// use the function when you need it
$('a').click(function() {
openNewTab($(this).attr('href'));
});
</script>
Is this example helpful for you?

Show hidden div in page after clicking link to open the page

I have an HTML page in which a hidden div becomes visible when a button is clicked. Something like this:
$('#display').click(function(){
$('#itemList').removeClass('hide');
...
})
On another page, there is a link which when clicked takes the user back to the earlier page, and the element with id='itemList' on that page has to become visible. The code is something like this:
<a href='firstHTML.php'> View items</a>
I am not sure what else to add to the code to make the other page appear with the previously hidden element visible. Can somebody help please?

One of the most probable solution is localStorage .Where as you may also implement Cookies or string query to pass value to other page.
I am showing the use of localstorage , you may store the id in localStorage on click of anchor as below
<a href='firstHTML.php' data-showId='itemList'> View items</a>
Now bind event on anchor
$("[data-showId]").bind('click',function(){
var idToShow=$(this).attr('data-showId');
if(idToShow)
store('visibleId', idToShow);
});
Now all you need to define these functions .
function setup() {
var tmp = get('visibleId');
if (tmp)
showDiv(tmp);
}
function showDiv(cls) {
$("#"+cls).removeClass('hide');
}
function get(name) {
if (typeof (Storage) !== "undefined") {
return localStorage.getItem(name);
} else {
window.alert('Please use a modern browser to properly view this template!');
}
}
function store(name, val) {
if (typeof (Storage) !== "undefined") {
localStorage.setItem(name, val);
} else {
window.alert('Please use a modern browser to properly view this template!');
}
}
Now call setup() on dom ready..

First of all, I would use the jQuery function to hide/show the List instead of using an own CSS class for it:
$('#display').click(function(){
$('#itemList').show();
...
})
Then a possible approach for your problem could be to use a get Parameter for this, for example:
<a href='firstHTML.php?list=show'> View items</a>
And with jQuery
Create a helperfunction (Taken from Get url parameter jquery Or How to Get Query String Values In js):
$.urlParam = function(name) {
var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
if (results==null){
return null;
}else{
return results[1] || 0;
}
}
Read out the property:
var listStatus = $.urlParam('list');
Unhide the list in case it should be shown:
$( document ).ready(function() {
if(listStatus == 'show') {
$('#itemList').show();
}
});

How to close html dialog in Android on press of back key

I have created a webview in Android in which i am loading my html file.At the time of clicking a button i am displaying a pop up like alert dialog which is developed in html itself.
Now problem is as soon as i press back button on android phone,application is returning to previous page.But with identical behavior only dialog should be closed and application should be on same page.
How can i achieve it?
Thanks

I think you do not need the JavascriptInterface (as #Henil posted). I would do it like so:
in Java - onBackPressed:
if (webView.getUrl.equals("yourPopupUrl.com")) {
webView.loadUrl("javascript:goAwayPopup();");
return;
}
in JS:
function goAwayPopup() {
var popUp = document.getElementById("popUp"); // in my case popUp is just a <div>
var isVisible = popUp .offsetWidth > 0 || popUp .offsetHeight > 0;
if (isVisible) {
popUp.style.display = 'none';
}
}
EDIT:
Solution with JavascriptInterface:
in JS - function which is called when dialog popups:
function popUp() {
if (typeof Android != "undefined"){
if (Android.popUp!= "undefined") {
Android.popUp();
}
}
}
in Java:
define a inner class and a boolean field in your Activity
declare the bridge to your webview
override onBackPressed
private boolean isPopUpVisible = false;
// some code...
webView.addJavascriptInterface(new MyJavascriptBridge(), "Android");
// some code...
class MyJavascriptBridge {
public void popUp() {
if (isPopUpVisible)
isPopUpVisible = false;
else
isPopUpVisible = true;
}
}
onBackPressed:
if (isPopUpVisible) {
webView.loadUrl("javascript:goAwayPopup();");
return;
}
JS, again:
function goAwayPopup() {
// close alert here...
popUp(); // sets isPopUpVisible to false
}
Here is a post of closing a alert: How to "auto close" Alert boxes

Use java script interface and handle html page from that interface

Why doesn't this code get the URL from Safari?

I am creating a safari extension. When the user right-clicks on a link in safari, it should bring up the context menu. When the user clicks on "Get URL", it should open the clicked on url in a new window. I can't figure out how to get the url! It always opens "not found" instead.
injected.js :
document.addEventListener('contextmenu', handleContextMenu, false);
function handleContextMenu(event)
{
var target = event.target;
while(target != null && target.nodeType == Node.ELEMENT_NODE && target.nodeName.toLowerCase() != "a")
{
target = target.parentNode;
}
if(target.href)
{
safari.self.tab.setContextMenuEventUserInfo(event, target.href);
}
else
{
var foo = "href not found";
safari.self.tab.setContextMenuEventUserInfo(event, foo);
}
}
Global.html:
<!DOCTYPE HTML>
<script>
var lastUrl;
safari.application.addEventListener("contextmenu",handleContextMenu,false);
safari.application.addEventListener('command', handleCommand, false);
function handleContextMenu(event)
{
var query = event.userInfo;
lastUrl = query;
event.contextMenu.appendContextMenuItem("getUrl", "Get URL");
}
function handleCommand(event)
{
if(event.command === 'getUrl')
{
if (lastUrl)
{
safari.application.openBrowserWindow().activeTab.url = lastUrl;
}
else
{
safari.application.openBrowserWindow().activeTab.url = "not found";
}
}
}
</script>
How do I get the url? It always opens "not found" instead.

Why not just have var last url = event.userInfo in the handleCommand function? The userInfo should be defined at that point, and it should be more predictable that trying to set the value on the contextmenu event.

I don't understand why your code is not working, but there are a couple of things you might want to change anyway.
First, in the injected content script, if there's no target.href, don't bother calling safari.self.tab.setContextMenuEventUserInfo.
Second, in the global script, change your handleContextMenu function as follows:
function handleContextMenu(event) {
if (event.userInfo) {
event.contextMenu.appendContextMenuItem("getUrl", "Get URL");
}
}
That way, if the user didn't right-click a link, the context menu item won't be inserted.
Third, as Matt said, you don't need the lastUrl global variable, unless it serves some other purpose. You can refer to event.userInfo directly in handleCommand. And you don't need to check whether it's empty, because the context menu will only be inserted by handleContextMenu if it's not.
function handleCommand(event) {
if (event.command === 'getUrl') {
safari.application.openBrowserWindow().activeTab.url = event.userInfo;
}
}
Hope this helps.

window.self.close() not working

I opened a print window using window.print(). I tried using window.self.close(),
but I was unable to close that one. I am using Firefox. My idea was to close the window by itself if the user doesn't perform any action on it.
This is the code I am using for print window.
$('.click-print-paybymail').live("click", function (e) {
var amount = $('.amount-enclosed').val();
var ccnum = $('.credit-card-account-number').val();
var isAllow = true;
if (!isValidCC(ccnum)) {
isAllow = false;
}
if (!isValidAmount(amount)) {
isAllow = false;
}
if (isAllow) {
window.print();
}
});

You can not close the print dialog programmatically from javascript since it is not a browser window - its an operating system dialog.