A href through $ variable javascript/html - javascript

So I am trying to get the firebase link that the user has provided and make it a clickable link. I have this so far
<li>
<div class="collapsible-header grey lighten-4">${forum.title}</div>
<div class="collapsible-body white">
${forum.content} <br />
<p>${forum.link}</p>
</div>
</li>
I want to make forum.link clickable but don't know how to add a href before a variable.
Thanks

Can you try this:
<div class="collapsible-body white">
${forum.content} <br/>
<p>
Link Description
</p>
</div>

Related

Webdriver cannot find xpath of "new loaded element"

Currently I am trying to scrape some information off the web, but I kinda ran into a dead end.
So in order to get the data I want, I need to select the right currency off of a list. I click the link to change the currency and via java script the site gets another chunk of html that contains the list and opens an overlay, where I can select the right currency.
I tried to locate the div in which the list is stored:
driver.find_elements_by_xpath("//html/body/div[19]/div[2]/div/div/div[2]/form/div[2]")
I tried the list itself but I wasnt able to locate the element.
Then I wanted to see if something is found and using the following:
len(driver.find_elements_by_xpath("//html/body/div[19]/div[2]/div/div/div[2]/form/div[2]"))
the answer 0 was provided, so my webdriver wasnt able to locate the newly added chunk of html.
This is the newly added html:
<div class="module">
<div class="modal_mask" style="opacity: 0.5;"/>
<div class="modal_scroller">
<div class="modal_container" style="margin-top: 164.5px;">
<div class="modal_ship" style="margin: 0px auto;">
<div class="modal_title">
Address Currency
<i onclick="modal_remove();">×</i>
</div>
<div class="modal_ship_con">
<h3>Please select your shipping destination & currency</h3>
<p>Price may differ based on your Shipping destination.</p>
<form action="#" method="get">
<input value="81" name="country_sel" type="hidden"/>
<input value="USD" name="currency_sel" type="hidden"/>
<div class="currency">
<b>Currency:</b>
<div class="currency_list">
<div class="active">
<i class="arrow_a">
<i/>
</i>
<span>
USD
<u>US$</u>
</span>
</div>
<div class="currency_box" style="display: none;">
<ul>
<li sel="USD">
USD
<u>US$</u>
</li>
<li sel="EUR">
EUR
<u>€</u>
</li>
<li sel="GBP">
GBP
<u>£</u>
</li>
<li sel="AUD">
AUD
<u>AU$</u>
</li>
<li sel="CAD">
CAD
<u>CA$</u>
</li>
</ul>
</div>
</div>
</div>
<div class="submit">
<input onclick="saveShip(0);" value="Save" type="button"/>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
And this where I have to click:
<div class="active">
<i class="arrow_a">
<i/>
</i>
<span>
USD
<u>US$</u>
</span>
</div>
So now my question: is there any possibility to get to the newly added html code? Is there something like "refresh webdriver"?
Regards
I think you can simply use time.sleep() before trying to capture the button you want to click.
Just use this:
import time
time.sleep(2) #you can keep this behind the code for clicking the button
This will make selenium wait for sometime so that the code can load and then only selenium will click it
you can keep any no. of seconds instead of 2,I just kept it for an example

Clicking title won't show its answer (frequenty asked questions)

this.faqLogic = function()
{
$('a .toggle').click(function(){
$('this .answer').show();
});
};
HTML:
<li class="clearfix question">
<a class="toggle" href="#">>
<h3>
QUESTION
</h3>
</a>
<div id="answer_1" class="answer">
<h6>
<span>ANSWER</span>
</h6>
</div>
</li>
There are multiple questions/answers of course. I just cant understand as to why it won't work at all. I'm getting no errors and required dependencies (jquery) are installed and called in first.
Any ideas?
Because you're trying to select elements of class .answer that are children of a <this> element. Clearly you have no <this> element.
Also, because you have a space between a .toggle, you're selecting elements of class .toggle that are children of an a element. You want a element that have class .toggle. No space for that selector, so it would be a.toggle.
All in all, perhaps you meant:
$('a.toggle').click(function(){
$('.answer').show();
});
I suggest that you take a read of how CSS selectors work in general. Your understanding could do with a bit of firming-up.
$('.toggle').click(function(){
$(this).next().toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<li class="clearfix question">
<a class="toggle" href="#">
<h3>
QUESTION
</h3>
</a>
<div id="answer_1" class="answer">
<h6>
<span>ANSWER</span>
</h6>
</div>
</li>

Target="_self" not reloading page

I have my angular directive, and that is some div's with around it an but when I click on the div it doesn't reload my page.
Am I doing something wrong?
This is the full directive
<div class="col s12 m6 l4">
<div class="video-card">
<a href="#/videos/detail/{{video.Id}}" target="_self">
<div class="card-image">
<img ng-src="{{video.ThumbnailUrl?video.ThumbnailUrl:'img/images.png'}}" src="" />
</div>
</a>
<a href="#/videos/detail/{{video.Id}}" target="_self">
<div class="card-content">
<div class="card-title-box">
<a href="#/videos/detail/{{video.Id}}">
<span class="card-title grey-text text-darken-4">
{{video.Title}}
</span>
</a>
</div>
<div class="card-action">
<div class="more-info">
<span class="group grey-text">
{{ video.Author}}
</span>
<a href="#/groups/detail/{{playlist.Id}}/List/{{video.Id}}" ng-if="playlist">
<i class="mdi-av-play-arrow right tooltipped black-text small "
data-position="top" data-delay="0" data-tooltip="{{'video.playFromhere' | translate}}"></i>
</a>
</div>
</div>
</div>
</a>
</div>
</div>
I need to reload the page due to a bug in a plugin I'm using on the detail page, and nor the author of that plugin nor I can figure out what is happening, and the only way to get it work is to reload the page when going to a video.
You can reload a page in Javascript using window.location.reload()
Target only sets which frame the link should act on. So if you want the document to reload use
window.location.reload();

Javascript making submit button non functional

I am using velocity scripting for a web page.I have a hidden field that I am populating with value entered with the value entered in another field ( JS fiddle: http://jsfiddle.net/x1bdgvyt/). when I try to implement the javascript with my existing code base the submit button doesn not function anymore. IIt works fine before I plug in the JS. Clicking on it doesnt do anything. I am not sure what is wrong. Any help is much appreciated.
HTML submit button code
<div>
<ul class="action">
<li> <input class="Orange_button" type="submit" value="Start my free trial">
<div class="sub-text"> TEXT TEXT TEXT </div> </li>
<div class="column">
<li>
<span > | </span><br/>
<span > or </span><br/>
<span > | </span>
</li>
</div>
<li> <input class="green_button" type="submit" value="Buy it now">
<div class="sub-text"> TEXT TEXT TEXT </div> </li>
</ul>
</div>
Java script code
$('form').on('submit', function(e){
$('[name="retype-email"]').val($('[name="email"]').val());
e.preventDefault()
});
By including e.preventDefault() you're blocking the default behavior of the button. Remove it.

jQuery Mobile navbar won't work

I can't seem to get the navigation bar widget to work at all in my code. I'm building my first application in notepad++ and I'm trying to learn as I build so I apologize for any simple mistakes.
As of now, it shows up as two 2 row tables with the first showing the first button with a space below it and the second showing a space above it with the 2nd button below it. I've checked the jQuery mobile demo site to try and figure out the code and came up with noting, and so I come to you.
<div data-role="page" id="pageone">
<div data-role="header" data-id="header" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#pagetwo" class ="ui-btn-active ui-state-persist">
<h2>Summoner Information</h2>
<h3>Statistics & Achievements</h3><a/></li>
<li><a href="#todolist">
<h2>To-Do List</h2>
<h3>Application wish list</h3></a></li>
</ul>
</div><!--/navbar -->
</div><!--/header -->
<div data-role="main" class="ui-content">
<p>This is an ongoing test page for my League of Legends Statistical Analysis and Coaching application</p>
<p>Please enter your summoner name in the text box below.</p>
<h2>Enter Your Summoner Name</h2>
<div class="ui-grid-a">
<div class="ui-block-a"><input type="search" name="SumName" id="SumName" placeholder="Summoner Name" data-clear-btn="true"></div>
<div class="ui-block-b"><a href="#pagetwo" id="callSum" class="ui-btn" >Search</a></div>
</div>
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
You have a syntax error in closing tag of anchor. you have used like <a/> instead of </a>
Update your code like below.
<li><a href="#pagetwo" class ="ui-btn-active ui-state-persist">
<h2>Summoner Information</h2>
<h3>Statistics & Achievements</h3></a>
</li>

Categories