Develop Reference

ng-click event on html5 datalist not working angularjs

Iam trying an auto search and on selecting a product., I need to redirect to the product URL associated to selected dropdown. Iam able to get all search results.
I have created datalist for all search list and created ng-click event on datalist to send the selected details to controller. But ng-click is not working in datalist. Can you help me out
for.eg. in (key,data) ., I need to show data in front end search box., but on selecting that data from datalist., I need to send its respective key to controller
problematic section for your reference (Full code in plunker):
<h2>Custom search field</h2>
<div id="custom-search-input">
<div class="input-group col-md-12">
<input type="text" class="form-control input-lg" list="suggestions" placeholder="search" ng-model="obj.searchText" ng-focus="searchSuggest()" />
<span class="input-group-btn">
<button class="btn btn-info btn-lg" type="button" ng-click="showProduct(obj)">
<i class="glyphicon glyphicon-search"></i>
</button>
</span>
</div>
</div>
<div>
<datalist id="suggestions">
<p ng-repeat="values in suggestionResults track by $index"><option ng-repeat="(key,data) in values" value="{{data}}" ng-model="selectedProduct" ng-click="showProduct({key: key, data: data})"></p>
</datalist>
</div>
Here in above code., u can see key and data. I need to just show Data value but on selecting one option., i need to send the respective URL link to conroller. Created datalist in ng-repeat
Please select a value from dropdown in textbox from plunker link below
*
I have updated plunker so that URL also can be seen in search
dropdown., I need to pass that URL to conroller in short. please help
me how to achieve it
*
plnker code here

Your ng-click triggered fine in chrome, I can see your console.logs data.
I check your code, the reason that your search logic is not working and you keep getting "not matching" in your console, is that you are using wrong condition, you are not checking the value, with search string, you are checking "Key/Value object" with search string.
change your if condition in showProduct method to this :
if ($scope.suggestionResults[i][Object.keys($scope.suggestionResults[i])[0]] == searchText) {
console.log(Object.keys(response.data[i])[0]);
$scope.redirectLink = Object.keys(response.data[i])[0];
}else{
$scope.redirectLink = "not matching";
}

Check this plunkr
I wrote another method
$scope.inputChanged = function(data){
var obj = _.find($scope.suggestionResults,function(o){
var keyArr = Object.keys(o);
return o[keyArr[0]] === data
})
$scope.showProduct(obj)
}
which will work as a workaround to achieve what you are looking for. From here you can call $scope.showProduct(obj) and achieve ng-click event behavior

If check box is check display div but hide previous open div

<input type="checkbox" data-related-item="title1">
<span class="caption">Title</span>
<div class="hidden">
<h2>Title</h2>
<input type="text" id="title1">
<span class="caption">Lorem</span>
</div>
<hr>
<input type="checkbox" data-related-item="title2" checked>
<span class="caption">Title</span>
<div class="hidden">
<h2>Title</h2>
<input type="text" id="title2">
<span class="caption">Lorem</span>
</div>
Javascript
function evaluate(){
var item = $(this);
var relatedItem = $("#" + item.attr("data-related-item")).parent();
if(item.is(":checked")){
relatedItem.fadeIn();
}else{
relatedItem.fadeOut();
}
}
$('input[type="checkbox"]').click(evaluate).each(evaluate);
This was about this post: if check box is checked display div
I would like to ask how do I use this code but every time you click another checkbox it hides the previous div and opens a new one. Just showing one div/content at a time instead of showing both open. Thanks.
DEMO: http://jsfiddle.net/zgrRd/5/

You must use change instead of click function and inside evaluate function, add the following line at the start
$('input[type="checkbox"]').not($(this)).prop('checked',false).trigger('change');
Watch here fiddle

If I understand you correctly, you want only one <div> open at a time, which should correlate to a checkbox. I interpret this, that you also only checkbox checked at a time, so all other checkboxes wold need to be unchecked.
Solution 1: Use radio buttons
Solution 2: Uncheck all checkboxes and re-check the current one.
The solution for showing the <div>s is based on solution 2. Just hide all <div>s first and then show your related <div>. Give all your <div>s a certain class (e.g. class="toggling") or name to be used as a selector for closing all.
$('input[type="checkbox"]').on("click", function() {
var item = $(this);
var relatedItem = $("#" + item.attr("data-related-item")).parent();
$('.toggling').fadeOut(); //hide all
relatedItem.FadeIn(); //show the current one
});

get input attribute on button click

I have a page with mutiple inputs,each input has a button. is there anyway of getting the inputs value on button click, without hardcoding the inputs id?
.prev doesnt work as there is a span directly after input
example
js
$('button').click(function () {
var inputcontent = $(this).prev('input').attr('id');
console.log(inputcontent);
});
html
<input type="text" id="1">
<span class="input-group-btn">
<button type="button">Go!</button>
</span>

You need to use .parent() here since input is the immediate previous sibling of parent <span> of the button:
var inputcontent = $(this).parent().prev().attr('id');
Fiddle Demo
Side note: id started with number is invalid HTML4 markup. Reference

How to select form input based on label inner HTML?

I have multiple forms that are dynamically created with different input names and id's. The only thing unique they will have is the inner HTML of the label. Is it possible to select the input via the label inner HTML with jQuery? Here is an example of one of my patient date of birth blocks, there are many and all unique except for innerHTML.
<div class="iphorm-element-spacer iphorm-element-spacer-text iphorm_1_8-element-spacer">
<label for="iphorm_081a9e2e6b9c83d70496906bb4671904150cf4b43c0cb1_8">events=Object { mouseover=[1], mouseout=[1]}handle=function()data=Object { InFieldLabels={...}}
Patient DOB
<span class="iphorm-required">*</span>
</label>
<div class="iphorm-input-wrap iphorm-input-wrap-text iphorm_1_8-input-wrap">
<input id="iphorm_081a9e2e6b9c83d70496906bb4671904150cf4b43c0cb1_8" class="iphorm-element-text iphorm_1_8" type="text" value="" name="iphorm_1_8">events=Object { focus=[1], blur=[1], keydown=[1], more...}handle=function()
</div>
<div class="iphorm-errors-wrap iphorm-hidden"> </div>
This is in a Wordpress Plugin and because we are building to allow employees to edit their sites (this is actually a Wordpress Network), we do not want to alter the plugin if possible.
Note that the label "for" and the input "id" share the same dynamic key, so this might be a way to maybe get the id, but wanted to see if there is a shorter way of doing this.
Here I cleaned up what is likely not used...
<div>
<label for="iphorm_081a9e2e6b9c83d70496906bb4671904150cf4b43c0cb1_8">
Patient DOB
<span class="iphorm-required">*</span>
</label>
<div>
<input id="iphorm_081a9e2e6b9c83d70496906bb4671904150cf4b43c0cb1_8">
</div>

You can use the contains selector to select the Patient DOB labels, then find the related input.
$('label:contains("Patient DOB")').parent('div').find('input');
This assumes that the label and input are wrapped in the same div and may not work if more than one pair is in the same div. At least the first part will get you the labels that contain Patient DOB, then you can adjust the later parts to find the correct input element.
For more help on jquery selectors, see the API.
Here is a fiddle demonstrating this.

var getForm = function(labelInnerHtml) {
var $labels = jQuery('label');
$labels.each(function() {
if (jQuery(this).html() == labelInnerHtml) {
var for_id = jQuery(this).attr('for');
return jQuery('#'+for_id);
}
});
return [];
};​​

The class iphorm_1_8 on the input is unique for each form element. So it's simple.
$('.iphorm_1_8');

Jquery appending value of html to input box but not text within a span

I have an ajax query that brings back a searched name and id:
if($result)
{
while($row=mysqli_fetch_array($result))
{
extract($row);
echo "<li>".$row['first_name']." ".$row['last_name']."<span class='uid'>".$row['user_id']."</span></li>";
}
}
What I am trying to do is append the first and last names to a search box and then retrieve the userid and place that in another search box.
$('li').click(function(){
$('.client_name').not('span.uid').val($(this).text());
$('.listbox').hide();
});
The above jquery does not work as I feel I am using the 'not' property wrongly. Is it possible to split these values ?
html is as follows
<div class="form_align">
<label>
Client Name
</label>
<input type="text" class="client_name" />
<label>
Client Account No.
<span class="small">This is important !</span>
</label>
<input type="text" class="client_account_no" />
<div class="listbox">
<div class="nameslist">
</div>
</div>
</div>

I recommend changing the AJAX response to surround the names in their own <span class='ajaxname'>. That will make it a lot simpler to target the name separately from the sibling node <span class='uid'>. Otherwise, to exclude the value of the <span class='uid'> you would need to do something tricky like temporarily remove it from the DOM to get the <li>'s text then place it back in. All way too complicated.
echo "<li><span class='ajaxname'>".$row['first_name']." ".$row['last_name']."</span><span class='uid'>".$row['user_id']."</span></li>";
Since the AJAX response sends a new <li> into your DOM, you will need to use .on() to bind the click event.
$('li').on('click', function(){
// Get the name from its <span> and put it into the input
$('.client_name').val($(this).find('.ajaxname').text());
// Get the uid and put it inot .client_account_no
$('.client_account_name').val($(this).find('.uid').text());
$('.listbox').hide();
});
And what do you know, it works (jsfiddle).
Addendum:
Other answer never materialized, so here is an arguably better solution using a data-uid attribute in the AJAX-returned HTML
// PHP supplies the user_id in an HTML attribute data-uid
echo "<li data-uid='" . $row['user_id'] . "'>".$row['first_name']." ".$row['last_name'] . "</li>";
The JavaScript has a much easier job then:
$('li').on('click', function(){
// Get the name, which is just the <li>'s text content...
$('.client_name').val($(this).text());
// Get the uid from the data-uid attribute
$('.client_account_name').val($(this).attr('data-uid'));
$('.listbox').hide();
});