I am working in Jquery Mobile and have hit my next brick wall, which I am hoping somebody will kindly point out where I am going wrong.
I have a collapsible widget which within I wish to amend the content with different values.
An example of my HTML
<div data-role="collapsible" data-mini="true" id="solar_collapsible">
<h3>Solar Power Information</h3>
<p id="solar_current"></p>
</div>
I am trying to amend id "solar_current" below:
document.getElementById("#solar_current").innerHTML = "Solar Current = 13";
Currently I receive this error in Google Chrome :-
Unable to set property 'innerHTML' of undefined or null reference
I have stripped my code back but after searching all afternoon I can not find any reference or other questions relating directly to this problem.
Has Solar_current not been created yet ? is this the reason for the error ?
Thank you very much.
Seeing as you are using jQuery anyway, why not use it:
$("#solar_current").html("Solar Current = 13");
You can run this in the pagecreate event of the page.
If you want to use plain javascript, just remove the "#" as Steve Hynding suggested.:
document.getElementById("solar_current").innerHTML = "Solar Current = 13";
Related
Hey guys I am trying to click on an element called practitioner access on my company's web site and I have tried looking up documentation on stack over flow and have not figured out how to do this exactly I need help. What I am trying to do is click on the practitioner access popup/drop down and I have not been able to find the code to do it. Please see epic at the bottom:
This is how far I have gotten so far but protractor cant find the element
var pracaccess = element(by.xpath("//contains(#onclick, 'Practitioner Access')"))
pracaccess.click();
browser.sleep(10000);
I have tried to use these site to try and help myself but I can't piece it together. Any help would be appreciated. I am new to xpath as well.
new info to possibly help:
Here is a more expanded view
Also this is what it looks like in vb-script but its basically the same any suggestions?
Browser("ADP_2").Page("ADP_3").Link("html tag:=A","innertext:=Practitioner Access").WaitProperty "visible",True,30000
Browser("ADP_2").Page("ADP_3").Link("html tag:=A","innertext:=Practitioner Access").Object.Click
This XPath expression would look for a tag with the contains tag name, which does not exist. Instead, you've actually meant:
//a[contains(#onclick, 'Practitioner Access')]
Or, there is a nicer way to locate an a element by the link text:
element(by.linkText("Practitioner Access"))
The answer by alecxe is correct but if you want it to be as xpath:
element(by.xpath('//a[text()="Practitioner Access"]'));
I am using angular with html5. I have the following code near the top of my page:
<h2 ng-show="stat == 'Active'">Carry On!!</h2>
<h2 ng-hide="stat == 'Active'">Account deactivated. To reactivate, please click Here.</h2>
It's part of a greeting. I basically want to check if the status of the user is active. If it is, then certain things on the page appear. If the status is deactivated, on hold, etc., then I want to tell them they need to reactivate their account to continue going. There's also a lot of account info on the page that I use ng-show/hide for that works perfectly. In sublime, I just selected all the open space where I wanted to type and typed them all up the same way so I don't think there's a problem with syntax.
For folks who still want to see what ngShow/Hide I use later, here it is:
<div ng-hide="stat == 'Active'"> <div class="conf"><div class="cont"></div></div></div>
<div ng-show="stat == 'Active'">
Sounds to me like your page might have some invalid markup maybe? Does it validate with the HTML5 validator?
If it does then something you can try is using an object.
In your controller do something like:
var ctrlObj = {stat: 'Active'};
Then in your markup do:
<div ng-show="ctrlObj.stat == 'Active'"></div>
There is a good article somewhere on the web arguing the case for never using double equals. I haven't used one in over 2 years since. === does type checking too. Makes for more robust code.
Also there's an article on ng saying if you're not using the dot (as in my example) you're doing something wrong. Has helped me a lot.
Please pardon my "layman language", but I've been working at this for all day. I almost done customizing this but I just can't seem to wrap my head around this. I'm using Soundmanager (playlist). There's this part in the script that reads:
thisSound._data = {
oLink: o, // DOM reference within SM2 object event handlers
oLI: oLI,
oControls: self.select('controls',oLI),
oStatus: self.select('statusbar',oLI),
oLoading: self.select('loading',oLI),
oPosition: self.select('position',oLI), // HERE IT IS
.......
};
(This is what is setup after the page has finished loading):
controlTemplate = document.getElementById("my_sounds");
controlTemplate.innerHTML = [
// control markup inserted dynamically after each page player link
// if you want to change the UI layout, this is the place to do it.
' <div class="controls">',
' <div class="statusbar">',
' <div class="loading"></div>',
' <div class="position"></div>', // HERE'S WHAT "oPosition" IS CONNECTING TOO
' </div>',
' </div>'
].join('\n');
Now, I'm not using what Soundmanager has setup for me (<div class="position">...), but instead, I have a div somewhere on the page that'd I'd like to be the "new" oPosition (<div class="my_new_position_div">...).
So, in short, I want to have use my_new_position_div as my progress bar instead of the other div.
How do you redefine "oPosition" in this Soundmanger script?
full soundmanager script: page_player.js
I've erased my previous answer. I realized that wouldn't work a second after I posted it. The reason why is because the _data property is only set when it is first needed in a handleClick event (this is pretty bad coding). I was hoping I could find a way to keep the script in tact as much as possible, so you are not stuck with a patched version of somebody elses' handy work. But now it seems there is no other way non-intrusive way then to just replace the oPosition line with:
oPosition: document.getElementById('my_new_position_div');
You need to change <div class="my_new_position_div"> to <div id="my_new_position_div"> also.
I suggest you place some big comments around this patched code. This will help you or somebody else working on this code to upgrade to newer versions in the future.
So I have been stuck on this jQuery problem for days at this point.
I am working on a Web Application that was derived from Mobile and my company goes through NetBiscuits for mobile.
Long story short NetBiscuits uses their own markup and I cannot get this string'[BR][BR]'from showing up in an error message.
[BR] is the BML of line break and I need some jQuery to take that sucker out of our web app!
[ ] essentially needs to be < > or nothing (preferred)
I gave the form: errors a div id of "erMsg." Here's my code in javascript:
document.getElementById("erMsg").value = document.getElementById("erMsg").innerHTML(erMsg.replace('[BR][BR]', '<br><br>'));
I have tried countless methods and practices both using jQuery and JS, innerHTML and replace().
ANY help would be most graciously accepted.
innerHTML is not a function, it's a property. You assign to it.
Try this:
var elem = document.getElementById('erMsg');
elem.innerHTML = elem.innerHTML.replace(/\[br\]/ig,'<br />');
I set up the jQuery Tab tools on my web application, and it's working fine to click between the tabs, but what I would like to do is be able to select a tab after another javascript function completes. I'm having trouble doing this successfully after reading through the documentation and searching.
I have a search function, and when someone searches, I'd like the search tab to be selected and come into view.
At the end of the search function:
var tabby = jQuery('#right-tabs').tabs();
tabby.tabs('select', 1); // switch to second
The HTML:
<div id="right1">
<ul class="tabs" id="right-tabs">
<li>Articles</li>
<li>Search results</li>
</ul>
<div class="panes" id="right-panes">
<div id="articles-panel"></div>
<div id="search-results-panel"></div>
</div>
</div>
I got a firebug error saying "Uncaught TypeError: Cannot read property 'jquery' of undefined".
I also tried another approach... just manually setting/removing the classes, with this:
jQuery("ul#right-tabs a").removeClass('current');
jQuery("ul#right-tabs a#search-tab").addClass('current');
jQuery("div#articles-panel").hide();
jQuery("div#search-results-panel").show();
That works, but it creates a strange behavior, of not letting you click on any other tabs until you click on the selected tab, and then it will let you click the other ones.
So, I'm not exactly sure how to make jQuery tools cooperate with what I want to do. It should be simple, I'm considering bailing on this and just writing it from scratch. But if you guys have a way to make either approach work, or a better way, I would really appreciate it!
UPDATE
All I needed was:
var api = jQuery("ul#right-tabs").data("tabs");
api.click(1);
I was mistakenly finding examples for the jQuery tabs and not the jQuery tools tabs.
What I needed was:
var api = jQuery("ul#right-tabs").data("tabs");
api.click(1);
I was mistakenly finding examples for the jQuery tabs and not the jQuery tools tabs.