This is the url of my page : http://www.animalswecare.com/Ads/postad.php
There are two fields category and sub category , when category is selected , sub category changes respectively , it is working fine in google chrome , but it has problem with IE, in IE subcategory does not change when category is selected.
I encourage you to use jQuery for things like that because they make sure it will work accross almost every browser. Its very easy.
http://api.jquery.com/jQuery.ajax/
You are giving id "txtHint" to the select element which is wrong, assign this id to its parent element i.e; TD like
<td id="txtHint"><select name="sub_category"></select></td>
you cannot set innerHTML for a select.
instead, you create a <div id="txtHintWrapper"></div>
when you do the innerHTML update, include <select></select> there
http://support.microsoft.com/kb/276228
There's a javascript error in this line:
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
It's a known bug.Take a look at this MSDN bug report for a workaround: BUG: Internet Explorer Fails to Set the innerHTML Property of the Select Object.
This question talks about it too, and might also be useful: Javascript - innerHTML not working with HTML select menus.
But seeing that the Ajax Request returns the whole <select> tag, you should be replacing the parent <td>'s innerHTML, not the <select>'s, as #dev just pointed out.
Related
There is not nice HTML structure I need to work with and the list of elements I need to select is within an iframe. The problem is that I am interested just in 2 type of divs within many other divs on same level.
I am able to select such a type from the iframe but just one at time:
$("#someIframe").contents().find(".class a img[src*='type1']")
But I am unable to select both:
$("#someIframe").contents().find(".class a img[src*='type1'], .class a img[src*='type2']") -> does not work
The problem is that I need to select the first one, but I don't know which one is the first one :) something like:
$("#someIframe").contents().find(".class a img[src*='type1'], .class a img[src*='type2']").first()
UPDATE 1:
I have found another way around. I have noticed that those elements I don't want to select contains specific text:
<div>not listed</div>
However, again finding the correct selector would be the problem since I need opposite of this below :)
$("#someIframe").contents().find(".someclass div:contains('not listed')").first()
I have figured it out. Here is the code if anyone needs it in the future:
$("#someIframe").contents().find(".someclass").not($("#someIframe").contents().find(".someclass div:contains('not listed')").parent()).first()
It's not nice, but the markup itself is not nice, so I guess it's fine :)
I am looking to automate some of my testing processes and I am relatively new to Nightwatch.js and javascript. Is there a way that I can click an element based on it's class and position in the subsequent array that will be returned if there are multiple elements with the same class.
For example take the following HTML: -
<div class="clickable-button"><p>Some Text</p></div>
<div class="clickable-button"><p>Some Text 2</p></div>
<div class="clickable-button"><p>Some Text 3</P></div>
If I use chrome development tools and run the following command in the console: -
$('.clickable-button')
It returns an array of the three elements listed above.
I would like to click the first <div> element and want to know if there is a way I can do this using a CSS selector? I cannot select via the text that appears within the <p> tag as this is dynamic data.
I have tried the following commands in Nightwatch: -
browser.click('.clickable-button'[0])
browser.click('clickable-button[0]')
Neither of these options work. Any help or advice would be appreciated.
You could probably use :nth-of-type
browser.click('.clickable-button:nth-of-type(1)');
BTW :nth-of-type is part of CSS3 so it is not supported by older browsers.
Besides using CSS selector, XPath is another option, you can do
browser
.useXpath() //ignore this line if you already selected xpath as strategy
.click('(//div[#class="clickable-button"])[1]')
to locate the first button. Reference
I am really new to JavaScript, and Im basically trying to build a simple Script to get information from a site like Walmart.com. Im using firebug to test my little snippets. Im having a problem getting the price.
This is the my code:
var price = document.getElementById('clearfix camelPrice');
console.log(price);
I also tried ".camelPrice" with out the period and I keep getting null.
Thanks a lot in advance!
In this case, you're using the wrong method. getElementById does exactly what it says, it gets an element by its id. Looking on Walmart.com, 'camelPrice' is a CSS class.
We can still get elements by a class. What you want is document.getElementsByClassName(). Further, you can pass multiple arguments to getElementsByClassName like so:
document.getElementsByClassName('clearfix', 'camelPrice');
This grabs all elements that have both the clearfix and camelPrice classes set.
In addition to what the others have said about your selection looking like ids, here is how you can select by class name:
document.getElementsByClassName('classname');
Newer browsers allow you to make jQuery-like selections from native JavaScript:
document.querySelectorAll('#id .classname');
http://caniuse.com/queryselector
It looks like you're trying to provide a class selector to getElementById instead of an ID selector. This is what an ID looks like:
<div id="some-id">...</div>
This is what a class looks like:
<div class="some-class">...</div>
The difference is that only one element should ever have a specific ID on a page, where many elements might have the same class.
I am not sure how you are running your JavaScript in Walmart's site, which is not impossible, but maybe you should specify it, for instance if the Walmart site is in an iframe you will not be able to use getElementById() from your site.
On the other hand if you are running some sort of local Live Editor/Console, then maybe it is possible.
For the script you show above, you have an error on the ID since an id can only be one word, and you are missing to select what type of attribute you want from the element:
For example, <input>:
var price = document.getElementById('id').value
or for other tags like <div>:
var price = document.getElementById('id').innerHTML
When a draggable attribute is enabled on a parent element(<li>) I cant make contenteditable work on its child element (<a>).
The focus goes on to child element (<a>),but I cant edit it at all.
Please check this sample
http://jsfiddle.net/pavank/4rdpV/11/
EDIT: I can edit content when I disable draggable on <li>
I came across the same problem today, and found a solution [using jQuery]
$('body').delegate('[contenteditable=true]','focus',function(){
$(this).parents('[draggable=true]')
.attr('data-draggableDisabled',1)
.removeAttr('draggable');
$(this).blur(function(){
$(this).parents('[data-draggableDisabled="1"]')
.attr('draggable','true')
.removeAttr('data-draggableDisabled');
});
});
$('body') can be replaced by anything more specific.
If new contenteditable elements are not added in the runtime, one can use bind instead of delegate.
It makes sense that the draggable and contenteditable properties would collide. contenteditable elements, like any text field, will focus on mousedown (not click). draggable elements operate based on mousemove, but so does selecting text in a contenteditable element, so how would the browser determine whether you are trying to drag the element or select text? Since the properties can't coexist on the same element, it appears that you need a javascript solution.
Try adding these two attributes to your anchor tag:
onfocus="this.parentNode.draggable = false;"
onblur="this.parentNode.draggable = true;"
That works for me if I add it to the <a> tags in your jsFiddle. You could also use jQuery if it's more complicated than getting the parentNode.
Note: This is a workaround since I believe the inability for these two functionalities to work together resides in the HTML spec itself (i.e. the not working together thing is intentional since the browser can't determine whether you want to focus or drag on the mousedown event)
I noticed you explicitly set 'no libraries', so I will provide a raw javascript/HTML5 answer
http://jsfiddle.net/4rdpV/26/
This was my crack at it.
First of all, it might be better to include the data in one single localStorage item, rather than scatter it.
storage={
'1.text':'test 1',
'2.text':'test 2'
}
if(localStorage['test']){
storage=JSON.parse(localStorage['test'])
}
this creates that ability, using JSON to convert between object and string. Objects can indeed be nested
I also added (edit) links next to the items, when clicked, these links will transform the items into input elements, so you can edit the text. After hitting enter, it transforms it back and saves the data. At the same time, the list items remain draggable.
After saving, hit F12 in chrome, find the console, and look in the localStorage object, you will see all the data was saved in localStorage['test'] as an Object using JSON.stringify()
I tried my best to design this to be scaleable, and I think I succeeded well enough; you just need to replace the HTML with a container and use a javascript for loop to write out several items, using the iterator of your choice to fill the parameter for edit(). For example:
Say you changed storage to hold "paradigms" of lists, and you have one called "shopping list". And say the storage object looks something like this:
{
"shopping list":{
1:"Milk",
2:"Eggs",
3:"Bread"
}
}
This could render that list out:
for(i in storage['shopping list']){
_item = storage['shopping list'][i];
container.innerHTML+='<li draggable=true><a id="item'+i+'">'+_item+'</a> (edit)</li>'
}
Of course, if you were to edit the structure of the storage object, you would need to edit the functions as well.
The output would look something like this:
Milk (edit)
Eggs (edit)
Bread (edit)
Don't worry about the input elements if that worries you; CSS can easily fix it to look like it didn't just change.
If you don't want the (edit) links to be visible, for example, you can do this in CSS:
a[href="#"]{
display:none;
}
li[draggable="true"]:hover a[href="#"]{
display:inline;
}
Now the edit links will only appear when you hover the mouse over the list item, like this version:
http://jsfiddle.net/4rdpV/27/
I hope this answer helped.
Using html5sortable and newer JQuery events (delegate is deprecated, answer 3 years after initial question), bug still affects Chrome 37. Contenteditable spans and html5sortable seem to play nice in other browsers. I know this is only partially relevant, just keeping documentation on changes I've noticed.
$(document).on('focus', 'li span[contenteditable]', function() {
$(this).parent().parent().sortable('destroy'); // removes sortable from the whole parent UL
});
$(document).on('blur', 'li span[contenteditable]', function() {
$(this).parent().parent().sortable({ connectWith: '.sortable' }); // re-adds sortable to the parent UL
});
I am creating a javascript function that would find an anchor in a page (specifically with , not an id) and then iterate through the parents of it until it reached one that contains a certain class. I used the following code and it works fine in Firefox 3.0 but fails at getAttribute in both Firefox 3.5 and Internet Explorer 8.
var tab = document.getElementsByName(headerName).item(0);
while (tab.getAttribute('class') != 'card') {
tab = tab.parentNode;
}
I know this would be easy in jQuery but I am highly constrained. How has getAttribute been changed in these new browsers and what can I do to fix this?
Try tab.className?
So my first guess is that tab is undefined if .className returns nothing.
I'm thinking there is something wrong with
document.getElementsByName(headerName).item(0);
Set a breakpoint on the while loop with Firebug and then type "tab" in the console and hit Enter. If there is no Firebug available for FF 3.5. Try using it to find other ways to get at the desired elements.
document.getElementsByName() does not work in IE.
http://webbugtrack.blogspot.com/2007/08/bug-411-getelementsbyname-doesnt-work.html
Depending on the web standard, the function is supposed to return either all elements with the given value of their "name" attribute or just the input elements of a form.
http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-71555259
http://www.w3.org/TR/xhtml1/#h-4.10
Perhaps, assigning names to the "class" attributes and using document.getElementsByTagName() could let iterate over specific elements of the document, but scanning through all tags of the given kind is slow.