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);
Related
I am trying to scrape a page to get data for web analytics. I'm on an ecommerce site and have made a dummy purchase. There's a transaction ID on the page but the html surrounding it is not ideal for scraping, the id exists in a unclassified tag with no classes, IDs or other useful attributes of the parent or parents parent.
So, I wnated to view source and ctrl+F the transaction id "123456" and see if it existed anywhere else in the dom.
But, when I view source I get a "confirm form submission" page and don't get to view the html behind the page.
Adding the Javascript tag too in case there's a magical way of searching through all global variables for the value of "123456" anywhere in those variables? If I found the ecommerce data in a global variable object it would be very convenient as opposed to scraping the HTML which, in this case, has few attributes to drill down into
You can just save whole page on your disk as HTML file. In Chrome you can just press Ctrl+S, select your destination and next edit saved file in some text editor.
I have a web page that draws data from several other local (same origin) web pages. I collect the data from these other web pages using XMLHttpRequest. I then use the DOM to parse out the needed data from each page. There is one piece of data that I would like to include in each of the other local pages (i.e., in the DOM for each of the other local pages), however, I don't want that data visible when the web page is viewed. (Visible in the source code is OK, just not in the rendered HTML). I can think of a couple of ways of doing that. However, I am not enammered with any of them. I'm wondering what suggestions others might have. Thanks for any input.
Some options:
The hidden attribute:
All HTML elements may have the hidden content attribute
set. The hidden attribute is a boolean attribute. When
specified on an element, it indicates that the element is not yet, or
is no longer, directly relevant to the page's current state, or that
it is being used to declare content to be reused by other parts of the
page as opposed to being directly accessed by the user. User agents
should not render elements that have the hidden attribute
specified.
The template element
The template element is used to declare fragments of HTML that
can be cloned and inserted in the document by script.
In a rendering, the template element represents nothing.
Comments
Depending on the semantics, you can choose one or another. Or even combine them:
<template hidden><!-- Hidden data --></template>
As you mentioned to get through AJAX request, it is in your control where to show or not.
Once you get the result through AJAX, you can store in your script to do some manipulation or show in HTML page itself with parent tag as visible false, so that end user cannot see (except Source code viewing).
What's wrong with a simple hidden div?
<div id="hiddenData" style="display:none;">...</div>
To be honest, it seems like the way you are passing around data is kind of a hack already, so I don't see any real need to be fancy.
I am building some dynamic HTML and push it to the element using below code, which is just working fine.
accordionHTML += '</v-accordion>';
var temp = $compile(accordionHTML)(self);
$('#MainMenuElement').html(temp);
But if I refresh the page, the dynamic content will just disappear. Is there anyway I can retain the element without using local storage? Also it will be helpful if some explain about this behavior, on why dynamic content is not holding onto like normal HTML to the DOM.
Thanks in advance!
After refresh your page is rerendered and default content (that you defined) is shown. You can define your controller in such way that it will check presence of dynamic content in cookies or local storage. There is no other way to share data between page loads in a front-end app
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.
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.