Develop Reference

how to append input fields using push() function in angularjs?

I am creating add more field functionality in angularjs. I am using below code
Javascript
<script>
function FruitsController($scope){
var div = 'Apple';
$scope.fruits=[];
$scope.addFruit=function(){
$scope.fruits.push(div);
}
}
<script>
HTML
<ul><li ng-repeat="fruit in fruits">{{fruit}}</li></ul>
<button ng-click="addFruit()">Add</button>
Above code works successfully and appends 'Apple' string in body. But I want to append input type text field like string. So I am using below script that does not works.
<script>
function FruitsController($scope){
var div = '<input type="text">';
$scope.fruits=[];
$scope.addFruit=function(){
$scope.fruits.push(div);
}
}
<script>
I know above my code is totally wrong. Please give me some ideo that how to add input type in angularjs

You can render UI element in html. Your HTML looks like
<ul>
<li ng-repeat="fruit in fruits">
<input ng-model="fruit">
</li>
</ul>
<button ng-click="addFruit()">Add</button>
Your controller looks like
<script>
function FruitsController($scope){
var fruit = 'apple';
$scope.fruits=[];
$scope.addFruit=function(){
$scope.fruits.push(fruit);
}
}
<script>

Try this. For input text boxes you need to use ng-model attribute as it is two way data binding.
<ul>
<li ng-repeat="fruit in fruits">
<input type="text" ng-model="fruit">
</li>
</ul>
<button ng-click="addFruit()">Add</button>

<ul>
<li ng-repeat="fruit in fruits">
<input ng-model="fruit">
</li>
</ul>
<button ng-click="addFruit()">Add</button>
Keep your UI/HTML code in your HTML template, keep pure data structures in your controller. Through Angular's two-way data binding, ng-model will directly update your entries in $scope.fruits when your input changes.

Change label with Javascript

I have looked for answers but couldn't find anything. I am trying to change the text I have in a label, but to no success
HTML
<li id="123" class="xxx">
<label class="xxx" for="xxx">Something</label>
</li>
Current Javascript
<script>
documentquerySelector("li#field_2_31 label").innerHTML = 'New label';
</script>

You need a period in between document and querySelector :
document.querySelector("#field_2_31 label").innerHTML = 'New label';

Maybe this is a discrepancy in how you edited the example for this post, but you are selecting li with id field_2_31, and your li has an id 123.

HTML :
<li id="field_2_31" class="xxx">
<label class="xxx" for="xxx">Something</label>
</li>
JS :
document.querySelector('li#field_2_31 label').innerHTML = 'New label';
See Fiddle to worked example.

Getting text value when a list is clicked - jQuery Mobile

I have a list which is being loaded from a php file I am trying to get text inside this list. When i click this list, the console gives me a referenceError. I am going to show just HTML code with comments where data is added from php.
<div data-demo-html="true">
<ul data-role="listview" data-theme="a" data-split-theme="b" data-split-icon="plus" data-inset="true" id="courselist">
<!-- Data below loaded from PHP-->
<li id="clist">
<a href="#page">
<h2> text loaded here </h2>
</a>
</li>
</ul>
<!-- Data loading finished from PHP -->
</div>
<script>
$(function(){
var desc;
$('body').on('click','clist',function(){
desc = $(this).text();
console.log(desc);
});
});
</script>

Your selector is wrong as clist is id of li element, so use '#clist' instead of 'clist':
<script>
$(function(){
var desc;
$('body').on('click','#clist',function(){
desc = $(this).text();
console.log(desc);
});
});
</script>
See jQuery Selector API for more information

You missed id # selector
HTML <li id="clist">
$('body').on('click','#clist',function(){
^^^^^
desc = $(this).text();
console.log(desc);
});
Read Jquery Selector

I am having a few problems trying to create a jquery live search function for basic data set?

I am designing a simple jquery live search function within a widget on a site i'm developing. I have borrowed some code I found and it is working great. The problem is though that instead of using a list like this:
<ul>
<li>Searchable Item 1</li>
<li>Searchable Item 2</li>
etc
I am using a list like this:
<ul>
<li>
<a href="#">
<div class="something>
<img src="something.jpg">
<p>Searchable Item 1</p>
</div>
</a>
</li>
etc.
As you can see the text I want to search is in the p tag. The functions I have used are searching all the other stuff (a href, div, img) and matching text found in those tags as well as the item within the p tag. Sorry if my explanation is a bit confusing but I will show you an example of the code here:
//includes im using
<script type="text/javascript" src="js/jquery-1.7.min.js" ></script>
<script type="text/javascript" src="js/quicksilver.js"></script>
<script type="text/javascript" src="js/jquery.livesearch.js"></script>
//document ready function
$(document).ready(function() {
$('#q').liveUpdate('#share_list').fo…
});
//actual search text input field
<input class="textInput" name="q" id="q" type="text" />
//part of the <ul> that is being searched
<ul id="share_list">
<li>
<a href="#">
<div class="element"><img src="images/social/propellercom_icon.jpg… />
<p>propeller</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="element"><img src="images/social/diggcom_icon.jpg" />
<p>Digg</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="element"><img src="images/social/delicios_icon.jpg" />
<p>delicious</p>
</div>
</a>
</li>
</ul>
also here is the jquery.livesearch.js file I am using
jQuery.fn.liveUpdate = function(list){
list = jQuery(list);
if ( list.length ) {
var rows = list.children('li'),
cache = rows.map(function(){
return this.innerHTML.toLowerCase();
});
this
.keyup(filter).keyup()
.parents('form').submit(function(){
return false;
});
}
return this;
function filter(){
var term = jQuery.trim( jQuery(this).val().toLowerCase() ), scores = [];
if ( !term ) {
rows.show();
} else {
rows.hide();
cache.each(function(i){
var score = this.score(term);
if (score > 0) { scores.push([score, i]); }
});
jQuery.each(scores.sort(function(a, b){return b[0] - a[0];}), function(){
jQuery(rows[ this[1] ]).show();
});
}
}
};
I believe the problem lies here:
var rows = list.children('li'),
cache = rows.map(function(){
return this.innerHTML.toLowerCase();
});
it is just using whatever it finds between the li tags as the search term to compare against the string entered into the text input field. The search function actually does work but seems to find too many matches and is not specific as I am also using a quicksilver.js search function that matches terms that are similar according to a score. When I delete all the other stuff from the li list (a href, img, div, etc) the search function works perfectly. If anyone has any solution to this I would be really greatful, I have tried things like:
return this.children('p').innerHTML but it doesn't work, I'm ok with PHP, C++, C# etc but totally useless with javascript and Jquery, they're like foreign languages to me!

In the jquery.livesearch.js file I believe you can replace this line:
var rows = list.children('li'),
with:
var rows = list.children('li').find('p'),
This should make it so the livesearch plugin will only search the paragraph tags in your list.
You will need to change the .show()/.hide() lines to reflect that you are trying to show the parent <li> elements since you are now selecting the child <p> elements:
Change:
rows.show();//1
rows.hide();//2
jQuery(rows[ this[1] ]).show();//3
To:
rows.parents('li:first').show();//1
rows.parents('li:first').hide();//2
jQuery(rows[ this[1] ]).parents('li').show();//3

Getting value from input control using jQuery

I am using the teleriks treeview control (asp.net mvc extensions), where I may have up to three children nodes, like so (drumroll...... awesome diagram below):
it has its own formatting, looking a bit like this:
<%=
Html.Telerik().TreeView()
.Name("TreeView")
.BindTo(Model, mappings =>
{
mappings.For<Node1>(binding => binding
.ItemDataBound((item, Node1) =>
{
item.Text = Node1.Property1;
item.Value = Node1.ID.ToString();
})
.Children(Node1 => Node1.AssocProperty));
mappings.For<Node2>(binding => binding
.ItemDataBound((item, Node2) =>
{
item.Text = Node2.Property1;
item.Value = Node2.ID.ToString();
})
.Children(Node2 => Node2.AssocProperty));
mappings.For<Node3>(binding => binding
.ItemDataBound((item, Node3) =>
{
item.Text = Node3.Property1;
item.Value = Node3.ID.ToString();
}));
})
%>
which causes it to render like this. I find it unsual that when I set the value it is rendered in a hidden input ? But anyway:...
<li class="t-item">
<div class="t-mid">
<span class="t-icon t-plus"></span>
<span class="t-in">Node 1</span>
<input class="t-input" name="itemValue" type="hidden" value="6" /></div>
<ul class="t-group" style="display:none">
<li class="t-item t-last">
<div class="t-top t-bot">
<span class="t-icon t-plus"></span>
<span class="t-in">Node 1.1</span>
<input class="t-input" name="itemValue" type="hidden" value="207" />
</div>
<ul class="t-group" style="display:none">
<li class="t-item">
<div class="t-top">
<span class="t-in">Node 1.1.1</span>
<input class="t-input" name="itemValue" type="hidden" value="1452" />
</div>
</li>
<li class="t-item t-last">
<div class="t-bot">
<span class="t-in">Node 1.1.2</span>
<input class="t-input" name="itemValue" type="hidden" value="1453" />
</div>
</li>
</ul>
</li>
</ul>
What I am doing is updating a div after the user clicks on a certain node. But when the user clicks on a node, I want to send the ID not the Node text property. Which means I have to get it out of the value in these type lines <input class="t-input" name="itemValue" type="hidden" value="1453" />, but it can be nested differently each time, so the existing code I ahve doesn't ALWAYS work:
<script type="text/javascript">
function TreeView_onSelect(e) {
//`this` is the DOM element of the treeview
var treeview = $(this).data('tTreeView');
var nodeElement = e.item;
var id = e.item.children[0].children[2].value;
...
</script>
So based on that, what is a better way to get the appropriate id each time with javascript/jquery?
edit:
Sorry to clarify a few things
1) Yes, I am handling clicks to the lis of the tree & want to find the value of the nested hidden input field. As you can see, from the telerik code, setting item.Value = Node2.ID.ToString(); caused it to render in a hidden input field.
I am responding to clicks anywhere in the tree, therefore I cannot use my existing code, which relied on a set relationship (it would work for first nodes (Node 1) not for anything nested below)
What I want is, whenever there is something like this, representing a node, which is then clicked:
<li class="t-item t-last">
<div class="t-bot">
<span class="t-in">Node 1.1.2</span>
<input class="t-input" name="itemValue" type="hidden" value="1453" />
</div>
</li>
I want the ID value out of the input, in this case 1453.
Hope this now makes a lot more sense.
if possible would love to extend this to also store in a variable how nested the element that is clicked is, i.e. if Node 1.1.2 is clicked return 2, Node 1.1 return 1 and node 1 returns 0

It's a little unclear what you're asking, but based on your snippet of JavaScript, I'm guessing that you're handling clicks to the lis of the tree & want to find the value of the nested hidden field? If so, you want something like this:
function TreeView_onSelect(e) {
var id = $(e.item).find(".t-input:first").val();
}
Edit: In answer to your follow-up question, you should be able to get the tree depth with the following:
var depth = $(e.item).parents(".t-item").length;

In jQuery you can return any form element value using .val();
$(this).val(); // would return value of the 'this' element.
I'm not sure why you are using the same hidden input field name "itemValue", but if you can give a little more clarity about what you are asking I'm sure it's not too difficult.

$('.t-input').live('change',function(){
var ID_in_question=$(this).val();
});