I'm very new to tizen web. I have an app that gets data from mqtt broker and controls wi-fi lamp. I have list page with 3 pages, that allow to control brightness, speed, scale. I get data from mqtt every time when the lamp changes its state and I want to update the level in each page.
index.html
<div class="ui-content">
<ul class="ui-listview">
<li class="li-has-toggle">
<label>
On/Off
<div class="ui-toggleswitch" id="toggle">
<input class="ui-switch-input" id="t_swtch" type="checkbox" onclick="ToggleSwitch();" />
<div class="ui-switch-button"></div>
</div>
</label>
</li>
<li>
Brightness
</li>
<li>
Speed
</li>
<li>
Scalse
</li>
</ul>
</div>
brightness.html
<body>
<div class="ui-page" id="dimmer-page">
<div class="ui-content dimmer-content">
<div class="ui-dimmer" id="dimmer" data-dimmer-type="BRI"></div>
<input id="slider" data-slider-type="bri" type="range" value="50" min="0" max="100">
</div>
</div>
</body>
I tried to get element from brightness.html like this document.querySelector("input[data-slider-type='bri']") to set value, but it returns null. When I try to get access to this element of index.html document.getElementById("t_swtch") and it works fine.
I need to get access to this element from my index.html page.
Not sure it's the case, but maybe there's a typo in your query. I've tried the exact same query you use, but with the closing ) - document.querySelector("input[data-slider-type='bri']") and it returned the corresponding element
Related
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>
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
I've searched for a while and did find a lot about multiple iterations. The problem is that i don't see a plain solution for my problem.
I have a list of checkbox that is filled dinamically with ng-repeat. Due to layout purposes i need to create a new div inline-block whenever i reach 3 checkboxes. Like that:
CheckBoxList = {1,2,3,4,5}
<div class="form-group-content">
<div class="form-col-secondary">
<ul class="list-checkboxes">
<li>
<input type="checkbox"/>1
</li>
<li>
<input type="checkbox"/>2
</li>
<li>
<input type="checkbox"/>3
</li>
</ul>
</div>
<div class="form-col-secondary">
<ul class="list-checkboxes">
<li>
<input type="checkbox"/>4
</li>
<li>
<input type="checkbox"/>5
</li>
</ul>
</div>
</div>
I tried using a iterator and two ng-repeat but didn't work like i wanted to.
If somebody already had this struggle and could help i would appreciate it.
To achieve this you will have to make 2 updates.
2 ng-repeat
Change structure
HTML Code
<div class="form-group-content">
<div class="form-col-secondary" ng-repeat="block in blocks">
<ul class="list-checkboxes">
<li ng-repeat="checkbox in block">
<input type="checkbox{{$index + 1}}"/>
</li>
</ul>
</div>
</div>
JS Code
$scope.blocks = [
['1','2','3'],
['4','5']
];
Here is a plunker for you - http://plnkr.co/edit/BWcFI5d02yPkAYDiQxvO?p=preview
If you split your CheckBoxList in parts of 3, you can use your ng-repeat on each div.
So change checkboxlist to something like:
divs = [[1,2,3],[4,5,6]];
then your html:
<div class="form-col-secondary" ng-repeat="div in divs">
<ul class="list-checkboxes">
<li ng-repeat="checkbox in div">
<input type="checkbox" ng-attr-id="{{checkbox}}">
</li>
</ul>
</div>
This might nog exactly match what you want as result, but it reflects the principle on which you should be able to create your own working version :-)
Edit
Worth noting: As far as I am aware, you can't have <input type="checkbox1" />, I think you mean <input type="checkbox" id="1" name="checkbox1" /> instead.
You'll have to track by $index in your ng-repeat and either ng-if or ng-show and $index < 3 for your first set and $index > 2 for the second set.
I have a list of user-details stored in userList.
I am rendering these list of users in a div tag as follows:
<ul>
<li class="extra-users" ng-repeat="member in view.userList">
<input class="add-friends-check add-friends{{$index}}" type="checkbox" ng-checked="member.ischeck" />
</li>
</ul>
Now Problem occurs If same userList is used to render users in multiple div tags.
i.e.
<div class="1">
<ul>
<li class="extra-users" ng-repeat="member in view.userList">
<input class="add-friends-check add-friends{{$index}}" type="checkbox" ng-checked="member.ischeck" />
</li>
</ul>
</div>
<div class="2">
<ul>
<li class="extra-users" ng-repeat="member in view.userList">
<input class="add-friends-check add-friends{{$index}}" type="checkbox" ng-checked="member.ischeck" />
</li>
</ul>
</div>
Now If two users are selected/checked in div1, it gets reflected in div2 as well since view.userList is getting updated.
One way to solve it is clone userList and assign cloned userList` to div1 and userList`` to div2.
But that is causing me performance issues If I load more than 15 or 20 divs.
Is there any way we can avoid selecting a user in one div not reflecting in another?
Thanks in Advance
I am working on jquery. I have 4 tabs within the <li> tags. I have used jquery 1.9.1.js for my project. my <li> looks like the one below. I got a solution to use http://www.asual.com/jquery/address/docs/#api-reference. But the fact is that I have used and imported this external lib but it doesn't seem to work. The thing which i am trying to attain is when ever I select the specific <li> item and press f5 the page by default loads the first <li> item. But the thing which I am looking for is , it has to load the same selected <li> item and its contents when refreshed. any help would be appreciated.
Here is my HTML code:
<div class="container">
<div class="coolbar">
<div class="cool-inner">
<ul id="mybar" class="nav cool-tabs">
<li class="Coke">
Coke <span class="dashboard-bottom"></span>
</li>
<li class="Fanta">
Fanta<span class="Pricing-bottom"></span>
</li>
<li class="Pepsi">
Pepsi<span class="Promotion-bottom"></span>
</li>
<li class="Limca">
Limca<span class="Product-bottom"></span>
</li>
</ul>
</div>
</div>
</div>.
<div id="login">
<button type="button" id="submit" value="Login" class="btn">Click me for cool drinks</button>
</div>
And my jquery code for page refresh:
$(function() {
$('#submit').click(function() {
$('.container').show();
$('#login').hide();
$.cookie('shown', true);
});
if ($.cookie('shown')) {
$('#submit').click()
}
});
Thanks in advance.
when activating the tab you may want to set the tabs position/value in the cookie and when the page loads, check if tabs position/value exist in the cookie, then accordingly activate that tab or trigger click event on that tab.
may this help