HTML,Asp.net and Javascript Menu not working - javascript

I have a menu.js file in solution, and a masterpage.aspx:
One of the codeblock of masterpage as follows
<body>
<table id="table2" blah blah>
<tr>
<td valign="top">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img id="img" blah blah />
<td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="height: 14px">
<%SelectJSMenu%>
</td>
</tr>
</table>
</body>
In code behind masterpage.aspx.vb
Public Sub SelectJSMenu()
{
Select Case System.Configration.ConfigurationManager.AppSettinges("stage")
Case 1
Response.Output.Write("script") 'loading menu.js file via script
Case 2
Response.Output.Write("scirpt") 'loading another menu2.js file via this script
}
What I have to do is to check the user permission and write this menu if user is not who he claims to be, then load the second.

I'm not expert in js and asp but reviewing your post, I think the problem is that you don't close your <td> tag in the second enclosed table:
_edit: there's some exception in html which allow tag omission, and < td> tag is part of them. But complex parser could have a more strict validation stage that could complain about it.
try replace:
<tr>
<td><img id="img" blah blah />
<td>
</tr>
by:
<tr>
<td>
<img id="img" blah blah />
</td>
</tr>

Apart from an issue with the closing of the tag as mentioned in #j-p's answer, the following needs to be corrected.
Instead of
Case 1
Response.Output.Write("script") 'loading menu.js file via script
Case 2
Response.Output.Write("scirpt") 'loading another menu2.js file
do-
Case 1
Response.Output.Write("<script src=\"menu.js\"></script>") //loading menu.js file via script
Case 2
Response.Output.Write("<script src=\"menu2.js\"></script>") //loading another menu2.js file via this script

Related

Trying to get following element (text) without class tag etc

Here's html code of page I'm trying to parse. (Its a bookstore)
Part of the page code
<tr><tr>
<tr><tr>
<tr><tr>
<tr><tr>
<tr><tr>
<tr>
<td width="300" class="highlight">
<b>Издатель:</b>
Додо Пресс,Фантом Пресс
</td>
</tr>
<tr><tr>
<tr><tr>
<tr><tr>
I need to get text that is following
<b>Издатель:</b> (translation - Publisher)
First i used nextsibling from BeautifulSoup, it worked fine, but on other books' pages on the same site publisher element is't always in the same place which means my chain of next siblings doesn't get the right part of book description.
I tried to locate the exact text 'Издатель:' with Selenium
pubs = driver.find_element(By.XPATH, "//*[text()='Издатель:']")
and it did the job. I got the text 'Издатель:'. After that i tried to locate next element following 'Издатель:' because the text that i need is always located after 'Издатель:'.
followingsibling form Selenium doest work because publishers' name doesn't have class or tag etc.
I also tried running JS
pubs = driver.find_element(By.XPATH, "//*[text()='Издатель:']")
pub = driver.execute_script("""
return arguments[0].nextElement""", pubs)
pub = driver.execute_script("return document.evaluate('// [text()='Издатель:']/following-sibling::text()[1]'), document, null, XPathResult.FIRST_ORDERED_NODE_TYPE,null).singleNodeValue.textContent;")
Also didn't work.
Publisher element doesn't have any sibling or child element so i don't know how to get the text following it.
Site URL - https://www.bgshop.ru/Catalog/GetFullDescription?id=10652263&type=1
The text Додо Пресс,Фантом Пресс is within a Text Node so you have to use execute_script() inducing WebDriverWait for the element_to_be_clickable() and you can use either of the following Locator Strategies:
Code Block:
driver.get("https://www.bgshop.ru/Catalog/GetFullDescription?id=10652263&type=1")
WebDriverWait(driver, 5).until(EC.element_to_be_clickable((By.CSS_SELECTOR, "a.collapsed"))).click()
print(driver.execute_script('return arguments[0].lastChild.textContent;', WebDriverWait(driver, 20).until(EC.visibility_of_element_located((By.XPATH, "//*[text()='Издатель:']//ancestor::td[1]")))).strip())
driver.quit()
Console Output:
Додо Пресс,Фантом Пресс
References
You can find a couple of relevant detailed discussion in:
How to extract just the number from html?
How to extract text from webdriver elements found through xpath using Selenium and Python
How do I use selenium to scrape text from a text node within a class through Python
You can achieve this with the javascript code below. You can select every b element and then get its parrent element and access innerText property
document.querySelectorAll('b').forEach( element => {
console.log(element.parentElement.innerText)
})
<table>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr>
<td width="300" class="highlight">
<b>Publisher:</b>
name 1
</td>
</tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr>
<td width="300" class="highlight">
<b>Publisher:</b>
name 2
</td>
</tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr>
<td width="300" class="highlight">
<b>Publisher:</b>
name 3
</td>
</tr>
</table>
If there are other b tags then you can check with if statment if the content of b is publisher liek below
document.querySelectorAll('b').forEach( element => {
if(element.innerText == 'Publisher:'){
console.log(element.parentElement.innerText);
}
})
<table>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr>
<td width="300" class="highlight">
<b>Publisher:</b>
name 1
</td>
</tr>
<tr></tr>
<tr>
<td width="300" class="highlight">
<b>Date:</b>
Date 1
</td>
</tr>
<tr></tr>
<tr></tr>
<tr>
<td width="300" class="highlight">
<b>Publisher:</b>
name 2
</td>
</tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr>
<td width="300" class="highlight">
<b>Publisher:</b>
name 3
</td>
</tr>
</table>

How do I maintain linebreaks and indenting when submitting HTML to a server?

I have a HTML <textarea> that I am using to paste HTML into.
The contents of the textarea are then being submitted to a firestore server.
I then render the HTML into:
<p white-space: pre-line;>HERE<p>
This approach will maintain the line breaks but not the indenting.
This:
<div>
<table>
<tr>
<td>Test code</td>
</tr>
</table>
</div>
Becomes this:
<div>
<table>
<tr>
<td>Test code</td>
</tr>
</table>
</div>
How would I go about maintaining the indenting?
Found the answer to my own question.
Just wrap the outputted code from the server like so.
<pre>
<code>OUTPUT</code>
</pre>
You can use ReactHtmlParser. You can call it like this ReactHtmlParser(yourHtmlString)

HTML JavaScript error in atom

I've managed to create some code which makes divs appear when the user clicks the navigation buttons.
This works without the html code inside the javascript (which will be the information shown on the pafge when the use clicks a button).
I've had a huge red error come up on my atom and I cant seem to find what I've done wrong. I've tried using Linter too and nothing is coming up.
Can anyone suggest anything?
Here is an image with the error:
here is the code:
$('#myhtmlcss').click( function() {
$('#content-reveal').fadeOut( 500, function() {
$('#content-reveal').html( '<div> <h2>HTML AND CSS</h2> <p>Below is example HTML and CSS for the Aguillar Family Wine Festival Schedule website.</p> <br> <p> <textarea name="textareahtml" rows="10" cols="30" readonly> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Aguillar Family Wine Festival</title> <link rel="stylesheet" type="text/css" href="/examples/winestyle.css" /> <link href="https://fonts.googleapis.com/css?family=Oswal" rel="stylesheet"> </head> <body> <header> <h1>Annual Aguillar Family Wine Festival</h1> </header> <div class="container"> <table> <thead> <tr> <th colspan="2"> <h1>Wine Festival Schedule</h1> </th> </tr> <tr> <th> <h2>Time</h2> </th> <th> <h2>Event</h2> </th> </tr> </thead> <tbody> <tr> <td class="left"> <h3>12:00PM</h3> </td> <td> <h3>Welcome Reception</h3> </td> </tr> <tr> <td class="left"> <h3>1:00PM</h3> </td> <td> <h3>Storytelling & Tasting</h3> </td> </tr> <tr> <td class="left"> <h3>2:00 PM</h3> </td> <td> <h3>Wine Luncheon</h3> </td> </tr> <tr> <td> <h3>3:00PM</h3> </td> <td> <h3>Aguillar Family Wines</h3> </td> </tr> <tr> <td> <h3>4:00PM</h3> </td> <td> <h3>Wine & Cheese Tasting</h3> </td> </tr> </tbody> </table> </div> <footer> <h3>Contact</h3> <h3>Location</h3> <h3>Privacy Policy</h3> </footer> </body> </html> </textarea> <textarea name="textareacss" rows="10" cols="30" readonly></textarea> </p> <p>CLICK HERE TO SEE THE EXAMPLE ABOVE IN ACTION </p> <p>This site is also another example of my HTML, CSS & SCSS skills. The code for this website, plus plenty of other examples, are on my GITHUB. </p> </div>' );
$('#content-reveal').fadeIn( 500 );
} );
} );
For performance reasons, Atom will stop looking at a line when it exceeds ~1000 characters. Fortunately, there are a few options to circumvent this:
Use Tree Sitter
As of Atom v1.25, there's a new experimental parsing system called tree-sitter. You can enable it in the Atom core settings:
Note: You might have to close and re-open your file (or re-assign the grammar) for the changes to apply.
Change Your Code
Alternatively, you can always split up your code into smaller chunks and concatenate them to avoid very long strings. This might also make it easier to maintain.
This may be caused by the fact you have <html> written inside the .Html tag.
Unless it's inside an iframe, you shouldn't write <html>.
You can escape the brackets using
< (<)
> (>)

javascript jquery response HTML into a div do not retrieve all HTML

I am doing a Ajax call with jquery and putting the content inside a div like this:
$('#replace').html(response);
But it is not replacing all the content I got from 'response'.
When I do :
alert(response)
I see all the HTML code with no problem.
But when I do:
$('#replace').html(response);
It does not put all the HTML code from response.
When I do an alert
alert(response);
I got this (which is correct):
#
<div id='replace'>
<tr onclick='javascripot:gravaJOBparaView(5746);' ondblclick='fnOpen(5746);' >
<td class='preview' title='8746' >8746</td>
<td>XXXX</td>
<td>xxxxx</td>
<td>xxxx</td>
<td>xxx</td>
<td>xxxxx</td>
<td title='xpto'>XXXXXX</td>
<td></td>
<td> <br/>18:00</td>
<td>22/07/2012</td>
<td title='Check XXXXX' class='popups' ><a href='#popup_5746'><img src='xpto.png' alt='Check XXXXXX' width='40px'></a></td>
</tr>
</td>
#
But When I do the:
$('#replace').html(response);
It puts this code in the div 'replace':
#
<div id="replace">
8746
XXX
XXXX
XXXX
XXXXX
XXXXX
RXXXXXX
<br>18:00
22/07/2012
<img width="40px" alt="Check XXXXX" src="xxxxxx.png.png">
</div>
#
As you can see for some reason it does not put all the tags from response.
What should I do?
Your HTML isn't valid. <tr> must be in a table tag.
Replace
<div id='replace'>
by
<table id='replace'>
Replace the last </td> by a </table>
http://jsfiddle.net/wk4eD/1/
Two element must not have the same id in your page
You need to mind the html nesting rules. <td> must be inside a <tr> which must be within a <table> (technically you need a tbody or thead, but browsers are tolerant of this one).
You should use this service:
http://validator.w3.org/#validate_by_input
Under More Options, choose to validate HTML fragment and match your doctype. You can use that to make sure the HTML is valid before trying to stuff it into that div.
you have to close the div you might want to use
</tr>
</div>
</td>
at the end. JQuery might replace text before because it cannot find proper div end statement.

divs created (javascript/mootools) from ajax response not showing until entire response processed

Chrome 18.0.1025.162m
Struts 1.x
Here's the basic structure of the divs I'm creating using js/mootools:
<div class="track">
<table>
<tr>
<td style="white-space:nowrap; width:1%;">
<td style="white-space:nowrap; width:1%;">
<td>
</tr>
</table>
<div>
<table>
<tr>
<td style="width:50%;">
<fieldset style="height: 244px; ">
<legend></legend>
<table>
<tr>
<td>
<img>
</td>
<td>
<table>
<tr>
<td class="label"></td>
<td class="comparable"></td>
</tr>
<tr>
<td class="label"></td>
<td class="comparable"></td>
</tr>
... 8 more of same
</table>
</td>
</tr>
</table>
<table>
<tr>
<td style="text-align: center; ">
<button type="button"></button>
</td>
</tr>
</table>
</fieldset>
</td>
<td>
...essentially same as prior td
</td>
</tr>
</table>
</div>
</div>
relevant css:
div.track {
outline:solid thin;
margin-bottom:10px;
background-color:#DCEDEA;
}
td.label {
text-align:right;
white-space:nowrap;
}
'comparable' is just a flag so I can find and possible restyle them later.
These structures are created in the onreadystatechange function from a single JSON response. 100+ of these are being created but I don't see anything until they're all ready and then they all appear at once. I would expect (and prefer so the user sees progress) each div to display as soon as it's ready and added (using mootools Element.inject) to the DOM. If I step through using Chrome's dev tools I see the expected behavior of the div displaying immediately after the inject.
I'm fairly new to web development, so if you feel the need to critique my methods I'm open to hearing your thoughts, but I'd really like an explanation for the behavior I'm seeing.
Thanks.
edit
Basic idea of page html:
<body>
<div id='foo'></ div>
</body>
Basic idea of js (within onreadystatechange):
var jsonObj = JSON.decode(req.responseText);
for (var i = 0; i < jsonObj.objects.length; ++i) {
getStructure(jsonObj.objects[i]).inject('foo'); //getStructure builds the div above and returns the div element
}
I suspect that the DIVs are being displayed one at a time, but they're all being displayed so quickly that it looks like it's happening all at once. Add console.log(i); into that for loop and watch your console while the DIVs are loading. You can bring up the console with Ctrl+Shift+J using Google Chrome, or by installing the Firebug extension under Firefox.
EDIT:
In that case, I'd guess it has something to do with the display loop in your browser. Probably something like (in very rough pseudocode):
while (1) {
executeJavascript(); // blocks until all javascript is executed, including your loop
displayPage();
}
You may therefore find this discussion useful: How can I force the browser to redraw while my script is doing some heavy processing?

Categories