I have a form on my jsp,
<form action="test1_action" name="test" method="post" id="test">
also I have two different link link1, link2 here,
onclick of link1 I should submit test1_action action
$('#link1').click(function() {
document.forms['test'].action='test1_action';
document.forms['test'].submit();
});
This works perfect for me.
what My expectation is when I click the second link popup should open with different action something like follows below.
$('#link2').click(function() {
document.forms['test'].action='**different_action**';
document.forms['test'].submit();
});
You are using jQuery so there is no need for manual DOM traversal:
$('#link1').click(function() {
$('#test').attr('action', 'test1_action').submit();
});
$('#link2').click(function() {
$('#test').attr('action', 'test2_action').submit();
});
The action attribute defines the page to which the form sends its contents, most commonly a page that interfaces with the server in some way (PHP, JSP, etc.).
What do you mean by "popup"?
You can use window.open() to open a window with a specific name, and then use that name as the target for the form submit.
$('#link2').click(function() {
window.open("","test2win","directories=no,status=no,width=600,height=700,top=0,left=0");
$('#test').attr({
'action' : 'test2_action',
'target' : 'test2win'
}).submit();
});
I'm not sure that the above will work in all browsers though. If not, you might have to just forget the window.open() step and just submit the form with target=_blank and then set the size from within the page being returned from the submit.
Related
I'm building a simple PHP app that will hopefully allow a document path to be inserted into a form field from a popup.
In my form there is a button that will open a javascript popup box. This box loads a list of documents. I would like to have a link or button next to each document that when pressed in the popup window, inserts the file path into the parent page's form field.
Is this even possible? If so, I assume this has to be done through javascript. Unfortunately, I'm not very versed in JS and as such I'm having a hard time finding a solution.
Easiest way to do this (at least for me) is with jQuery:
Parent page html:
<a href='#' id='pop'>Popup</a>
<input id='path'></input>
<div id='popup'></div>
<script src='jquery.js'></script>
<script>
$('#pop').click(function(){
$.get('load_form.php',function(data){
$('#popup').html(data);
});
});
$('#popup').on("click","a",function(){
var path=$(this).href();
$('#path').val(path);
return false;
});
</script>
The child page that generates the popup should have anchor tags with href to the document you want to call.
After submiting a form, a new page should open to be printed as pdf.
But by doing it like that <form action="page.php" method="POST" target="_blank"> the form with all the information still exists which is very, very bad. Instead of still showing the page with the form, I would now like to load another page within this windows/tab AND open
the print-window. With php and headers it's not possible, but with javascript should be right?
But how? I'm not used to javascript, so I have no idea how to handle this problem, but do you have an idea?
You can attach an onsubmit event to the form, f.ex:
document.getElementById('form').onsubmit = function() {
window.location = '/anotherpage.html';
}
This assumes that the form has an ID of "form".
On page1.php I have a click event that causes the user to be redirected to page2.php. It goes something like this:
$("#someButton").click(function() {
window.location = "page2.php";
});
And that works great. But what I really want is to open a hidden, UI-blocking <div> on page2. The user can already open this <div> manually by clicking another button on page2, that goes something like this:
$('#someOtherButton').click(function() {
$("#pageContainer").block({message: $("#theDivIWant2See")});
});
Can I make a click event from the JavaScript on one page call the JavaScript on another? Or will I need to add in some HTML-parsing to pass information between pages? (I'm not looking for a JavaScript hand-out here, just a strategy to help me move forward.)
When you redirect from the first page, add a querystring value in your url. and in the second page, using your server side page language, set in in a hidden field and in the document ready event check the value of that hidden field. If the value is expected, call a javascript function to show the popup.
Some thing like this
$("#someButton").click(function() {
window.location = "page2.php?showpopup=yes";
});
and in page2.php set it (forgive for errors, i am not a php guy)
<input type='<?php $_GET["showpopup"] ?>' id='hdnShow' />
and in the script
$(function(){
if($("#hdnShow").val()=="yes")
{
//Call here the method to show pop up
}
});
You need to do your stuff when DOM for page2 is ready. You can use jQuery's ready function for that.
$(document).ready(function() {
// put code for showing your div here
});
Hope that helps.
Could you pass a query string argument or assign a cookie that the other page could then check when the document loads? If the value exists then present a modal dialog (e.g. jQuery UI Modal Popup)
http://jqueryui.com/demos/dialog/
I have a test page here: http://www.problemio.com/test.php
and if you press "Click To Test Signup" you get a form. If on that form, you click "Log In" it recognizes that you clicked that, and opens the login form.
But the problem is that on the login form, if you press "create profile" it actually goes to the url of the href tag and not to the jQuery click event.
My quetion is what is the best practice of doing this? I hered of something called "prevent default behavior" but not sure how/when it should be used.
I am guessing that if the user has JS disabled, they should still be able to log in. How can I set it up so that users can log in and make accounts in the jQuery way first, and some default way if they have JS disabled?
Thanks!
You can do this with pure jQuery with
$("#createprofilelink").click(function(event) {
event.preventDefault();
{create profile logic}
});
more details of this can be seen in the jQuery documentation http://api.jquery.com/event.preventDefault/
Edit: I removed this because of #maxedison comment that it stops the jQuery event from firing but I have just tested this and the jQuery event fires but the link does not go to the address.
<a id="thelink" href="http://www.google.com" onclick="return false;">the link</a>
<script>
$('#thelink').click(function(){alert('alert me');});
</script>
As for the JS being disabled part of the question the link really should point to to a real form to fill in, as Taryn East correctly says, so the user gets the same functionality even if the user experience is lower by not using JavaScript.
You could even go down the noscript route
<noscript>
<div>Your user experience would be far improved if you
enable JavaScript but if you insist,
Click Here to create your profile</div>
</noscript>
To fix you link-gazumping problem, indeed, as #kamui says, use return false;
But as to your JS-disabled question - point the href at a real URL -> preferably the same URL as your JS-enabled stuff - or the same form, but in a new window.
I could not follow the link due to firewall restrictions on my side but...
You'll want to use whats called unobtrusive javascript.
http://en.wikipedia.org/wiki/Unobtrusive_JavaScript
This means if JS is available it will use it, if not continue working as plain html.
using jQuery you would first attach the click event to your button in the $.Ready() method.
<a id='btnTest' href='login.html' />
$(document).ready(function () {
// Attach click event to btnTest
$("#btnTest").click(function (e) {
// do logic
return false; // Returning false here will stop the link from following login.html.
});
});
Hope this helps.
I'm using the jQuery dialog plugin.
The dialog div is set up (but not opened) on page load:
$(document).ready(function(){
$('#foo').dialog({autoOpen:false});
});
Then a hyperlink is supposed to open the dialog:
Show dialogue box
But this opens the dialog then a fraction later redirects to a page with the URL javascript:$('#foo').dialog('open');!
I have tried returning false:
Show dialogue box
But then the link doesn't respond at all when I click on it.
I know this must be to do with one of JavaScript's infamous subtleties but I can't work it out.
Can anyone help?
Then a hyperlink is supposed to open the dialog:
Show dialogue box
But this opens the dialog then a fraction later redirects to a page with the URL javascript:$('#foo').dialog('open');!
That shouldn't be happening. The pseudo-protocol javascript: doesn't involve a page load, and certainly not one via HTTP. I don't recommend it (I'd use jQuery's click handler instead), but it should work.
I have tried returning false:
...
But then the link doesn't respond at all when I click on it.
That also shouldn't be happening.
Your code as quoted is fine (works here, for instance: http://jsbin.com/inixa5), so the problem must lie in some other part of the page.
Update: Okay, that's weird, IE6 and IE7 didn't like that; I think it's because dialog returns a value. You can get around that either by wrapping up your call to open the dialog in a function and doesn't explicitly return anything:
Click Me
<script>
$("#foo").dialog({autoOpen: false});
function showDialog(selector) {
$(selector).dialog('open');
}
</script>
Or (and this is mega-hacky) by making sure the last expression in the javascript: block is undefined:
Click Me
<script>
$("#foo").dialog({autoOpen: false});
</script>
Or by using onclick:
Click Me
<script>
$("#foo").dialog({autoOpen: false});
</script>
But in any case, strongly recommend hooking things up with a DOM2 style event handler:
<a href="#" name='openSesame'>Click Me</a>
<script>
// This _can_ be immediately after the anchor, but I'd put it in
// a separate, since .js file for the page that you load just before
// the closing body tag.
$("#foo").dialog({autoOpen: false});
$("a[name=openSesame]").click(function() {
$("#foo").dialog('open');
return false;
});
</script>
Live example (Obviously, you can use any selector that makes sense, you don't have to give the anchor a name [or id].)
One of the nice things about this is that you can then have the anchor take the user somewhere meaningful and/or useful if JavaScript is disabled (something called progressive enhancement).
Change the link to:
<a href="javascript:void(0)" onclick="$('#foo').dialog('open')">
Show dialogue box
</a>
Best avoid putting javascript in the href.
Even better would be giving it a class and than adding a click event to it through jquery.