Develop Reference

Unable to change Span text using JQuery

I am using bootstrap and JQuery.
HTML
<div>
<ul>
<li><strong> Status : </strong><span id="monitorStatusSpan">1111</span></li>
</ul>
</div>
<button type="button" id="disableButton"
class="btn btn-primary" onclick="changeSpan();">Change</button>
JavaScript
function changeSpan() {
$('#monitorStatusSpan span').text('disssssssssssssssssss');
}
Here is the fiddle. http://jsfiddle.net/alamzeeshan/5bw8d2ta/7/
But still the span text is not getting changed.
Does anyone know what am I missing?

Currently, you're looking for a span inside your #monitorStatusSpan (#monitorStatusSpan span).
function changeSpan() {
$('#monitorStatusSpan span').text('disssssssssssssssssss');
}
It's enough to only look for the ID like this:
function changeSpan() {
$('#monitorStatusSpan').text('Your text here');
}

You have incorrect selector. Selector you have used finds #monitorStatusSpan element and then span element in it. which do not exist.
As IDs are unique, you can simply use id selector to target the required element:
function changeSpan() {
$('#monitorStatusSpan').text('disssssssssssssssssss');
}
working demo

HTML
<div>
<ul>
<li><strong> Status : </strong><span id="monitorStatusSpan">1111</span></li>
</ul>
</div>
<button id="disableMonitorButton" class="btn btn-primary">Change</button>
JS
$("#disableMonitorButton").click(function() {
$('#monitorStatusSpan').html('disssssssssssssssssss');
});
PS. DONT USE inline JS!

Try this
function changeSpan() {
$('#monitorStatusSpan').text('disssssssssssssssssss');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<ul>
<li><strong> Status : </strong><span id="monitorStatusSpan">1111</span></li>
</ul>
</div>
<button type="button" id="disableButton" class="btn btn-primary" onclick="changeSpan();">Change</button>
Your current selector selects all span's inside element with id #monitorStatusSpan but in this element there are not any span's.
For your current selector html should look like this
<span id="monitorStatusSpan"><span>TEST</span></span>

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.

can't get data attribute with jquery

I am trying to retrieve data-cost("#packages") and append it to #form next to Ticket-price. I am not getting any errors in console. I can't seen to understand what went wrong.
JS:
<script src="jquery-1.11.2.js"></script>
<script>
$(document).ready(function()
{
var price=$("#packages").data("cost");
var amount=$("<span>"+price+"</span>");
$("#form").next().next().append(amount);
});
</script>
HTML:
<div id="packages">
<h2><u>Tourism Packages:</u></h2>
<ul>
<li data-name="Southern Travels">Travels Name: Southern Travels</li>
<li data-cost="2000">Cost per person: 2000</li>
<li>Duration: 3 days & 4 nights</li>
</ul>
</div>
<div id="form">
<label>Number of persons </label>
<input id="input"type="text"/ autofocus>
<p id="ticket-price">Ticket Price</p>
</div>

For this to work as it is, you must edit your HTML as following:
<div id="packages" data-name="Southern Travels" data-cost="2000">
<h2><u>Tourism Packages:</u></h2>
<ul>
<li>Travels Name: Southern Travels</li>
<li>Cost per person: 2000</li>
<li>Duration: 3 days & 4 nights</li>
</ul>
</div>
Either that, or access the data properties of the <li> elements instead of the div#packages (i.e #packages ul li instead of #packages)

$(document).ready(function() {
// Targeting 2nd li element inside #packages
var price=$("#packages li").eq(2).data("cost");
// create a span element with text 'price'
var amount=$("<span>"+price+"</span>");
// append as last child of the form
$("#form").append(amount);
});

You need to look for your data attribute by name - and look at the LI's.
You also need to build your html string and append it properly to the #ticket-price
WOKING EXAMPLE (FIDDLE): http://jsfiddle.net/ojLo8ojz/
JS:
$(document).ready(function(){
var price = $("#packages li[data-cost]").attr("data-cost");
var amount = "<span> "+price+"</span>";
$("#ticket-price").append(amount);
});

OnMouseOver drop down not coming

onmouseOver of eacuser i want to show the change password as a dropdown(as can seen in attached image) but with my code changes i am getting change password next to eacuser link.Can anyone please give me some hint how to achieve.I attached the two image file.please check for reference
<div id="appLinks">
<ul id="appLinks_list" class="nav">
<span id="appLink_csrname" class="ui-state-default csrname"><a onmouseover="onMouseOver()">eacuser</span>
<li id="appLink_chngpwd" class="ui-state-default chngpwd">Change Password</li>
<li id="appLink_about" rtlOrder="3"><img src="${link.getContextPath()}${msg.get("icon.information")}" border="0px;" align="top">About</li>
<li id="appLink_logout" rtlOrder="2"><img src="${link.getContextPath()}${msg.get("icon.logout")}" border="0px;" align="top">LogOut</li>
<li id="appLink_help" rtlOrder="1"><a target="eachelp" href="$msg.get("eac.helpPath")"><img src="${link.getContextPath()}${msg.get("icon.help")}" border="0px;" align="top">Help</a></li>
</span>
</ul>
</div>
<script>
$(document).ready(function(){
$(".csrname").mouseleave(function(){
//$('#appLink_chngpwd').hide();
$(".csrname li").css("display","none");
});
$(".csrname").mouseover(function(){
//$('#appLink_chngpwd').show();
$(".csrname li").css("display","block");
});
</script>

use this,
<script>
$(document).ready(function(){
$('#appLink_chngpwd').hide();
$(".csrname").mouseover(function(){
$('#appLink_chngpwd').show();
});
$(".csrname").mouseleave(function(){
$('#appLink_chngpwd').hide();
});
});
</script>

In your code you have used like below.
$(".csrname li").css("display","none");
It means you are making display none for child property of span having class .csrname
At present in your code, "Change Password" is sibling element not a child.
So change your code like below.
$(".csrname + li#appLink_chngpwd").css("display","none");

how can i find closest span?

let's say i am having fallowing html structure-
<div data-theme="a" class="ui-btn ui-btn-icon-right ui-btn-corner-all ui-shadow ui-btn-up-a">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text">Select One</span>
<span class="ui-icon ui-icon-arrow-d ui-icon-shadow">
</span>
</span>
<select onchange="selectState(this,'ADDR_SHIP_STATE')" id="ADDR_SHIP_STATE" name="ADDR_SHIP_STATE">
<option>Hi</option>
<option>Hello</option>
<option>How</option>
<option>are</option>
<option>you</option>
</select>
</div>
what i am trying to do is on change of select box, take the text of selected option and place it inside span(replace select one with this data) having class name ui-btn-text
below is the code which i ahve tried so for without any luck
function selectState(id,stateId){
var selectedState = $("#"+stateId+" option:selected").text();
$(id).closest("ui-btn-text").text(selectedState);
}
Please suggest me how can i do this..

.closest()ref will progress up the DOM but won't get down like .parents() does (btw, you didn't add the . (dot) for the class search but this is probably a typo)
Here is a try:
$(id).parent().find(".ui-btn-text").text(selectedState);

Try -
function selectState(id, stateId) {
var selectedState = $("#" + stateId + " option:selected").val();
$(id).parents('div').find(".ui-btn-text").text(selectedState);
}
This will -
Find the parent 'div' of the 'select' element
Use find to get the .ui-btn-text element contained in the parent div
Demo - http://jsfiddle.net/H2pea/1

Using attributes like onchange is not really unobtrusive way if you use jQuery. This is better:
$('#ADDR_SHIP_STATE').change(function() {
$(this).prev().find('.ui-btn-text').text($(this).val());
});