We Keep Coding

How to close color box popup on browser back button

I want to close my color box popup on browser's back button click.
I used an iframe and inside the iframe there are many links. When user click on particular link then a color box popup will open.
Currently after opened the popup if user click on back button then popup is not closing.
So i want such a functionality that if user click on back button then popup will be close and also page should not go to back (Disable back button).
I have used the following code but it's not working for me.
<script>
$(document).ready(function() {
function disableBack() { window.history.forward() }
window.onload = disableBack();
window.onpageshow = function(evt) { if (evt.persisted) disableBack() }
});
</script>
Please give me any suggestion to close the color box popup on back button or disable the back button completely.

You should use window.location.hash, and window.onhashchange.
Basically, after popup open, you change hash to something (like window.location.hash = "popup_opend").
Then when user clicks back, that back click will remove the hash you just added.
You just need to handle window.onhashchange to check for that and close the popup.
Of course, hope you don't have any other code that manipulate the hash.

Javascript alert() in a pop up window

I have an anchor tag whose click event calls a JavaScript function, which opens a pop up window.
Now when the user clicks the close button of the pop up window I want to generate an alert(), which asks whether the user wants to close the pop up window or not
Using the below code the alert is generate in the parent window rather than the pop up
<script>
function openForm()
{
var new_window = window.open('file:///C:/Users/Tejora/Desktop/test.html','popup''width=825,height=585,scrollbars=yes,resizable=yes,toolbar=no,directories=no,location=no,menubar=no,status=no,left=50,top=0');
new_window.onbeforeunload = function(){
alert("Are you sure you want to close the window"); }
}
</script>
Click
Thanks in advance...

When a string is returned from the onbeforeunload handler, the browser will display a confirmation dialog with that message. Replace this line:
alert("Are you sure you want to close the window");
With this:
return "Are you sure you want to close the window?";
Here is the relevant documentation.

"onclick" of a button in a popup works only once

I have an html/php webpage (the file is called searchresults.php) that imports jquery mobile. When you enter the page, the url is usually something like
www.domain.com/searchresults.php?&sort="off"&max="5"
In this example sorting is off and only 5 items are displayed. On that page is a button that opens a popup where I want the user to be able to change these settings. I use the built-in jquery mobile popup. On that popup you can toggle "sort" on/off and you can enter a new maximum. On the popup is an "ok" button to confirm your new settings. It looks like this:
OK
The sortAgain(); function in javascript looks like this:
function sortAgain();
{
//some code to get the necessary variables//
...
//change the href of the button so you reload the page
document.getElementById("okbutton").href = "searchresults.php" + "?keyword=" + var1 + "&sort=" + var2 + "&max=" + var3
}
So, basically, right before the "ok" button navigates to another page, I set its href of the page where it should navigate too.
This scheme works, and the searchresults.php file is fetched again from the server and re-interpreted (with the new variables in the url).
However, if i try to change the settings again after changing it once, the popup just does nothing! In other words, the href of the ok button on the popup stays empty and the javascript function sortAgain() is not called. I don't understand why it calls the onclick method perfectly fine the first time, but then refuses to call it again?
I assume it has something to do with the fact that the popup html code is an integral part of searchresult.php file, and that hrefing to the same page gives problems? The popup is pure html, no php is involved in the popup code. and again, it works fine the first time.

You should check out how to attach events via JavaScript. See here: javascript attaching events

You need to use the "pageinit" event when setting up click handlers in JQM: http://api.jquerymobile.com/category/events/
Here is an example of how to bind click handlers when the page is first loaded.
$( document ).on( "pageinit", "#that-page", function() {
$('#okbutton').on( "click", "#that-page", function( e ) {
$(this).attr("href", "searchreslts.php");
});
});

How to close colorbox window after submit, and refresh image on parent page?

I am using colorbox for a modal display, which opens for the user when clicking on an image to update it. Once the user uploads a new image and hits submit on the colorbox modal, the modal should close and refresh the image on the parent page.
I am using the following onClick event within the submit button:
<input onClick='window.parent.location.reload(true);' type='submit' value='Submit' name='save_button' id='save_button'>
This closes the modal and refreshes the parent page.php. But for some reason, it does not refresh the old image to show the new image the user just uploaded.
EDIT: Added Colorbox Code
The script that calls the color box was conflicting with other javascript code, so I added the following script above the colorbox code, and changed the $ to jQuery in the code:
<script>jQuery.noConflict();
jQuery(document).ready(function(){
jQuery("iframe").hide();
});
$('input').hide();
</script>
<script>
jQuery(document).ready(function(){
jQuery(".iframe").colorbox({iframe:true, width:"748px", height:"92%"});
});
</script>
Any ideas?

The browser creates a cache for faster browsing and if your image src[location] is the same after your page refresh, the browser shows you the previous copy of the image. You have to change target of the the image src attribute each reload or do the same via a function, like this:
$('img').each(function(){
$(this).attr('src',$(this).attr('src')+Datetime.now());
});

Here is the code, specific to colorbox script, which ended up working for me. I added onClosed:function(){ location.reload(true); } in the last part of the script below:
<script>jQuery.noConflict();
jQuery(document).ready(function(){
jQuery("iframe").hide();
});
$('input').hide();
</script>
<script>
jQuery(document).ready(function(){
jQuery(".iframe").colorbox({iframe:true, width:"748px", height:"92%", onClosed:function(){ location.reload(true); } });
});
</script>
Then I added the onClick event inside the submit button code:
<input type='submit' value="Submit' onClick='parent.jQuery.fn.colorbox.close();'>
This closes the colorbox modal while refreshing the parent page, along with the image for all current versions of FF, IE, Opera, and Chrome. It refreshes page, but not the image in Opera.

Very likely the image is cached in the browser, give your image control an ID and call window.parent.document.getElementID("image").src += "?" + [some random number, or maybe the miliseconds]; this will cause it to go back to the server for and reload the image.
EDIT
more fleshed out script:
<script language="javascript" type="text/javascript">
function onSubmitClick(){
parent.jQuery("#img")[0].src += "?" + Math.floor(Math.random()*1001);
//note the above will append a random number between 0 and 1000 to the src.
parent.jQuery.colorbox.close()
}
</script>
<input onClick='onSubmitClick();' type='submit' value='Submit' name='save_button' id='save_button'>
<img src="pic.jpg" id="img">
I also realized a failing in my suggestion is that when the page is reloaded it's just going to load the same image from cache again. So this script is written without the page refresh.

Titanium titlebar button to toggle about screen

Trying to get a button working in the titlebar is becoming a little difficult. At present the button opens when clicked (calls a window with a webview), and closes when an html button is clicked. But only once. The issue is that after the window is closed, the titlebar button seemingly wont reopen the window...
This is probably a simple error, but one i'm having difficulty finding an answer to.
My app.js:
var infoBtn = Titanium.UI.createButton({
title:'Info'
});
// ABOUT
var win0 = Titanium.UI.createWindow();
var webview0 = Titanium.UI.createWebView({url: 'about.html'});
infoBtn.addEventListener('click', function() { win0.open(); });
Ti.App.addEventListener('closeAbout', function() { win0.close(); });
win0.add(webview0);
win0.hideNavBar();
My about.html:
<head>
<script type="text/javascript" charset="utf-8">
function closeAboutBtn() {
Ti.App.fireEvent('closeAbout');
}
</script>
</head>
<body>
Return to App
</body>
Would anyone have any ideas on how to fix so the about button shows the content when pressed every time?

First quick response would to be just "hide" the window instead of closing it.
verified:
The only way I was able to consistently get he window to hide and show is as follows
// listener assigned to info button
infoBtn.addEventListener('click', function() {
Ti.API.log('info button clicked, show window');
win2.open();
win2.show();
});
// Listener assigned to close in about window
Ti.App.addEventListener('closeAbout', function(data) {
Ti.API.log('info button clicked, close window');
win2.close();
win2.hide();
});