Javascript in HTMLPanel - javascript

I want to include Javascript code in a HTMLPanel element, but it is not working. Could you please help me? Thanks in advance.
Scripts/pro.js
alert('hello');
WITH HTMLPANEL DOES NOT WORK (no alert is displayed)
MyPage.java (which is EntryPoint for MyPage.html)
String preHtml="<script type=\"text/javascript\" src=\"Scripts/pro.js\"></script>";
HTMLPanel prePanel=new HTMLPanel(preHtml);
RootPanel.get("scriptContainer").add(prePanel);
MyPage.html
<td align="left" valign="top" id="scriptContainer"></td>
WITHOUT HTMLPANEL DOES WORK (alert is displayed)
MyPage.html
<td align="left" valign="top"><script type="text/javascript" src="Scripts/pro.js"></script></td>

I think it should be other way around. The HTMLPanel quoting the javadocs
A panel that contains HTML, and which can attach child widgets to identified
elements within that HTML.
should wrap your container not your script. The below example works unless you absolutely have a reason to use HTMLPanel to wrap a script.
HTMLPanel html = new HTMLPanel("<table><tr><td id='scriptContainer'></td></tr></table>");
RootPanel.get().add(html);
Element script = DOM.createElement("script");
DOM.setElementAttribute(script,"language","JavaScript");
DOM.setElementAttribute(script,"src","Scripts/pro.js");
DOM.appendChild(DOM.getElementById("scriptContainer"),script);

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.

How can i use java variable value in JavaScript

I don't know if this is realizable, because i don't have strong knowledge in JavaScript.
I want to use Java variable in Javascript and XHTML code, i have a file path in java variable: applicationDadesVersioBB.rutaFitxerLog which i display as follows in XHTML page in a table as follows:
<tr>
<th scope="row">#{literalsCore['Entorn.FitxerLog']}</th>
<td>
#{applicationDadesVersioBB.rutaFitxerLog}
</td>
</tr>
until now everything is fine, but what I want to do is once the path is clicked, the file should be downloaded, which i am not able to do with: onClick="descarga([[${applicationDadesVersioBB.rutaFitxerLog}]])
the JavaScript descarga function:
<script type="text/javascript">
function descarga(file)
{
window.location=file;
}
</script>
I think the problem I have is the conversion of java variable values to javascript values.
I tried to do it changing the onClick="descarga([[${applicationDadesVersioBB.rutaFitxerLog}]])" to onClick="descarga("#{applicationDadesVersioBB.rutaFitxerLog}")"
but no way, any help?
I'm not sure about what you're trying to do but I remeber a useful "hack" to do that in PHP for example... You have to create a hidden input in your HTML file and set its value to applicationDadesVersioBB.rutaFitxerLog. Then in your click handler you just get the input element thanks to its id for example and you read the value.
Hope it helps
you need quotes around a string
onClick="descarga('[[${applicationDadesVersioBB.rutaFitxerLog}]]')"

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>

Setting DOCTYPE With Server-Side Javascript

I have a real quick question. I want to set the DOCTYPE for an HTML Page but I need to do it using Server Side Javascript. Every answer I see on this site says "I don't see why you want to do it" but never answers the question (That I could find... please point me in the direction of a post if I am wrong).
The reason it needs to be done is because this is technically being sent as an HTML email. I am using ExactTarget and they won't allow me to type anything above the starting < HTML > tag. If I try to establish the DOCTYPE after it, it gets simply removed.
Now I DO have access to server side javascript before the email renders. I need to set this DOCTYPE because I am trying to set < td > tags to "display:block" and this will not work with the default DOCTYPE. So basically I need to write some script AFTER the opening < html > tag that will set the doctype for the page (email).
I wish to use the following DOCTYPE but if this is unwise feel free to advise:
<!DOCTYPE html >
Also here is the CSS not working with the current Doctype:
#media screen and (max-width: 660px) {
td {display:block !important;}
}
Here is the HTML:
<table bgcolor="#0033CC" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>Top Content</td>
</tr>
<tr>
<td>Bottom Content</td>
</tr>
</table>
When I say server side Javascript here is my syntax:
<script type="text/javascript" runat="server">
*** MY SCRIPT ***
</script>
If ExactTarget won't let you output anything prior to the starting <html> tag, then you can't do this. The doctype has to come before that.

Categories

Resources