I would like to take a given text from a document and copy it to a pop-up window (window.open) that contains a form generated by a server-side back end (rails in this case) this form is loaded from a different domain that the present document, containing the text to be copied. This text would be displayed in the form (reviewed by the user) and then be submitted to the server, through a POST form action.
I initially wanted to use document.write() but this will not be possible since the pop-up page will be loaded from a different domain.
Query strings in this case will not help due to the limits on chars. Any other options?
Most modern day browsers support window.postMessage where you can pass information to the new window.
If you are working with older browsers, your best bet is to post a form to that domain's page with the content and that server will read the posted data and fill out the form.
You best bet will probably be to have a script in the popup window call for the text from the other screen. Rather than try and pass it to the popup window.
Use an ajax call to the main page and get the text for the text field and update the text field when you get it.
I think you should use zero-clipboard-rails. See zero-clipboard-rails on github.
If you can edit the page that is loaded in the new window then here s something you can do using JavaScript. Before opening the new window, set the copied text to a variable in the parent window.
var copiedText = 'text to be copied'; //e.g. $('#some-textarea').val()
Then load the new page. Inside the new page add a call to the 'opener' window's variable using
opener.copiedText
and use it to populate the form element.
Related
I have a form when on submit it will run two on-click events the first to redirect the window location to the new page and then the second to open the hidden div as below.
The issue is that it will load the new div in the source code and change it's status to display block but when it refreshes for the window location the function showDiv() is then hidden again. I'm sure there is a way to merge them both into one but I'm struggling.
function SetUpRedirect(destination)
{
setTimeout("window.location=\'/?page=4\'",1000);
return true;
}
function showDiv() {
document.getElementById('thanks').style.display = "block";
}
If I understand you right, the problem here is that you refresh the page. Once you refresh the browser loads a new DOM and forgets all about the old one and all the modifications you made to it. Changes you do to the DOM with JavaScript are not persistent over page loads.
So, how can you get around this? I can think of three options:
Alt 1. Use some kind of server side scripting, i.e. PHP, and pass the state of the div in the URL:
window.location = "/?page=4&display=block";
Then in the PHP (or whatever language you use), you need to read the value of display and handle it appropriately.
Alt 2. Set a cookie with JavaScript to signal that the div should be displayed, and when the page loads check if the cookie is present and adjust the display property of the div appropriately. You can read more about cookies in JavaScript here.
Alt 3. Design your page in such a way that a page load is not needed (for instance submitting the form with AJAX). This could require a major redesign, though.
This might help you with your problem. Since window.location will just reload the page and reset all the styles to the original form: How can I make a redirect page using jquery
I am writing an HTML application that passes a bunch of form elements along to a PHP script, that will run a Python script using those values.
The form element in my page looks like:
<form id="main-input" action="shell.php" method="post" target="_blank">
This opens a new tab, with the PHP script inside. It is an otherwise blank page, with no text on it (since there is asynchronous data display).
Since I do not want the user to mistakenly close this tab (since it would stop script execution) and also since it could cause other confusion, is there a way to make the new browser tab invisible, but still active, using HTML?
More to the point, is there a way to have an invisible broswer tab?
To answer your question, No you cannot have an invisible browser tag.
Ehm, just have an invisible iframe and post to it with form target.
It is not really an invisible browser tab, yet the most close you get to it - maybe an inline browser tab :)
<form id="main-input" action="shell.php" method="post" target="anyname"></form>
<iframe name = 'anyname' src = 'blubb.php' style = 'display: none'></iframe>
No need for AJAX so far and the nearest to your idea as possible.
Answer: No, there's no way that I know of to make an invisible browser tab (for security and annoyance reasons).
Suggestion: Instead of posting to another tab, you should submit a Post using ajax instead. Override the normal submit action of the form...
https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&es_th=1&ie=UTF-8#q=override%20submit%20form&es_th=1
... and then proceed to gather the form values and compile a Post request. Here's a jQuery reference to using Ajax...
http://www.w3schools.com/jquery/jquery_ajax_get_post.asp
Here's a more general JavaScript reference from W3 Schools:
http://www.w3schools.com/ajax/ajax_xmlhttprequest_send.asp
I have a form and I am using Javascript to validate the form so if you leave a field blank it will alert "Please fill in your Name".
If I go to the link directly, it works perfectly. But this is kind of like a Widget so I am using an iFrame to embed it into other sites. When I embed it, and click Submit with an empty field it says: The page at http://www.example.com says: Please fill in your name
Is there a way to get rid of that?
No, there isn't. It is an anti-phishing feature.
If you want a dialog without it, then you have to fake it using HTML elements in your page.
For those who are still looking to use the native alert/confirm, it's not that hard to get past the anti-phishing implementation. This is because the iframe can edit the parent and access it's scope.
Try this:
parent._alert = new parent.Function("alert(arguments[0]);");
parent._alert('Test!');
The reason this works is because new Function('') does not create a closure and instead uses the scope of where Function is defined (via parent.Function).
You can use some custom alert plugin. For example http://stefangabos.ro/jquery/zebra-dialog/
Im a bit of a noob to jquery and js so ill try be as informative as I can.
I am using facebox on my page and a link which opens facebox which in turn loads an iframe inside calling a source page for the iframe window.
Loaded into the iframe then is a page which contains a form. The form validates via script thats attached to the parent window calling the iframe & facebox. The validating works but what i want to do is pass a variable back to the iframe window upon validation.
The form i refer to asks the user to create a new photo album which then appends to a select box once created as indicated here: (ill keep it brief)
var albumname = form.albumname.value;
$(""+albumname+"").appendTo('#als');
document.getElementById('albumname').value='Enter a name for a photo album';
Can anyone tell me how to pass this correctly to the iframe window?
Everything else works including the last line of code that resets the album name text input field.
Many thanks in advance,
Wayne
If you want to manipulate the contents of your iframe you can use a selector similar to this.
$("div", nameOfIframe.document)
What you need to remember is that your iframe need to be in the same domain as your main page, or else it won't work.
I see this pattern used very often!
Click on a link
popup appears with a form
fill in form and submit
popup closes and main page populates itself with the form's data.
Any idea how this works?
Edit:
by popup I mean an actual window popup, rather than a modal window. A modal window could work nicely though I reckon.
Do you want something like this ?
http://jqueryui.com/demos/dialog/#modal-form
http://jqueryui.com/demos/dialog/modal-form.html
You can validate the form with js / jquery and then do an ajax call and post the data to the server
The only way to do this is with Javascript. Django's own admin includes a (fairly clunky) example: when you save the popup, it returns a response consisting of just a <script> tag containing Javascript which references the box in the parent form. See for example django.contrib.admin.options.ModelAdmin.response_add.
You can use somethign like facebox to create the popup. This requests a page to the server (your form). Once submitted, detect that the facebox was closed (see the API) and make a new ajax request to the server that will return the needed data to populate your page.