html select not show selected even after set selected - html

I have a country dropdown and I set the selected attribute to US. I can clearly see select="selected" into select OPTION having value US in firebug. But neither firefox or chrome shown US as selected.
I have code for populate & selected country as follows.
var countryData = getCountryData();
var html = '<option value="">Select Country</option>';
$.each(countryData, function(key,value) {
if(defaultValue == value.id)
{
html = html + '<option value="'+value.id+'" selected="selected">'+value.name+'</option>';
}
else
{
html = html + '<option value="'+value.id+'">'+value.name+'</option>';
}
});
countryField.html(html);
If it is really possible for any reason to browser not shown the selected even we set the attribute selected.
UPDATE : Ok guys, As I was expecting it must be conflicted by other code. And that is the case . I am using bootstrapValidator and a special call "resetForm" which did this behavior. However one thing I did not understand why still html select in firebug shown selected attribute ? But at last I placed this code after resetForm call. Thanks to all for suggestions & help.

I had this peculiar problem of multiple select not selecting the selected values. What I ended up doing is select them with JS (I have jQuery in my app, so that makes it easier) like so:
$('#select_element').find('option[selected="selected"]').each(function(){
$(this).prop('selected', true);
});
I know this is ugly, and it should be avoided, but if nothing works, this WILL work.

you dont need to set selected="selected", selected itself is sufficient
<option value="anything" selected>anything</option>
Also check, is your HTML markup is correct. You are closing the <option> with </value>. It is wrong, should be <option></option>
EDIT
If the above solution is not working, you could set it through JavaScript:
document.getElementById("idOfSelect").selectedIndex = "1";//index starts from 0

This works for me but you can try this:
countryField.html(html).trigger('change');

you don't need selected="selected" just value.id + ' selected>' + ...
also it should be not
lastly, check that
defaultValue == value.id
in the debugger.

I had a similar issue but in my case it was not JS, but the GET variable value of another option matched the name of an option and that didn't work.
So: https://example.com?section=instruments&instruments=0 failed. Renaming to unique names fixed it for me.

Related

Href attribute empty when selecting anchor with xpath

I have a number of links in a page that look like so :
<a class="plant_detail_link" href="plants/O7-01111"><h3>O7-01111</h3></a>
I can select all these link in my page with the following xpath :
//a[#class='plant_detail_link']
I can extract attributes like the class of each link in the usual manner :
//a[#class='plant_detail_link']/#class
But when I attempt to use the same technique to extract the href attribute values I get an empty list :
//a[#class='plant_detail_link']/#href
Does anyone have any ideas why this may be the case?
image detailing chrome developer console xpath execution
EDIT:
See full page html here - http://pastebin.com/MAjTt86V
it's a chrome bug, I believe. You can add the [index].value to get the result. In other words, the $x for href did work but it doesn't return the result in the output for some reason.
For example, I ran these $x queries in the console on this page for the 'Questions' button and got the following output:
$x("//a[#id='nav-questions']/#href")
> []
$x("//a[#id='nav-questions']/#href")[0].value
> "/questions"
You can use something like this to get a usable array of values:
var links = $x("//a[#target='_blank']/#href");
var linkArr = [];
for (i in links) { linkArr.push(links[i].value)}
or to put it in a function:
function getHref(selector, value, $x) {
var links = $x("//a[#"+selector+"='"+value+"']/#href");
var linkArr = [];
for (i in links) { linkArr.push(links[i].value)};
return linkArr; }
getHref("target","_blank", $x);
EDIT
Not sure if this will help you but in chrome adding a comma like this returns the output without the [index].value:
$x,("//a[#id='nav-questions']/#href")
> "//a[#id='nav-questions']/#href"
you could try adding a comma to the xpath selector but I'm not sure if it will help in your case.

Checkbox always returning null in jsp

i am building a contact form and have a checkbox that looks like this:
<input type="Checkbox" name="infomaterial" value="test">send info material<br>
i am then using request.getParameter like this:
request.getParameter("infomaterial")
this is working fine with textboxes and textfields, but it is not working with checkboxes.
I always get null, no matter it is checked or not (i expect it being null when not checked?).. The checkbox is in the right position, too. Can someone tell me what i am doing wrong?
Use getParameterValues to get array of selected checkboxes:
Servlet:
String[] infomaterials= request.getParameterValues("infomaterial");
for (String infomaterial:infomaterials) {
System.out.println(infomaterial);
}
Also note, you will only get values for those checkboxes which are selected. If a checkbox is not selected, it's value will not be available in getParameterValues.
Thanks for your answers.
I found the problem. I have an "owasp SecurityWrapper" in my program. Somehow, this blocks everything except textfields and textboxes. If i turn it off, it works like expected. Still have to find out why it blocks those Checkboxes..
<input type="Checkbox" class="msgChk" name="infomaterial" value="test">send info material<br>
var checked = null;
var input = document.getElementsByClassName('msgChk');
for(var i=0; inputElements[i]; ++i) {
if(inputElements[i].checked) {
checked = inputElements[i].value;
break;
}
}
This is an old post, but please try
boolean infomaterialIsChecked= Boolean.parseBoolean( request.getParameter("infomaterial") );
or
boolean infomaterialIsChecked= request.getParameter("infomaterial") != null;
The Second Option is better. It worked for me

Outer container 'null' not found.

used jssor slider , i have some pages with same jssor slider , some pages are working fine , but some pages comes Outer container 'null' not found. bug , can any one help on this ?
I had a similar problem, so did some digging to see what the issue was.
The setup starts with the initial call, here's the snippet from the demo site
http://www.jssor.com/development/index.html
var jssor_slider1 = new $JssorSlider$("slider1_container", options);
which, among setting up all kinds of utility functions- more importantly does this
function JssorSlider(elmt, options) {
var _SelfSlider = this;
...
// bunch of other functions
...
$JssorDebug$.$Execute(function () {
var outerContainerElmt = $Jssor$.$GetElement(elmt);
if (!outerContainerElmt)
$JssorDebug$.$Fail("Outer container '" + elmt + "' not found.");
});
}
so at this point, it's trying to collect the string you passed, which is the elmt variable- which is for what? Well let's take a look at that $GetElement function in jssor.js
_This.$GetElement = function (elmt) {
if (_This.$IsString(elmt)) {
elmt = document.getElementById(elmt);
}
return elmt;
};
So, really, what it comes down to is this line for finding the element.
elmt = document.getElementById(elmt);
So the base of this error is
"We tried to use your string to find a matching ID tag on the page and it didn't give us a valid value"
This could be a typo, or another line of code modifying/removing the DOM.
Note that there are some scripts try to remove or modify element in your page.
Please right click on your page and click 'Inspect Element' menu item in the context menu.
Check if the 'outer container' is still there in the document. And check if there is another element with the same id.
Check if "Slider1_Container" is present or Used.
In my case, I didn't have it in my html, but still I had added the js.
Removing js resolved my issue.

Checkbox onclick not firing

I'm at my wit's end with this.
Can anyone see anything wrong with this line? The function won't fire by clicking on the checkbox for some reason, but the calling function works fine (if I copy the exact "onclick" attribute over to the label for the checkbox, it works fine).
<input type="checkbox" name="match_35_0" id="match_35_0d" value="d0" onclick="checkSwap(document.page_form.match_35_0d, document.page_form.match_35_0)"></input>
If anyone can see why on earth this wouldn't be working, I would really appreciate it.
Thanks!
EDIT: Since a couple people asked, here's the checkSwap function (all it does is throw an alert so I can see that my onclicks are working before I add any code):
function checkSwap(radioid, groupid) {
alert("radio: " + radioid + " group: " + groupid);}
And here's the whole sample of the table cell that the checkbox in question is in (apologies for the formatting, the code sample doesn't seem to want to accept my newlines):
<td><label onclick="checkSwap(document.page_form.match_34_0d,document.page_form.match_34_0)" for="match_34_0">N</label><input type="checkbox" name="match_34_0" id="match_34_0d" value="d1" onclick="checkSwap(document.page_form.match_34_0d, document.page_form.match_34_0)"></input></td>
EDIT: Alright, canceling out a separate function that was limiting the checkboxgroup to 1 checked box was the issue.
The code that does the limiting was setting an onclick attribute for each checkbox, and that is apparently overriding the tag-set attribute. I'll have to figure out how to hack around it.
This syntax
document.page_form.match_35_0d
actually searches in the form with name of page_form for an input element with name of match_35_0d. But you have actually set it as an id of the checkbox where the onclick is definied.
You could solve your problem with the following call in the onclick:
checkSwap(this, document.page_form.match_35_0)
By the way, a checkbox is not the same as a radiobutton and you're actually not passing the ID's to the function, but instead the whole elements. Rewrite your function as
function checkSwap(checkbox, group) {
var checkboxId = checkbox.id;
for (var i = 0; i < group.length; i++) {
var element = group[i];
var elementId = element.id;
// ...
}
// ...
}
To obtain an element by ID, just use Document#getElementById().
var element = document.getElementById('someId');
If JQuery's ready method is already defined then Chek box onclick event do not work. You can fire the event if you add a Jquery click event inside ready. Not sure if this is IE issue ..?
Incase you already have Jquery's ready function then Onclick attribute of the ckeckbox will not fire. You have to add the click event in Jquery. Only then it works
Like below. I don't know the reason.
$('#cbFinalAttest').click(function (event) {
...
}
this function does fire - checked in firebug
<input type="checkbox" name="match_35_0" id="match_35_0d" value="d0" onclick="alert('55')"></input>
you have to check 'checkSwap'
It would be easier to pass in this to the function, then the parameter would be a reference to the element that called the function. So you can do:
function checkSwap(self){
alert(self.id);
}
Edit: Also, document.page_form.match_35_0.id will get the id, not the way you have it.

Sending values through links

Here is the situation: I have 2 pages.
What I want is to have a number of text links(<a href="">) on page 1 all directing to page 2, but I want each link to send a different value.
On page 2 I want to show that value like this:
Hello you clicked {value}
Another point to take into account is that I can't use any php in this situation, just html.
Can you use any scripting? Something like Javascript. If you can, then pass the values along in the query string (just add a "?ValueName=Value") to the end of your links. Then on the target page retrieve the query string value. The following site shows how to parse it out: Parsing the Query String.
Here's the Javascript code you would need:
var qs = new Querystring();
var v1 = qs.get("ValueName")
From there you should be able to work with the passed value.
Javascript can get it. Say, you're trying to get the querystring value from this url: http://foo.com/default.html?foo=bar
var tabvalue = getQueryVariable("foo");
function getQueryVariable(variable)
{
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++)
{
var pair = vars[i].split("=");
if (pair[0] == variable)
{
return pair[1];
}
}
}
** Not 100% certain if my JS code here is correct, as I didn't test it.
You might be able to accomplish this using HTML Anchors.
http://www.w3schools.com/HTML/html_links.asp
Append your data to the HREF tag of your links ad use javascript on second page to parse the URL and display wathever you want
http://java-programming.suite101.com/article.cfm/how_to_get_url_parts_in_javascript
It's not clean, but it should work.
Use document.location.search and split()
http://www.example.com/example.html?argument=value
var queryString = document.location.search();
var parts = queryString.split('=');
document.write(parts[0]); // The argument name
document.write(parts[1]); // The value
Hope it helps
Well this is pretty basic with javascript, but if you want more of this and more advanced stuff you should really look into php for instance. Using php it's easy to get variables from one page to another, here's an example:
the url:
localhost/index.php?myvar=Hello World
You can then access myvar in index.php using this bit of code:
$myvar =$_GET['myvar'];
Ok thanks for all your replies, i'll take a look if i can find a way to use the scripts.
It's really annoying since i have to work around a CMS, because in the CMS, all pages are created with a Wysiwyg editor which tend to filter out unrecognized tags/scripts.
Edit: Ok it seems that the damn wysiwyg editor only recognizes html tags... (as expected)
Using php
<?
$passthis = "See you on the other side";
echo '<form action="whereyouwantittogo.php" target="_blank" method="post">'.
'<input type="text" name="passthis1" value="'.
$passthis .' " /> '.
'<button type="Submit" value="Submit" >Submit</button>'.
'</form>';
?>
The script for the page you would like to pass the info to:
<?
$thispassed = $_POST['passthis1'];
echo '<textarea>'. $thispassed .'</textarea>';
echo $thispassed;
?>
Use this two codes on seperate pages with the latter at whereyouwantittogo.php and you should be in business.