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
}
Related
I'm writing in C# with selenium. However, the best way I've found to scroll a page was to use:
IJavaScriptExecutor js = driver as IJavaScriptExecutor;
js.ExecuteScript("window.scrollBy(0,900);");
However, in my current case, the window I need to scroll is not the full page but a part of it. And this command doesn't do anything. I imagined that I need to select the element first so I tried something like this:
js.ExecuteScript("document.getElementsByClassName('scroller')[0].scrollBy(0,500)")
This didn't work either and I'm not sure if its because its wrong as I'm not particularly familiar with JS or if I'm doing something else wrong, like selecting the wrong element to try and scroll.
To sum up my questions are, is there a better way to scroll a window in c# selenium? Is my js code to try and scroll the element wrong? And is there a way to figure out which is the correct element i should try to scroll?
You can use the scrollIntoView(true); to do that, it will brings up the passed element view.
Suppose that you want to scroll until the below element
WebElement element = driver.getElementByClassName('scroller');
then you can do like this :
js.ExecuteScript("arguments[0].scrollIntoView(true);", element);
For multiple elements, you can try the below by passing a matching index number :
js.ExecuteScript("arguments[0].scrollIntoView(true);", driver.getElementsByClassName('scroller')[pass the index number here]);
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.
I'm a total newbie to Onsen UI and I managed to make my first little app (static that is) with a few pages, popovers, lists, etc.
But when I try to add dynamic stuff in there, it does not want to cooperate.
When I click my side menu, it calls menu.setMainPage and in the callback I want to modify the content of the list (lets say iterate a JSON request and add a ons-list-item for each of them). However, they do not look styled with Onsen UI icing.
I guess it's because the menu.setMainPage has already parsed the ons-page and showed it in the browser.
Is there a way to do a load page, update the dom, and then pass it to be displayed?
I have a simila problem with an popover that contains a list. I want to add items in that list, but my jQuery append never work. Same reason I suppose.
Thanks!
Sounds like you're not running ons.compile() on the dynamic elements. The custom elements must be compiled after they've been added to the DOM to get the correct style and behavior.
I made a short example to illustrate it:
ons.bootstrap();
var addItem = function() {
var $myList = $("#my-list"),
$item = $("<ons-list-item>").text(Math.random());
$myList.append($item[0]);
ons.compile($item[0]);
};
If you attach the addItem function to a click handler you can add items dynamically to an <ons-list>.
This is a running example on codepen:
http://codepen.io/argelius/pen/gbxNEg
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.
I'm currently building an event table that will feature a "share" button. Once the user clicks on the share button I want to find text value from that particular table and store them in a variable so that I can use them in my next step. Basicly when I click the share button I want to find the parent element that wraps the particular table and then find text values from each particular cell and store that in a variable. In my JSFiddle I have setup to display the results in the resultbox. http://jsfiddle.net/Ak84L/5/
$("#shareButt").click(function(){
var date = $(this).parent('.even_table').find('date').text();
$(".resultbox").text("date"+date);
});
First change shareButt and date to values of class attribute instead of id, because IDs have to be unique.
And use this code:
$(".shareButt").click(function () {
var date = $(this).closest('.event_table').find('.date').text();
$(".resultbox").text("date" + date);
});
DEMO
First DON'T use same id. Use class instead. Go this way:
js
$(".shareButt").click(function(){
var date = $(this).parents(".event_table").find(".date").text();
$(".resultbox").text("date"+date);
});
fiddle
it would be much simpler to append a custom data tag to the element than to muck around with artsy fartsy jquery calls.
If its good enough for major web frameworks like angular.js, jade, bootstrap, etc. why do many people continue to attempt to reinvent the wheel to create the most complicated solution.
JS FIDDLE EXAMPLE
HTML
<div class="shareButt" date-data="12.5.2014">SHARE</div></td>
jQuery
$(".shareButt").click(function(){
$('.resultbox').text('date' + $(this).attr('date-data'));
});