Passing a variable to an iframe window in jQuery - javascript

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.

Related

How to update or manipulate content loaded in iframe from parent?

I am trying to create some editor. What it does is I have several input fields in my current site, when user enter any word , I have seperate html rendered in iframe which is hosted separately which will have some title, subtitle and few other contents . so if user types in title input field. I want to update title in rendered html page located in iframe. please share what is the proper way to setup this scenario?
Tried to manipulate using DOM id, but its not very scalable and also laggy.
Currently checking websockets
I would assign every user an ID which is stored alongside their changes into a database. The iframe would display a php document which loads the values from the db and displays them as intended. On every change you simply reload the php with the corresponding id.
In this case, the answer is here yet: Loading a string if HTML into an iframe using JavaScript
You can do it with
document.getElementById('iframe').src =
"data:text/html;charset=utf-8," + escape(html);

Change People Picker in NewForm.aspx Share Point IFRAME

I am new to SharePoint and need some assistance. I have a webpage written in normal HTML and JavaScript with an IFRAME that contains a SharePoint page. When the webpage loads, it contains the user's name in a hidden field. I am trying to make it so when a person clicks a button on the webpage it sets the People Picker to the text input's value from my webpage (the user's name). I tried to pull the ID of the textarea element of the SharePoint People Picker in the IFRAME and use normal j Query to set the value of the textarea of the People Picker, but it doesn't work. Any ideas? I am trying to input it on NewForm.aspx.
In the Webpage, I have a hidden input with the id 'hiddenUser' that pulls the SharePoint user's name in this format = 'Jackson, Joseph'. That works fine; although, I am not sure if that is the best way to do it. Assuming the hiddenUser input has a value, this is what I was using to try and set the People Picker:
var userPosting = $('#hiddenUser').val();
$('#newForm').contents().find('#ctl00_m_g_ffa4fb44_5605_472f_b10f_ba47d0267de5_ctl00_ctl04_ctl19_ctl00_ctl00_ctl04_ctl00_ctl00_UserField_downlevelTextBox').text(userPosting);
'newForm' is the ID of the IFRAME on my webpage. I also tried .val instead of .text and it didn't work. Any suggestions? There are multiple People Pickers on the SharePoint form.
It's possible for an embedded page in an iframe to talk to the containing parent page, but the parent page can't talk to the child unless the child explicitly allows it. JavaScript in the embedded page can refer to a parent object.
Check out this similar answer:
There is a way. When the page in the iframe loads, have it do the following
parent.childGetElementById = function (id) {return document.getElementById(id);}
parent.childLoaded();
This will make a function in the global scope of the parent page (that contains the iframe). Then in the parent, just have the following
function childLoaded() {var dom = childGetElementById('someid');}
This is along as you have control of the page your loading into the iframe... if you do not, you are out of luck.

Jquery window.location to new page but also open a div originally set to display none

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

Copy text from current document to new window.open("otherdomainURL")

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.

Linking to a page and expanding a topic with Javascript

I want to link to a page which contains multiple support topics.
When the user clicks on the link while being on an external site, the topic should be expanded as soon as the user arrives on the support page.
Example:
I link to this page
http://www.nintendo.de/NOE/de_DE/support/nintendo_ds_lite_159_142.html
Topic I want to be opened on arrival
javascript:fadeNAppearDiv('box_3_9277');
(First topic in the FAQs)
It's not clear if you are maintaining the target site (where the div will open) or not. If you don't have access to the code for that page, then there isn't any way to invoke the javascript function on it. If you can modify that page, you can do as #PhiLho suggests and modify the URL you are using to specify the DIV to open and have an onLoad handler that parses the URL and opens the appropriate DIV.
Good idea, but I don't see the question... :-)
The way I saw on some sites, like deviantART, is to use the sharp anchor notation: myURL.com/foo/page.html#TopicToExpand
JS can analyze the current URL and get the anchor part, then do whatever you need to do to highlight/jump to the right place.

Categories

Resources