how to display another html file in div - javascript

I have this javascript code and this html code below. What I want to do is when I select an option in the dropdown list, the index.html file on the subfolder will be displayed on the div.
<script>
function display() {
var cake = document.getElementById("type").value;
document.getElementById("cakes").innerHTML = '<object type="text/html"
data="\'+cake+'\index.html" > </object>';
}
</script>
<body>
<center><img src="LOGO.jpg" size=20%></img></center>
<p><center><font face="Brush Script MT" size="32" color="lightblue"`enter code here`>YOU'RE SO
SWEETS</font></center></p>
<table>
<tr>
<td><img src="home.png"></td>
<td><img src="product.png"></td>
<td><img src="online.png"></td>
<td><img src="about.png"></td>
<td><img src="contact.png"></td>
</tr>
</table>
<br>
<select id="type" multiple onchange="display()">
<option value="special">Specialty Cakes</option>
<option value="adult">Birthday Cakes for Adult</option>
<option value="kids">Birthday Cakes for Kids</option>
<option value="wedding">Wedding Cakes</option>
</select>
<br>
<div id="cakes"></div>

You should use Ajax to load content in the Div. You can learn about ajax from any good tutorial. A starting point may be -
http://www.w3schools.com/ajax/tryit.asp?filename=tryajax_first
Update :
From your Comment, my understanding is -
You can make use of jquery and use the variation of following snippet in your code from any function which will be triggered in onchange event of the select. you need to attach the jquery library.
$('#your-div-id').load('your-html-page.html');
Thanks.

If you want to do the ugly way, you can use an iframe and change the src.
If you want to do the pretty way (which is kinda what most sites do nowadays), use Ajax to load the content into the div, specially because with Ajax the content will be really loaded into the div, while with iframe you will just open another HTML inside it, and if you eventually need to check stuff in/out of it, it will be a lot harder. Ajax would be my option (I never use iframe anyway)
If you don't know Ajax, I suggest either checking how prototypejs or jQuery implement it. It's easy and will give you better control over what you insert into the div.

Related

Need to display javascript value in anchor tag of jsp

I need to pass the userid variable through anchor tag .. Here I attached code for that.
Code :
<td colspan="2" align="right"><div align="center">User Id</div></td>
<td><input class="textbox" type="text" id="userid" ><a href="access.jsp?userid='+userid'"
"></a></td></tr>
Javascript :
var userid ="MK";// this value is getting fetched correctly using document.getElementByName
Just I need to display in anchor tag.How can I do this?
Please, try to be more clear with your Question.
You should show all related parts of your code so people can figure out what exactly you need.
Also Stackoverflow provides some markup so you can insert blocks of code - very useful, I recommend looking it up :)
Assuming you already have the anchor <a> tag
HTML
JS
// your code (fetching data) ...
document.getElementById('anchor').setAttribute('href', 'google.com?userid=" + userid)

Python Selenium view page source shows JavaScript but inspecting elements shows HTML elements

I'm trying to access links to attachments for a web automation project. The problem is that when I load the web-page via Chrome and inspect element, I can see HTML Code (divs and tables) but when I use the view source option, all I see is JavaScript functions.
Now when I try to access an element via selenium(which has access to source, the JavaScript Code) I can't find any element there. I cannot explicitly find the mention of iFrames, but I think the iFrames that contain this information are being loaded by the JavaScript Code. Is there a way to get access to the underlying HTML to find the elements and get access to the links?
NOTE : When I try to view the page source which is a collection of JavaScript functions, there are no links to a frame which can be followed to get the required HTML.
For context :
The inspect element looks like :
<div id="SectionAttachments">
<table summary="" border="0" cellspacing="5" cellpadding="0">
<tbody>
<tr>
<td></td>
<td><img class="attachmentsIcon" src="images/modern_graphite/attachment_url.png" alt="Linked Resource" title="Linked Resource"></td>
<td class="attachmentTitle">
Customer View
</td>
<td>by</td>
<td class="attachmentAuthor contact_popover" ivalue="99832"></td>
<td class="attachmentDate"><span class="dateSpacer">-</span>10/25/2016 04:21:13 AM</td>
<td width="16">
<img align="middle" src="images/modern_graphite/edit.gif" alt="Edit this Attachment" title="Edit this Attachment" border="0">
</td>
<td width="16">
<script type="text/javascript">
if(this.eMail)
{
document.write( "<a href=javascript:eMail('85',99832,document.forms[0].F99832,7705574) style={13}><img src='images/modern_graphite/email.gif' border='0' align='top' alt='Send E-mail' title='Send E-mail'></a>");
}
else if(parent&&parent.eMail)
{
document.write( "<a href=javascript:parent.eMail('85',99832,document.forms[0].F99832,7705574) style={13}><img src='images/modern_graphite/email.gif' border='0' valign='bottom' alt='Send E-mail' title='Send E-mail'></a>");
}
</script><img src="images/modern_graphite/email.gif" border="0" align="top" alt="Send E-mail" title="Send E-mail">
</td>
</tr>
</tbody>
</table>
</div>
I want to extract the link at "LINK GOES HERE"
The Page source has no div with ID = "section attachments" or any other elements inside the div. (I searched with corresponding IDs, class names etc, no success)
What I have tried :
I tried to search the page source from the browser, no results.
My selenium code tries to search for these elements using XPath, it
returns no element found.
XPath expression :
driver.get_element_by_xpath("//td[#class = 'attachmentTitle']/a/#href")
I have tried putting my script to sleep in case the page isn't fully loaded, no effect.
Is there a way to get these links via selenium? Any help will be highly appreciated.
EDIT :
The problem was resolved by modifying the URL a bit to load a page that renders similarly but has iFrame tags that I can switch to and then find the elements using the same Xpath and get the links.
This page was being loaded after a few redirects from another page. A slight string modification of the URL (using replace in Python) solved the problem. Thanks to all who tried to help.
get element by -
ele = driver.get_element_by_xpath("//td[#class = 'attachmentTitle']/a")
then retrieve element attribute using -
ele.get_attribute('href')
Looks like there are few things that you may be mixing together:
When you view the page source in the browser, you're shown the html as it was sent from the server. This html can contain JavaScript that creates elements dynamically, but in the html itself you'd see only the JavaScript code that creates them.
The DOM which is what you see when you inspect element, is the current structure of the page. Initially it's pretty much the same as the html, but may include elements that were created or changed dynamically using JavaScript after the page was loaded from the server. This is also what Selenium interacts with.
(Not sure if you mentioned it, but for the sake of completeness) driver.page_source returns a string which represents that DOM (current state), but as a valid html format.
An html page can contain nested pages using the iframe tag. Each (parent or nested) page had its own html source and its own DOM. In Selenium you have to explicitly switch between them using the driver.switch_to method. Note that on the browser's dev tools though (ie, inspect element), the DOMs of all pages appear combined as one.

Javascript Alternative to Iframe?

I am an admin on an online roleplaying game, and we recently made the transition from some sort of Frankencode to javascript. While I have the basics down, there is a problem I have encountered that I am not sure how to fix.
We have macros on the game, where you can move multiple rooms by typing the direction with a space, a semi-colon, and another space between directions. I've created an atlas that has a long list of macros to help the players of the game move around faster and more efficiently. My main problem is, everything worked with the Frankencode, but Javascript is not recognizing the iframe in my new code.
I would really like an alternative to iframes where I don't have to rely on an outside website for this script, but my journey into that hopeful line of thought just led to a bunch of bright red, angry errors and the command breaking. I substituted the iframe for a contentedtable and the game just was not having it!
Below is my code. Keep in mind that everything works except the iframe.
Thanks in advance! :)
var macaroni = "<center><img src=http://i188.photobucket.com/albums/z46/roseblossomsnapdragon/items/atlas.jpg><BR><image src= http://i188.photobucket.com/albums/z46/roseblossomsnapdragon/amazingatlas-1.jpg~original><BR/> <b><font color=blue><u><b>IF ANY OF THESE ARE BROKEN, INFORM VICTORIA.</font></u></b></b><BR> <table border=0> <tr> <td Valign=top bgcolor=white> <IFRAME name=inlineframe src=http://karchanhelp.webs.com/other%20stuff/otherotherstuff/macaroni.htm width=550 height=400 marginwidth=0 marginheight=0 frameborder=0 scrolling=auto></IFRAME></td> <td Valign=top bgcolor=white><form method=post action=> <textarea name=comments cols=80 rows=21> Copy and paste here to build longer macros. </textarea> </form></td> </tr> </table><P> </center>";
var macaroons = "<center><img src=http://i188.photobucket.com/albums/z46/roseblossomsnapdragon/items/atlas.jpg><BR><image src= http://i188.photobucket.com/albums/z46/roseblossomsnapdragon/amazingatlas-1.jpg~original><BR/> <b><font color=blue><u><b>IF ANY OF THESE ARE BROKEN, INFORM VICTORIA.</font></u></b></b><BR> <table border=0> <tr> <td Valign=top bgcolor=white> <IFRAME name=inlineframe src=http://karchanhelp.webs.com/other%20stuff/otherotherstuff/macaroni.htm width=550 height=400 marginwidth=0 marginheight=0 frameborder=0 scrolling=auto></IFRAME></td> <td Valign=top bgcolor=white><form method=post action=> <textarea name=comments cols=80 rows=21> Copy and paste here to build longer macros. </textarea> </form></td> </tr> </table><P> </center>";
function command(person, totalcommand) {
if (person.isAttribute("macaroons"))
{
person.personal(macaroons);
person.sendMessage("%SNAME begin%VERB2 studying an atlas out of nowhere.<BR>");
return;
}
person.personal(macaroni);
person.sendMessage("%SNAME begin%VERB2 studying an atlas out of nowhere.<BR>");
return;
}
The alternative to iframes is AJAX(Asynchronos Javascript and XML) which lets you load pages and data from a server and you can handle the results for that and insert the response back into your page.
The best pages for learning about Javascript are from the Mozilla Developer Network and this link especially will help you learn more about ajax.
However there are libraries you can download, such as jQuery that help simplify a lot of tasks including loading and storing html and more.
If you need to store a website you can do the following:
Include jQuery in the HEAD:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Create a div(or other container for storing) with any id you want(should be unique):
<div id="loadingArea"></div>
Include a script at either the end of the page or end of the head to ensure that jQuery has loaded
<script>
$(document).ready( //Will run the following function when the html document is ready
function() {
var url = "http://karchanhelp.webs.com/other%20stuff/otherotherstuff/macaroni.htm"; //Load the page you want.
var portion = "body >" //select the portion of the page you need to eliminate duplicate html, head, and body tags
//This is a jQuery selector similar to css meaning select all children (>) of body
//Here we tell jQuery to select the element with id(#) loadingArea and load the
//portion of the url.
$('#loadingArea').load(url+" "+portion);
}
); //End of ready call
</script>

Dynamic forms AUI Liferay

I am doing a portlet in Liferay with a form like this:
<form method="post" action="<%=actionAddRule.toString() %>" id="myForm" >
<aui:select name="attribute" style="float: left;">
<c:forEach var="attr" items="${fields}">
<aui:option value="${attr}" selected="${condition.attribute==attr}">${attr}</aui:option>
</c:forEach>
</aui:select>
<aui:input type='button' value="Add Condition" name='addCondition' onClick="addCondition();" %>'></aui:input>
<div id='conditions'></div>
</form>
I want that when someone click the button add a new select, but I don't know how do a new . I tried do it with JavaScript with:
var conditions = document.getElementById('conditions');
conditions.innerHTML('<aui:select ...>...</aui:select>');
and
document.createElement('<aui:select>');
I tried too with AUI script doing:
var nodeObject = A.one('#divAtr');
nodeObject.html('<aui:input type="text" name="segment21" label="Segment" value="lalal" />');
But it doesn't work because is html and doesn't can make AUI, and if I make the new select with HTML normal, when I catch the values some are lost.
Thanks.
As #Baxtheman stated, this won't work because the tag is not a client-side HTML tag, but a server-side tag from the aui-taglib.
To dynamically load the contents of the select box you would want to follow these steps:
add an element in your JSP, but make it hidden
<aui:select id="conditions" style="display: none;"><aui:select>
From your javascript, when the event occurs that you want to use to load your second select box, you would select the dropdown box and add the options you wish to it with something like the answer from this post Adding options to select with javascript
Make sure you set the select box to be visible after loading the options.
document.getElementById('<portlet:namespace/>conditions').style.display = 'block';
For more clarity, the reason you're missing information on POST if you add a normal HTML select box, is because of the way the aui:form serializes the data. I believe the ends up with a custom onSubmit that gathers only the aui elements.
<aui:select> is a JSP taglib, not the final HTML markup.
If you understand this, you resolve.

Opening Link via New Window from Javascript Select List

I'm not sure what's the issue that is causing that error message when I try debugging with Firebug. Everything looks good to me.
Current Issue:
$("#SlideList option:selected") is null
Select Box Code (abridged) :
<select id="SlideList" name="D1" style="width: 130px;">
<option value = "Numbers.pdf" >Numbers</option>
</select>
<img src="Button.png" onclick="SlidePDFOpen()" />
Javascript:
function SlidePDFOpen() {
window.open($("#SlideList option:selected").val());
}
You are using a jquery selector but you don't have jquery included in the page.
The error you are getting therefore makes sense as the page can't find the function val().
At the very least with jquery you would get an empty string.

Categories

Resources