I am looking for some assistance with acceptance testing of the Selectize jQuery plugin using the Capybara test framework.
We are having a problem with the way Selectize lays out the HTML it generates, there is no definitive link between the select dropdown and the values contained within the dropdown
As you can see from my jsfiddle here : http://jsfiddle.net/et4t20wz/
$('.test').selectize({
create: false,
dropdownParent: 'body'
});
Viewing the source code, the containing div has the 3 selects within it and the values for the dropdown are contained within the body tag.
I need a way for our test team to be able to create a 1 - 1 connection between the two elements. So far we have come up with a rather weak connection, as we know the first Selectize values will be stored in the first div.selectize-dropdown we can use this logic to map to the first div.selectize-control
This is rather flimsy and probably not the best approach, but the best we can come up with thus far. We have found a few solutions on the web, but sadly they appear to be out dated or reliant on different DOM structures.
For example: http://climber2002.github.io/blog/2014/09/22/capybara-integration-tests-with-jquery-selectize/
Hopefully we are not the only ones to have come in contact with this problem and someone can offer some assistance / advice
Thanks in advance.
I believe the link is just positional in the html, the two divs that make up a a selectize control are inserted immediately after the select element that is converted. Therefore if you know the id of the original select you should be able to get the associated divs using the sibling selectors
page.find(:css, '#test + div.selectize-control + div.selectize-dropdown')
or
page.first(:css, '#test ~ div.selectize-dropdown')
if you've already clicked on the div.selective-control (or maybe the input in it) then the elements in the .selectize-dropdown should be visible and you can click on them
So we managed to fix this problem using a solution I found here :
Capybara integration tests with jquery.selectize
The code didn't really work, however. So I ended up using this script I wrote.
var selectize = jQuery('#key').selectize()[0].selectize;
jQuery(selectize.setValue(selectize.search('#value').items[0].id));
Related
I noticed on youtube that replies to each comment are inside a <div id="replies">. So the same id is used for every comment reply group.
When is it a good practice to give same ids to multiple similar elements?
I know ids should be unique, that's why I'm wondering about this.
To check it, go to a youtube video, inspect and select the reply area of a comment. Optionally, Ctrl+F in inspect and search replies.
YouTube uses web components which might be the reason there are multiple of the same IDs. Web components are encapsulated chunks of HTML, javascript, and CSS that you can drop into your pages. You can read more about them here: https://www.polymer-project.org/
So my thinking of why YouTube specifically has multiple of the same ID is that the replies component itself has an ID of replies and is being targeted on a component level rather than a global.
I hope this makes sense? Even if it doesn't, try to avoid ID's that aren't unique like the others mentioned.
One of the reason YouTube can have duplicate IDs, completely invalid looking html and still get away with it, it's because they are generating dynamic content. Remember, even though it is incorrect, the browser will render it just fine. They are not using the ID to mark a unique element, but more as metadata.
Note that Youtube uses custom html tags that I assume helps them reuse code for not just the website, but also for their app.
Read more about custom elements
Update: Just wanted to show an example on how generating content through an application can help you get away with things that could otherwise be a problem.
Writing Inline css is not recommended mainly because it becomes impossible to maintain the larger the css becomes. However, you can code it in an external file during development, then compile it to be inline using an application and have none of the headaches.
See example
I'm building a simple to-do list app, and while it's working, I suspect there's something I could be doing better.
listItem is the class each element will have as a list item. .delete is a temporary solution to remove a list item.
$('ul').append('<li class="listItem"><h2>' + textField + '</h2><h3 class="delete">X</h3></li>')
Is there a way to insert this HTML while keeping the JavaScript separate from the markup? Can I save the HTML as some sort of prototype that will automatically insert the textField value?
I'm looking at making the markup a bit more complex for each list item, so I don't want it to get even messier. Will I need to add another framework (like AngularJS maybe) to accomplish what I'm trying to do? Is it acceptable to have this much markup in my JavaScript?
Let me know if there's any more of my code that would help to answer the question.
EDIT: It's on GitHub if anyone's interested.
If you are about creating a heavy javascripting rendering, perhaps there are better libraries such has Angular.js. But this question might lead to opinion based answers and be of no good. Who can tell wich framework can fit who's needs?
If your particular needs are just to implement a simple list of elements with text content and a remove button, you can use jQuery.
I fiddled a bit of code for the remove button.
/* element rendering [can be populated within a loop or from an array] */
var textField = "this is text";
$('ul').append('<li class="listItem"><h2>' + textField + '</h2><h3 class="deleteThis">X</h3></li>');
/* remove button */
$(document).on("click", ".deleteThis", function() {
$(this).parent('.listItem').remove();
});
What you'll have to do then is just parsing your html with your text/content.
About your question : "How do I keep behavior and content separate when inserting HTML via jQuery?"; well, you just did it by using jQuery to .append() your element.
Well, AngularJS is a pretty good practice, but you can do something similar.
For example for embedding html code in my DOM I prefer using a javascript template engine as undercorejs (this is one of many), this is very ease and useful for repetitive html task. So your Js code will be more clean.
I recommend you to read about some javascript template engines.
I'm creating an app using phonegap that pulls the majority of its content from a database. It has a few hundred pages so I thought the best option would be to use a single page solution and just keep loading content into the main div when needed.
I have tried using Handlebars to do this but I'm not sure if that was the best solution as I cant get jquery mobile working with it (the app needs lots of accordions). Have also tried creating my own very simple accordions but failed dismally to even get an onlcick event working within the handlebars script tags.
Can anyone recommend a build that would be good for this job please? Or guide me to some example solutions that are along these lines?
I have googled extensively for 2 days now and have tried quite a few suggestions out but no success so decided to post here.
Many thanks
Generate all the content into your div, but using css hide almost all of them. As the user does what needs to be done to activate your paging call the show() function for the first 10 elements, if you consider 10 to be a page.
Use List View pattern of jquery
// adding data on list view
$('#list_view').append('<li >' your data '</li>');
//refreshing list
$("#list_view").listview("refresh");
//removing elements from list
$("#list_view").empty();
You can use multiple div's as well in the list view
use below link for more:
http://api.jquerymobile.com/listview/
1) How to set HTML to already created panel or any other Element?
I am a beginner. I tried the below to set some content inside the HTML
var clickedElement = Ext.getCmp('id').el.child('>');
clickedElement.setHTML("hello");
The above is working fine but the problem is that as the panel has many div's inside it.. the above approach is erasing those inside html (i.e div's) and replacing it with the above content.
I saw through Chrome that the panel has three nested div's. So, if I want to add HTML to it then I need to give something like below:
var clickedElement = Ext.getCmp('id').el.child('>').child('>'); //two times child
When I tried the above approach, I am successfully adding the html content and also the div's doesn't remove. Here the problem is that, I can't see the added content (maybe because of some default stylings, I can see the content is being added in Chrome console though.)
I am just asking whether there is any efficient way of adding HTML to the panel. In my opinion, this should be very easy approach which I am complexing here.
2) How to check whether a Element has a particular child ?
Suppose, for example, If I added a extjs Button as a child(item) into my panel while creating it. (which I can do). How to check whether the panel has the particular element (i.e button here)?
Before asking here, I searched alot and found somewhat relative but not helpful link to my problem.
In ExtJS most components are considered to have only one body element even if you see more on the dom. In contrast to jQuery which is basically added above a markup ExtJS generate the whole markup by itself.
Now to your question, to update the HTML of a component you can simply call the update() method like that
Ext.getCmp('id').update('hello');
See JSFiddle
Ext.ComponentQuery.query('#itemIdOfComponent').update('new value');
Do not set id's on components instead add an itemId configuration and see the documentation for Ext.ComponentQuery.query.
(I've tried posting this on YUI message group but without any luck)
Can anyone tell me how to retrieve the checked state of a yui Button? I've tried by creating the Button in code, which is then outputted as a HTML button but this only changes the title attribute.
When I use checkboxes instead, none of the checkboxes are checked (when iterating through them with jQuery).
Is there an easier way of doing it? Say with the 3.0 Node API, or Element?
EDIT:
To clarify how this problem came about, I'm using the YUI ASP.NET controls. They add controls to the page like this
Sys.Application.add_init(function() { $create(YUIAspNet.Button, {"ButtonID":"yuiMyButton_btn","ButtonName":"yuiMyButton$btn","TabIndex":0,"ButtonType":"checkbox","Text":"Technology"}, null, null, $get("yuiMyButton"));});
So as you can see, finding all buttons is not as simple as I'd like it to have been.
Sorry are you talking about checkbox buttons? Use:
myButton.get("checked")
where myButton is an instance of YAHOO.widget.Button.
Chris, I am the starter of YUI ASP.NET project. I watch the YUI mailing list regularly, I must of missed your question.
I have a more general answer for you and anyone else having the problem and ending up reading this, not just for checkbox button, but for all controls.
On the client, you can have access to the YUI object by calling the .get_YUIControl() method on the custom wrapper client object, then you have the control over the original YUI object. The YUI documentation is very good, and you can find a good description for what you'd like to accomplish.