I am trying to select elements in jQuery like this:
$("input[id*='FirstName']") , but it's not working, it's not bringing the values I want from the page.
The input is located nested deeply inside the DOM, like the child #30 from the root, and I think jQuery is not able to find it.
Anyone faced an issue like this before??
Update: http://pastebin.com/es0Z1P1a
Your code is ok:
var e = $("input[id*='dtpToDate']");
console.log(e.val()); // returns 12/10/2014
http://jsfiddle.net/jojc5rvw/1/
You are using .NET and it's cludgy rendering system. If you want to select .NET controls you need to write code to render the ClientID in javascript:
var $datePicker = $("#<%= MyDatePickerControl.ClientID %>");
In the code you pasted, there is nothing with the text FirstName in there, so you are not going to get any results with the selector $("input[id*='FirstName']").
If you are trying to get all of the dtpToDate controls, you could try something like this:
var $datePicker = $("input[id$='dtpToDate']");
That selects anything that has an ID that ends with dtpToDate.
Related
I am trying to loop through a series of pages (javascript) from the following webpage:
http://nh.mypublicnotices.com/PublicNotice.asp?Page=SEARCHRESULTS
I found all of the elements that I need to loop through, but I am unable to click on it. What would be the best way to loop through these javascript elements:
from selenium.webdriver.support.select import Select
next_page=driver.find_elements_by_xpath('//[#id="PublicNoticeContent"]/table[2]/tbody/tr/td/table[2]/tbody/tr[6]/td/table/tbody/tr/td/table/tbody/tr[1]/td/a')
for i in next_page:
link=i.get_attribute("href")
Select(link)
Select.click()
You need to repeat your materials on Select and working with a class.
link=i.get_attribute("href")
Select(link)
This code has just grabbed what had better be a SELECT tag, but it certainly looks as if you've grabbed only an href. You tried to create a Select object from that link ... but then, having created it, you failed to save it: you threw it away.
Select.click()
I'm not at all sure how you expect this to work: this invokes click as a direct call of a class method, but Select has no such method, so this will fail because teh attribute doesn't exist: an error message you failed to provide in your posting.
Start with this: once you work through your tutorial materials and learn to extract the proper SELECT tag from a URL i ... perhaps
select_tag = i.find_element_by_tag_name(“select”)).select_by_index(0)
clickable = Select(select_tag)
clickable.click()
You click on the object you created, not on the class.
Does that help get you going? You still need to figure out how to code that first line in your application.
I'm using select2 which takes in rails instance variables. Due to the design layout, I can't just scale down the original select2 input. I have to create another.
The problem: A rails partial including the logic for the select2 interferes with the logic I need for the mobile select2 feature. So, it needs to not exist, not simply to be hidden (display: none) , etc..
I was able to get the mobile to work by using remove() on the original partial, but how can I get it back. Maybe something with a page-width conditional, but I'm not sure how that would work.
this is the element / render I neeed to have removed then to have it 'un-removed': (haml markup)
.divider-row
.row-border.vOne
#vCompare
= render 'compare', :categories => #categories, :v_friends => #v_friends
my JS:
if (screen.width < 760){
$('#vCompare').remove();
}
how would I get this information back, when the screen size was over 760? append?
Im trying to use detach and appendTo() as some have suggested below:
$('.compare-searchM').on('change', function () {
$('#vCompare').detach();
})
$(window).resize(function() {
$('#vCompare').appendTo($('#vAppend'));
sizing();
});
haml / markup :
.row-border
#vAppend
#vCompare
= render 'compare', :categories => #categories,
the detach is working, but I must not be understanding something with appendto()
Instead of using .remove() you can use .detach() and store the jquery object in some other variable, like
$vCompare = $('#vCompare').detach();
in your media queries, Later you can use this depending upon your media queries. for more info look .detach() | jQuery. hope this would help you.
When you add the item to the page, try storing it as a variable first and then adding it from there, somewhat like this:
var vCompare = $("<div/>",{id:"vCompare"});
vCompare.appendTo("body");
The div object will be stored in the variable vCompare, so you can still remove it with .remove();:
$('#vCompare').remove();
And then add it back later with the .appendTo(); line seen in the first code snippet.
Hope this helps!
Yes, you should use append here. But before you should get proper position from where you removing the element. You can do it via .index()
So, when you want to restore removed element, use .before() on the found by index element.
If lists, or whatever, have a big difference between mobile and desktop, I'd prefer to create two lists, one of which is shown for mobile and another for desktop.
is there an easy way to tell if a jquery accordion exists on the page...i am trying to dynamically build accordion based on selection that runs through $ajax, reads values from xml, and depending on the xml file selected builds strings the make up the accordion, and finally appends it.
I think that if the accordion already exists on the page, and the user selects another file, I am having trouble destroying the accordion, clearing the html, append the new string, then creating a new accordion...
like
$("#accordion").accordion('destory').html('').append(string).accordion();
seems like if there is not already an accordion this idea breaks....thinking maybe i can just check?? thanks for any help to beginner!
I suspect that you could try checking .data().
var isAccordion = !!$("#accordion").data("ui-accordion");
Or, by checking the ui-accordion classname using .hasClass() which is added upon initialization.
var isAccordion = $("#accordion").hasClass("ui-accordion");
You could try with .length
Count the element using .length
Or something like this
if($('#accordion').length > 0) {
// do something
}
I have a Treeview. This treeview gets populated client side with children in javascript using something along the lines of:
treeView.trackChanges();
var newNode = new Telerik.Web.UI.RadTreeNode();
newNode.set_text(node);
hasParent.get_nodes().add(newNode);
treeView.commitChanges();
The downside is that when looking at the client, the tree doesnt expand, to show these children. Am i missing a step?
The issue isnt here with the expanding, but more so on the Underlying Telerik Control. To get around this, you need to set the onClientNodeExpanded = "FUNCTION_CALL" as in this expample, it was doing onClientNodeExpanding. Also in this example, I did not assign a value. In my final answer, i did.
I have code to create another "row" (div with inputs) on a button click. I am creating new input elements and everything works fine, however, I can't find a way to access these new elements.
Example: I have input element (name_1 below). Then I create another input element (name_2 below), by using the javascript's createElement function.
<input type='text' id='name_1' name="name_1" />
<input type='text' id='name_2' name="name_2" />
Again, I create the element fine, but I want to be able to access the value of name_2 after it has been created and modified by the user. Example: document.getElementById('name_2');
This doesn't work. How do I make the DOM recognize the new element? Is it possible?
My code sample (utilizing jQuery):
function addName(){
var parentDiv = document.createElement("div");
$(parentDiv).attr( "id", "lp_" + id );
var col1 = document.createElement("div");
var input1 = $( 'input[name="lp_name_1"]').clone(true);
$(input1).attr( "name", "lp_name_" + id );
$(col1).attr( "class", "span-4" );
$(col1).append( input1 );
$(parentDiv).append( col1 );
$('#main_div').append(parentDiv);
}
I have used both jQuery and JavaScript selectors. Example: $('#lp_2').html() returns null. So does document.getElementById('lp_2');
You have to create the element AND add it to the DOM using functions such as appendChild. See here for details.
My guess is that you called createElement() but never added it to your DOM hierarchy.
If it's properly added to the dom tree you will be able to query it with document.getElementById. However browser bugs may cause troubles, so use a JavaScript toolkit like jQuery that works around browser bugs.
var input1 = $( 'input[name="lp_name_1"]').clone(true);
The code you have posted does not indicate any element with that name attribute. Immediately before this part, you create an element with an id attribute that is similar, but you would use $("#lp_1") to select that, and even that will fail to work until you insert it into the document, which you do not do until afterwards.
var input1 = $( 'input[name="lp_name_1"]').clone(true);
should be
var input1 = $( 'input[#name="lp_name_1"]').clone(true);
Try that first, check that input1 actually returns something (maybe a debug statement of a sort), to make sure that's not the problem.
Edit: just been told that this is only true for older versions of JQuery, so please disregard my advice.
Thank you so much for your answers. After walking away and coming back to my code, I noticed that I had made a mistake. I had two functions which added the line in different ways. I was "100% sure" that I was calling the right one (the code example I posted), but alas, I was not.
For those also experiencing problems, I would say all the answers I received are a great start and I had used them for debugging, they will ensure the correctness of your code.
My code example was 100% correct for what I was needing, I just needed to call it. (Duh!)
Thanks again for all your help,
-Jamie