I have a link which when clicked I open a window with window.open like below.
window.open("edit.jsp?clientId=" + clientId + "&eventId=" + eventId , 'height=600,width=800,scrollbars=1,location:no,menubar:no,resizable=1,status:no,toolbar:no');
I dont want the parameter to pass here instead I want to something like post so people cant copy url .
You cannot trigger a javascript popup and then force a post request.
Three options:
Trigger a POST form with target="_blank" using javascript (but this doesn't allow you to disable interface elements such as the menu bar).
Open a popup locally, but don't specify a url. Use the result of window.open to alter the document to generate a form, which you'd then post.
var myWindow = window.open("", "", "height=600,width=800,scrollbars=1,location=no,menubar=no,resizable=1,status=no,toolbar=no");
myWindow.document.write("Write a form here and then later on trigger it");
You really shouldn't do any of this. If it's bad for users to copy urls, there's a flaw in your application design.
Added after edit: Use the 'empty window' approach, but instead of writing a form and triggering it, do a an XMLHTTPRequest (with POST) in the parent. The result of this request can be used to populate the child-window.
Beside AJAX (jquery.load()), which I would use myself - how about the following approach:
<form method="post" action="edit.jsp" target="_blank">
<input type="hidden" name="clientId" value="88"/>
<input type="hidden" name="eventId" value="2"/>
</form>
target = _blank will actually open a new window /tab the posted data will be processed in.
Unfortunatelly you can hardly control the new windows appearance.
How about implementing a model popup window using a div? You can make an http post call to load the content of that div/model popup. You can use jQuery load() method to load the content of the div as well.
http://api.jquery.com/load/
Some other model popup plugins are here
http://jquery.com/demo/thickbox/
http://colorpowered.com/colorbox/
http://fancybox.net/
Related
I have a generic JS file-download function in an application which uses this template to send http POST requests to web handler (ASHX) and download files -
downloadFile(url) {
// other code ...
// creates these iframe & form element dynamically
<iframe name="X" id="X" onload="showErrorInCustomDialogBox()">
<form target="X" method="post" action="*encodedURL*" ></form>
// this is called after iframe & form elements are created
form.submit();
}
On a click of a button in the application, this code gets called and a dialog box opens up asking user a location to download the file. I want to call a function after the user has saved the file.
How can I achieve this same functionality using JS/jQuery and be able to call a function after file-download finishes? What options do I have here? I have tried using XHR but it didn't work out (see my other question).
If something's possible using these iframe + form elements that would be preferable because the way things currently work, when any error occurs during the download, the error message is loaded in the iframe, which is displayed in custom dialog box in the application.
I have a page where there is a form which is used to Add / Edit Addresses.
In the right section of the page, there is a saved address Which has Edit link and it gives call to the same page URL with adding a new parameter say "billingID.XXXXX".
After clicking on this link, page is re loaded with the default address data auto filled.
I need this to happen on the first time load. I tried triggering click event on this Edit link on load, but I suppose it is not allowed by jQuery.
What are the other options I have with jQuery / javascript to add this URL parameter on load of page.?
You could try the Javascript History API.
https://developer.mozilla.org/en-US/docs/Web/API/History_API
It depends on what you want to do, I didn't understand you quite clear.
If you need the page to be reloaded and show the page by url, you can get 'href' value by jquery and then call window.location = $('.mylink').attr('href') + '?billingID.XXXXX';.
If you just want to replace url in browser panel, you can use History API as Kahuna suggested. E.g. you can call
window.history.replaceState(null, document.title, window.location.path + '?helloworld=1');
but then you have to update the page contents by yourself, using JS and jQuery.
you can try this:
if(window.location.href == 'requestd page href'){//http://localhost/test/test.php
window.location.href += "?billingID.XXXXX";
}
This is legacy code.
I'm working on a project where we're using iframes to simulate AJAX.
Basically, we're using the target attribute to submit the <form> in an iframe, resulting in the request not opening a new tab. Also, we echo a <script></script> in the response from the PHP, and the result is executed since it populates the iframe.
Here's an example of such <form> :
<form id="form_to_submit" method="POST" action="ajax/createUser" target="iframe_name">
<input type="text" name="input_to_send">
<button type="button" onclick="$('#form_to_submit').submit()">Submit With Onclick!</button>
</form>
Nowadays, not only this looks evil, but it has one (perhaps others) huge pitfall. If one request is made through this process, and the client goes somewhere, and then goes back in his browser history, it'll send the request again.
To fix this last problem, there are many solutions. I think the one I prefer the most is to use real AJAX instead of iframes. Now, in theory, I could change every single form in the source code to make it use AJAX, but I know I won't have 1 straight week of work just for this purpose.
I'm looking for a "quick" way to intercept these requests before they're sent to the iframe, and send them with AJAX instead.
So far, I tried to target <form> tags which have a target="iframe_name" and listen to the submit event to then send the request again with a same method/URL/data.
$('form[target=iframe_name]').on('submit', function (event) {
event.preventDefault(event);
var url = $(this).attr('action'),
datas = $(this).serialize();
$.post(url, datas).done(function (response) {
eval($(response).text());
});
});
But that only works if they're submitted through a real click on a submit button. I'd say 95% of these cases are submitted through onclick tags which will .submit() the forms, and in these cases, the submit event won't trigger it appears.
I'm stuck, any idea ?
Note : I'm tagging jquery only to let you know it's available to be used, even though the question is still relevant with any lib/framework of JS.
You can actually remove the onclick attributes just by doing a general jQuery action on document ready:
<script>
$(document).ready(function() {
var getButton = $('form').find('button');
getButton.prop('onclick',null);
// put listener script here for new form submit (using ajax)...
});
</script>
This piece of code just does a general lookup on the page for all forms, finds the buttons, then removes the onclick attribute. Once you do this the form should not submit anymore with that inline javascript.
I would suggest this be temporary as you incrementally change the forms over time to natively work using the jQuery listener (like the other 5% of forms you have created with no onclick).
Firefox4 has a new feature → 【Prevent this page from creating additional dialogs】
But it was also a trouble with me when I hope an alert dialog opened more than once.
Now, A new problem has appeared ...like below ↓
1) I call the alert dialog more than once , and check the
【Prevent this page from creating additional dialogs】
2) I click a download button , My web application is down....
(my button' event is below.... and because it hasn't into the action , so I'm just write the client source....)
My Button Event
getDownloadFile:function(){
$('xform').submit();
}
My Page Code
<div style="display:none;">
<form id="xform" action="down.do" method="post" target="xfra">
</form>
</div>
<iframe id="xfra" name="xfra" src="/?scid=dummy.htm" style="width:0px;height:0px;visibility:hidden;"></iframe>
Hope anybody can help me ...thanks...
I am guessing the $ on your code means you are using jQuery (you should mention it in the tags if this is the case).
If you are not using jQuery, then I don't know much of the other frameworks' selectors. However, if it is jQuery, your selector is not correct, it should be:
$('#xform').submit();
not
$('xform').submit();
Since you are using PrototypeJS, the above is incorrect.
Here's a simple fix:
function myAlertMsg() {
alert("Whatever message you want");
location.reload(); /*This prevents the browsers pop-up disabler*/
}
What is target="_new"? Validator is raising an error..
How do you do this with jquery because Validator is raising an error.
On the same page, I have target="_new" and target="_blank". target="_new" is in that form code which i received from email newsletter company.
I'm using this for target="_blank"
$(function() {
$('a[href^=http]').click( function() {
window.open(this.href);
return false;
});
});
What should i do for target="_new"
Update: 1 min Ago
upon clicking on submit button i want to open a page in new window to pass validation how to do this in jquery as i'm doing for other external link.
update:
this is code
<form method="post" class="form-wrapper" action="http://sitename.com/form.php">
There is no such thing as target="_new". Using this will simply open the link in a new window called "_new". You might notice that clicking on a link with target="_new" will open a new window (or tab) but then a second link will open in the same window (or tab), rather than opening a second one as you'd probably expect.
Personally, I don't think you should be specifying target="_blank" at all - let the user choose.
target="_blank" is invalid in XHTML (actually, the entire target attribute is invalid). If you want a link to open in a new window (usually a bad idea, in my opinion) and validation is important to you, the only way to do it is with javascript (like you did).
This is an attribute for a(anchor) tag, which let you open the page on the same window or in a new window.