Jsoup How can i parse element which show after click button (image)? - html

I have this div in source of website, and after click it shows more data.
<div class=infogroup>
<div onClick=requestAjax(); style=cursor:pointer; class=infoheading>Your Panels (Click to load results)<img style=float:right; src="/images/plus_sign.png" width=20 height=20></div>
<div id=resultsPanels style=display:none;>
<table width=100%>
<tr>
<td>
<center>Loading your results...</center>
</td>
</tr>
<tr>
<td>
<center><img src=/images/ajaxloader.gif></center>
</td>
</tr>
</table>
</div>
</div>
when i click it and do "inspect element" witch chrom i can see it in source website
when i copy xpatch the xpatch of interesting field is:
//*[#id="resultsPanels"]/div/table/tbody/tr[3]/td[3]
how do i select it in Jsoup ?
i tried like this but it isnt working:
elements = doc.select("//*[#id=\"resultsPanels\"]/div/table/tbody/tr[2]/td[3]");
this is what mozzila do when i click button:

Jsoup doesn't support javascript / ajax, but you can use an external library for that (i've listed some examples here).
Btw. is using CSS / jQuery selector syntax, not XPath. So this syntax will likely fail.
You can get an overview about Jsoups selector here: Use selector-syntax to find elements

Related

HTML Collapsible with text instead of image?

How can I make an expandable text using only HTML?
I have this working code that I had adapted from a tutorial, but I can't find the original tutorial to go backwards. Right now, the image is clicked and text expands below it. The tutorial originally had text, and I changed it to an image, but now I want text for a different project and can't figure it out for the life of me. (Links, etc. have been changed for stackoverflow)
<table style="width:100%"><tr><td>
<img src="https://i.imgur.com/PYIzMc6.jpg" width="200" title="Click to show/hide text" onclick="if(document.getElementById('sizes') .style.display=='none') {document.getElementById('sizes') .style.display=''}else{document.getElementById('sizes') .style.display='none'}"/></td></tr><tr>
<td>
<div id="sizes" style="display:none">
one<br/>
two<br/>
three<br/></div></td></tr>
</div></td>
</tr></table>
I can't figure out how to get the part that is clicked to expand the links to text instead of an image - or both if possible.
You write "using only HTML" but are using inline JavaScript, so I assumed that a JS solution analogous to your example is fine.
Just change your <img> tag to a <span> (or a <p> paragraph, or whatever suits your needs` and remove the image-specific attributes.
Also, your markup had a few unnecessary tags bevore the closing </table> tag.
<table style="width:100%">
<tr>
<td>
<span
title="Click to show/hide text"
onclick="if(document.getElementById('sizes') .style.display=='none') {document.getElementById('sizes') .style.display=''}else{document.getElementById('sizes') .style.display='none'}">
toggle list
</span>
</td>
</tr>
<tr>
<td>
<div id="sizes" style="display:none">
one<br/>
two<br/>
three<br/></div>
</td>
</tr>
</table>

Creating a link with HTML code

I have created a table inside my template, using the Mediawiki programming language as explained in the documentation. In the table cells are an image and a text. Now I would like to make the whole table clickable, so that it links to a different page. To do this I use the wiki syntax and define the page, where the user should get referred. Then using the Pipe-character, I set the table code instead of a standard text.
Unfortunately, only the table gets displayed, while the source code of the Link syntax gets print out as a text. Is there a fix you can recommend me?
Or at least something temporary?
Here is my wiki source code:
[[:Category:{{{1|}}} Products|
{|
|[[File:Apple.png|50px|left|link=]]
|Order our apples
|}]]
This should be the html code it should generate:
<a href="http://example.com/Category:Apple_Products">
<table>
<tbody>
<tr>
<td>
<div class="floatleft">
<img src="http://example.com/Apple.png">
</div>
</td>
<td>
Order our apples
</td>
</tr>
</tbody>
</table>
</a>
(I also tried adding the following instead of the Link syntax:
<a href="http://example.com/</nowiki>{{#replace:{{{1|}}}| |_}}_Songs">
It did not work, because the parsing caused a conversion of ">" and "<" characters..

A href around table is not working in internet explorer

I want a clickable table. This code works in all browsers, except in IE8. I haven't tested in IE9, but it works in IE10. By not working I mean nothing happens when I click on the table. Why?
<a href="www.cnn.com" target="_blank" class="nonlink">
<table>
<tr>
<td>
<p>hello</p>
</td>
</tr>
</table>
</a>
This works of course:
<a href="www.cnn.com" target="_blank" class="nonlink">
hello
</a>
I tested the code in a clear webpage where no other code exists.
It'll obviously wont work since you using iligal way.
You cannot use <a> tag outside table tag.
However you can allways use <a> inside <p> tag so the code will be vaild, like that:
<table>
<tr>
<td>
<p>hello</p>
</td>
</tr>
</table>
EDIT
Here is an alternative way for your code so the table empty space will be fixed.
$('td').on("click", function(){
window.location = ""; // Add whatever your window location (I.E. index.html)
});
It does work, but it's definitely not good practice. From your example you should be able to include the anchor in the cell.
<table>
<tr>
<td>
<p>hello</p>
</td>
</tr>
</table>
Click here for a demo.

Adding html class to tinymce td element

:)
It is my second post here in stackoverflow and got happy with the results of my first question. Anyway, I already have a working tinymce toolbar with a re-designed appearance. In achieving this I have used jQuery to add classes to the toolbar elements.
But in some way isn't it better if upon initializing the toolbars the classes are also added..
let's say:
theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,"
currently: (the one that i have now)
initiate tinymce
find elements add class while there are elements
Result:
<td class="first"> (*save elements here) </td>
<td class="last"> (*newdocument elements here) </td>
<td class="separator"> (*separator element here) </td>
<td class="first"> (*bold elements here) </td>
<td class="center"> (*italic elements here) </td>
<td class="center"> (*underline elements here) </td>
<td class="last"> (*strikethrough elements here) </td>
what I want to achieve:
- initiate tinymce and add classes (*the result would be the same)
wouldn't it be faster this way?
I have been tracing the codes of tinymce but with my inexperience in coding makes it more harder for me... Anyone out there who knows the answer to my problem.. Please help me.. thank you and more power... :)
Looks like you should use the configuraton setting editor_css.

How to get access to no-existing tag?

If you create following HTML below:
<table>
<tr>
<td></td>
<td>Last1</td>
<SPAN><FONT>test1</FONT></SPAN>
</tr>
</table>
and check DOM model you will see that IE(maybe others) create tag with no-name.
Here is link to screenshot Screenshot:
Are there any possibility to get access to this tag or not ?
Your HTML is invalid.
You can only put <td> and <th> elements directly inside <tr>s.
The browser is creating this tag in an attempt to fix your broken markup.
You should correct your HTML.