On click of anchor tag I want to close the current tab and redirect to a new URL in new tab. I want this functionality to work for IE,mozilla,firefox and safari .Can anyone please provide me the javasciprt for the same . The reason i am trying something like this because i donot want users to click back button of the browser and get back into the site . Thanks
This code utilizes jquery to accomplish the task; it can be done in plain vanilla javascript as well. It should work across all (at least the more modern) browsers.
<script>
$(function(){
$("#open").click(function(){
window.open(window.location.href);
});
$("#openandclose").click(function(){
window.open(window.location.href);
window.close();
});
});
</script>
<a id="open">Open New Window</a><br />
<a id="openandclose">Open New Window and Close Old Window</a>
Related
I'm using a "Bounce" web page that is linked from a text message to open my app. The "Bounce" web page essentiall does this:
<script type="text/javascript">
window.location.href = "appname://location";
</script>
and works great if the appname:// protocol scheme is registered. But if it is not, an error message is displayed to the user:
Cannot Open Page
Safari cannot open the page because the address is invalid
Any ideas on how to attempt to do this redirect, but not show an error if its not working?
There's only a hacky javascript method to make it 'work', the invalid popup will still appear but will shortly disappear if the app is not installed, and take them to a different url
document.location = "appname://location";
setTimeout(function(){
document.location = "http://google.com";
}, 50);
The new way to do this is apparently Universal Links
In my Grails application, a user can click on a g:link which will call my controller to export certain data to a CSV file. This works with no problems.
I then moved that button to a jQuery dialog box and, when the button is clicked, I use
${remoteFunction(action:'export', onSuccess:'closeMe();', id:courseInstance?.id)}
to call the same controller method and close the dialog box. I've confirmed that the method is actually called, and the dialog box closes. The user is not prompted with the CSV dowmload, however. I'm assuming this has something to do with the remoteFunction, but I'm not really sure. Can anyone explain why this might happen, and a potential fix?
Thanks!
With AJAX requests you can't handle to download content as attachment and so it can't trigger the Save As dialog.
There are a couple of workarounds for this:
Use a plain g:link as before and bind the 'closeMe();' function to the 'click' event. The problem is that you have no control on error or success response.
Use an iframe: You can create a temporary invisible iframe and set its location to the URL of the file to download. It also has the backside of not controlling the success/error response.
The code could be the same as in this answer:
<script type="text/javascript">
function downloadURL(url) {
var iframe;
var hiddenIFrameID = 'hiddenDownloader';
iframe = document.getElementById(hiddenIFrameID);
if (iframe === null) {
iframe = document.createElement('iframe');
iframe.id = hiddenIFrameID;
iframe.style.display = 'none';
document.body.appendChild(iframe);
}
iframe.src = url;
}
</script>
And the link
Export
I have a list of files and in the end of each li-element I got a button, which looks like
<div class="settingsBtn"></div>
In the dialog I got a form. A want to submit some data and then close dialog. To be honest I think I'm missing something simple, the submit works but I don't want to load any html data on the php side, I just want to close the dialog.
I accomplished this but enable ajaxform plugin and I handle it manually:
$(document).delegate("#myDialog", "pageinit", function() {
$('#myForm').submit(function() {
$(this).ajaxSubmit({
success: function() {
$('.ui-dialog').dialog('close');
}
});
return false;
});
});
But it seems like a wrong solution. I don't have an ajax loader picture, and the jquery mobile framework has everything for ajax handling, but I didn't find how to close the dialog =(
I'd appreciate any help, thanks.
I have a few links on my site that will need to show a modal dialog when the user clicks on one of them. The modal will contain a message like: You are now leaving the "SECTION NAME" part of "SITE NAME". The user will then either accept which will allow the user to continue on with their request or cancel which will keep the user where they are.
An example of a link would be: My Interests
So as you can see the class of leaving-section would cause the link to do what I have specified above, and will also open the link in a new tab/window BUT the user must first accept that they are aware they are being taken to another part of the site.
I have looked at the docs but I haven't seen any examples where a) the dialog is created on the fly rather than hiding and showing a div and b) allowing the user to confirm and being sent to their original location i.e. the url which they clicked.
This is what I have so far:
$("#leaving-section").dialog({
resizable: false,
modal: true,
buttons: {
"I understand, take me there": function () {
$(this).dialog("close");
},
"I want to stay where I am": function () {
$(this).dialog("close");
}
}
});
$('.leaving-section').click(function (event)
{
event.preventDefault();
var $dialog = $('#leaving-section');
$dialog.dialog('open');
});
But I want to the modal to be created by jquery instead of the div being embedded in the page! Also how do I get the first button to send them off to their original destination?
Thanks to all who can help. Thanks
I just had to solve the same problem. The key to getting this to work was that the dialog must be partially initialized in the click event handler for the link you want to use the confirmation functionality with (if you want to use this for more than one link). This is because the target URL for the link must be injected into the event handler for the confirmation button click. I used a CSS class to indicate which links should have the confirmation behavior.
Here's my solution, abstracted away to be suitable for an example.
<div id="dialog" title="Confirmation Required">
Are you sure about this?
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#dialog").dialog({
autoOpen: false,
modal: true
});
});
$(".confirmLink").click(function(e) {
e.preventDefault();
var targetUrl = $(this).attr("href");
$("#dialog").dialog({
buttons : {
"Confirm" : function() {
window.location.href = targetUrl;
},
"Cancel" : function() {
$(this).dialog("close");
}
}
});
$("#dialog").dialog("open");
});
</script>
<a class="confirmLink" href="http://someLinkWhichRequiresConfirmation.com">Click here</a>
<a class="confirmLink" href="http://anotherSensitiveLink">Or, you could click here</a>
I believe that this would work for you, if you can generate your links with the CSS class (confirmLink, in my example).
I think this plugin may be help
http://jqueryui.com/demos/dialog/#modal-confirmation
Heres an example of how you can do it:
http://jsfiddle.net/yFkgR/3/
Or to do something besides cancel
http://jsfiddle.net/yFkgR/4/
You can just define your own buttons. You can style the dialog box anyway you want, i just used the default.
also to use ajax to load the html you can take a look at:
jQuery UI Dialog window loaded within AJAX style jQuery UI Tabs
There is an open option you can use to load html from a remote web page. I jquery you can create a div just be doing
$("<div>");
it will create the closing tag too. Or as suggested in the post you can also use
$('a.ajax')
I'm loading a customer info page using jQuery. There's a list of customers with a link next to it:
View
That triggers this function:
function load_customer(id) {
$("#dashboard").load('get_info/' + id);
}
That works perfectly. On the page I'm loading, I have a jQuery UI modal dialog form for adding new information.
<div id="addinfo">
<form><input type="hidden" name="customer_id" value="<?php echo $c->id; ?>" /></form>
</div>
My javascript:
$("#addinfobutton").click(function(){
$("#addinfo").dialog("open");
return false;
});
$("#addinfo").dialog({
autoOpen:false,
width:400,
height:550,
modal: true
});
When you select a customer the first time, it populates the hidden field correctly, but then it stays the same even after selecting other customers.
I thought that by loading a new customer page, the form would reset as well... but apparently it's being stored/cached somewhere. If I echo the ID anywhere else in the page, it shows correctly... just not in the "addinfo" div.
Any help/suggestions would be appreciated! Thanks!
JQuery dialog's dont reload the content for you when you open them. I tend to have an AJAX call replacing the content of the div that the dialog is on (or tweakng some values in it) when the dialog is opened.
If you want a hidden field, then I wouldn't put it within the dialog, you should be able to retrieve the value from outside the dialog.
After some more researching, it seems the dialog is being cached client-side after it's called. So to get around that, I just added the customerId to the end of the popup div's ID name... so each customer page will have a unique dialog ID.
However, if it's caching each of those dialogs, won't there be a performance loss if you open quite a few? How can you clear them without having to do a full page refresh?
I guess if the #addinfo div is updated it should capture the new content...anyway this would destroy the dialog after closing it to insure a new instance will be created:
$("#addinfobutton").click(function(){
openDialog('#addinfo');
return false;
});
function openDialog(elm) {
$(elm).dialog({
autoOpen:true,
width:400,
height:550,
modal: true,
close: function() {
$(this).dialog('destroy');
}
});
}