We Keep Coding

Issue in handling dropdown in protractor using typescript

I am having issues in selecting dropdown in protractor
My Dom looks like this
This is the XPath to select the dropdown with value Yes
//label[contains(text(),"is your family safe?")]//parent::app-control-header//following-sibling::select//option[contains(text(),'Yes')]
The following is the way I am trying to select the drop down with the XPath above
First I created an XPath which retrieves the select block and stored in dropDownBlock as below
dropDownBlock = element(by.xpath('//label[contains(text(),"is your family safe?")]//parent::app-control-header//following-sibling::select'));
FamilysafeDropdown () {
selectDropdownByText(dropDownBlock, "yes");
}
I created a function which accepts the element finder and string and selects the value based on the string passed
public selectDropdownByText(dropdownElement: ElementFinder, text: string) {
dropdownElement.click();
dropdownElement.element(by.xpath('//option[contains(text(), "' + text + '")]')).click();
}
My problem here is the code is always finding the element with xpath
//option[contains(text(), "Yes")]" and there are multiple dropdowns in my DOM with this XPath.
so I wanted to select value with XPath
//label[contains(text(),"is your family safe?")]//parent::app-control-header//following-sibling::select//option[contains(text(),'Yes')]
I don't understand the problem here, can someone point me in the right way.

The issue comes from the xpath used in following code line:
dropdownElement.element(by.xpath('//option[contains(text(), "' + text + '")]')).click();
You should use .//option[contains(text(), "' + text + '")], the prefix . at here means search HTML element start from dropdownElement.
Without the ., it means search HTML element start from the beginning of the HTML page.
In XPath, . represents current node.

How to us $.data in a loop to display correctly for each div

When I click a marker on my map, I want to display data from the database associated with that marker. Currently I am doing this for the divs that I create. I am having a problem when I click on a div to open my form under it, I want to load the same data into the form, but currently the only data that will load into each for is the first one that ran through the loop.
Another words, my venue-list div might hold 3 venues for this one location, and I can click on each div and display a form under it, but if "Sally's Salon" is the first div in the list, every form will display "Sally's Salon" instead of their own name. Here is my code:
// initially detach form to be attached to each div on click
var editForm = $('.edit-container').detach();
function fillForm(title, priority) {
$('.venue-input').val(title);
$('.priority-input').val(priority);
}
for(var i = array.length -1; i>=0; i--) {
var prop = array[i].feature.prop
if(prop.title) {
// create variable to hold html
var html = $([
"<div class='venue-item'>",
" <span><strong>Venue Name</strong></span>",
" <span class='venue-name venue-title' data-title=" + prop.title + ">" + prop.title + "</span>",
"<span class='venue-priority' data-priority=" + prop.prioritylevel + "><strong>Priority</strong>" + ' ' + prop.prioritylevel + "</span></div>"].join("\n"));
// append venue item to venue list div with event handler to add form and prefill when clicked
$(html).appendTo('.venue-list').on('click', function() {
$(this).after(editForm);
fillForm($('.venue-title').data('title'), $('.venue-priority').data('priority'));
});
}
any input would be helpful, I've been battling this for a couple days now, not sure if I am even attaching the html elements correctly but I mainly just want to be able to click on one of the html elements I create and then the data gets loaded into the form so it can be manipulated.

You are appending multiple copies of your content, however there are 2 elements using the same id (venue-priority & venue-title) - which should be unique on a web page.
Thereafter, you use jQuery to get those elements, however as jQuery expects id's to be unique, it will just grab the first (or last, im not sure) element with that Id.
The solution is not to use duplicated id's in your markup.

You seem to have a syntax error on line 6. You can view errors in a browser using developer tools in case there are others.
$('#priority-input.val('priority);
should be
$('#priority-input').val('priority');

Actually, if you want to set the value to the value of the parameter, you should use
$('#priority-input').val(priority);
not
$('#priority-input').val('priority');

Adding additional html list elements using JSON and JavaScript

I can currently add a <li> element to my webpage using Javascript with information from a JSON file.
However, when I try and add another <li> element underneath the first one using the same methods it replaces the first one instead of adding it below the first one.
How do I get it to add another instead of replacing it?
Here is my Javascript code:
$('#links').html('<li>' + jsonObj.pageText[5].ref1 + '</li>')
$('#links').html('<li>' + jsonObj.pageText[5].ref2 + '</li>')
ref2 replaces the first one.

Use append or preppend instead of html

The .html(...) command replaces the html, so you would need to:
$('#links').html('<li>' + jsonObj.pageText[5].ref1+'</li>')
$('#links').html($('#links').html() + '<li>' + jsonObj.pageText[5].ref2+'</li>')
...or:
$('#links').append($('<li>').html(jsonObj.pageText[5].ref1))
$('#links').append($('<li>').html(jsonObj.pageText[5].ref2))

How to bind events to dynamically created JQuery DOM elements

I'm having trouble referencing an object from within the plugin I'm attempting to make.
The plugin is assosciated with a div container.
When the dom is ready it loads in startup defaults - creates its own div with id's it knows and an un ordered list. I can add list items and they work correctly using $this.append(..). However I want to add a feature where a click on an individual list item does something.. for now alert will suffice.
Normally I would be able to do:
$("#myId").click(function(){...
How would i add such functionality to a plugin?
I want that action set by the plugin itself, so clicking on list items created by the plugin are already attached to some functionality which I have written into the jquery plugin.

Based on your comment, you could store the new tab in a variable:
var newTab = $("<li id='tab#" + o.tabCount + "' myTabPane='" +
o.tabId + o.tabCount + "' class='tab'><h3>Tab " + o.tabCount
+ "</h3></li>");
$('#' + o.tabListId).append(newTab);
newTab.click(function() {
var paneId = '#' + $(this).attr('myTabPane');
$(paneId).siblings().hide();
$(paneId).show();
});
Link to working example at jsfiddle.
By the way, your original script had the second ' in the wrong place:
$("<li id='tab#'" + o.tabCount + " class='tab'><h3>Tab "
^^^

You would want to reference them after doing the append by tag name not by ID.
$(this).find("li").click(function(){ /* do work */});
If you absolutely have to reference it by ID you can do:
$(this).find("li").each(function(){
var id = $(this).attr("id");
/* do work */
});

jquery - add values from one listbox to another, but do not include blank lines?

I have some jQuery code that copies the selected values from one listbox to another:
$(adPerson + " option:selected").each(function(){
$(toNames).append($(this).clone());
});
I'm trying to make sure no blank lines are added to the destination listbox, so I tried this:
$(adPerson + " option:selected").each(function(){
if($(this).text != "")
{
$(toNames).append($(this).clone());
}
});
The above code does not work - I think is is because of the way .each is used.
Any ideas?
Derek

First off, you need to use text() instead of text if you wanted to test that way. It is a function, not a property.
However, all you need to is use the :not(:empty) jQuery selector:
$(adPerson + " option:selected:not(:empty)").each(function(){
$(toNames).append($(this).clone());
});
You could further simplify it by using this:
$(toNames).append( $(adPerson + " option:selected:not(:empty)").clone() );