I'm facing a problem with ng-show in Angularjs. I have a textbox where a user can enter the host name of a server. On entering this information, the hostname of the server gets sent to the backend system which verifies if the server exists or not. I am currently displaying a loading icon in my textbox using bootstrap, font awesome and angularjs. When I receive a response from the server, I change the isLoaded variable to true and I expect the loading icon to stop showing. However, this does not happen. Whatever state the icon is first set to, it never changes after that.
Here's the simplified version of my problem. Plunker Link Here
HTML
<form>
<div class="form-group has-feedback">
<label for="server">Server:</label>
<input type="text" id="server" class="form-control" placeholder="server host name">
<span ng-show="{{testVm.state}}" class="fa fa-spinner fa-spin form-control-feedback" aria-hidden="true"></span>
<button class="btn btn-primary" ng-click="testVm.turnOn()">Activate</button>
<button class="btn btn-primary" ng-click="testVm.turnOff()">Deactivate</button>
</div>
</form>
Angular Code:
angular
.module('test',[])
.controller('TestController',TestController);
function TestController() {
var testVm = this;
testVm.turnOn = turnOn;
testVm.turnOff = turnOff;
testVm.state = false;
function turnOn() {
testVm.state = true;
}
function turnOff() {
testVm.state = false;
}
Any help is appreciated. Thanks.
You are using ng-show the wrong way. You don't need the double curly braces, because you're not evaluating the string value of the variable.
<span ng-show="testVm.state" class="fa fa-spinner fa-spin form-control-feedback" aria-hidden="true"></span>
Fixed plunker
Related
when user click for a second time click do not work, user need to reload the page again to it works
<script>
$(document).ready(function() {
$("#like_post").click(function(e) {
// $("#like_post").on("click", "#like_post", function (e) {
e.preventDefault();
var post_info = $("#post_info :input").serialize();
$.post("backend/ajax/like_post.php", post_info).done(function(data) {
$("#like_post").html(data);
$("#like").load(location.href+" #like>*","");
}).fail(function() {
//alert("Error submitting forms!");
})
})
})
</script>
this is the backend return from db
if user liked it will show
<div id="like_post><a href="" id="l"><input type="hidden" value="unlike" name="like_button" /><i style="color:red" class="fa fa-heart fa-2x" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="'.$lang['you_liked_it'].'"></i>
</a></div>
else it will show
<div id="like_post"> <a href="" id="l"><input type="hidden" value="like" name="like_button" /><i class="fa fa-heart-o fa-2x" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="'.$lang['like_it'].'"></i>
</a></div>
the same validation is on frontend where is will change the hidden input to like, or unlike , my backend check is fine and returning all ok when I check the html response, but the problem is that jquery do not work when user like and unlike without reload the page, it just get the first click and after that user need to reload the page to it works.
I had a similar issue before and it was something with event delegation.
Use the comment line in your code without "#like_post":
$("#like_post").on("click", function (e) {
});
I would like for a certain button element to contain plain text by default, but then contain HTML based on some variable in my Angular scope. My goal is to have the button say "Save", but then become disabled and display a loading wheel when clicked (while awaiting a response from a long AJAX request). The problem is, Angular is displaying the literal text of my ternary operator in the button rather than the result of the expression.
Here's what my button looks like:
<button type="submit" ng-disabled="IsLoading" ng-click="OnClick()">
{{ IsLoading === false ? "Save" : "<i class='fa fa-spinner fa-pulse'></i>" }}
</button>
When I change the HTML to just some plain text (for instance, "Loading..."), then it works fine.
How can I get it to display the result of the expression rather than the text of the expression itself? Thanks.
Side note: I tried to get a demo up and running, but it seems that I can't figure out how to wire up the Angular properly using JSFiddle. This is not the purpose of my question, but I'd really like to know where I'm going wrong so I can successfully make simple Angular demos in the future. Any advice is appreciated.
Check out this fiddle
<div ng-app="myApp" ng-controller="LoadingController">
<div style="float: left;">
<button type="submit" ng-disabled="IsLoading" ng-click="OnClick()">
<span ng-if="!IsLoading">
Save
</span>
<span ng-if="IsLoading">
<i class="fa fa-spinner fa-pulse"></i>
</span>
</button>
</div>
<div style="float: left;">
<button type="submit" ng-disabled="IsLoading" ng-click="OnClick()">
<span ng-if="!IsLoading">
Save
</span>
<span ng-if="IsLoading">
Loading...
</span>
</button>
</div>
</div>
js
angular.module("myApp",[]).controller('LoadingController', function LoadingController ($scope) {
$scope.IsLoading = false;
$scope.OnClick = function() {
$scope.IsLoading = true;
window.setTimeout(function() {
$scope.IsLoading = false;
}, 1000);
};
});
note:Angular 1.1.5 added a ternary operator support, and your fiddle pointing to older version, that's why its not working
I will suggest to google about the following 3 things which will serve your needs in any way. You will easily find it
ng-if
ng-show
ng-hide
ng-hide & ng-show will just play around by switching the css display property while ng-if will only add the html in case required condition equals to true.
<input type="checkbox" ng-model="flag" ng-init="flag= true">
<div ng-if="flag">
<h1>Welcome</h1>
<p>Hello mate.</p>
</div>
I think you are trying to achieve this
All codes are in that link. Posted important part code
<button type="submit" ng-disabled="IsLoading" ng-click="OnClick()">
<span ng-hide="IsLoading">Save</span>
<span ng-show="IsLoading"><i class='fa fa-spinner fa-pulse'></i </span>
</button>
WORKING DEMO
Try this:
https://plnkr.co/edit/rguvZ2Xs4lwl4QhA9Cv0
<script>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, $timeout) {
$scope.isLoading = false;
$scope.click = function() {
$scope.isLoading = true;
$timeout(function() {
$scope.isLoading = false;
}, 2000);
}
});
</script>
<style>
.loadingButton.loading span {
display: none;
}
.loadingButton.loading i {
display: block;
}
.loadingButton i {
display: none;
}
</style>
<button type="submit" ng-disabled="isLoading" ng-click="click()" class="loadingButton" ng-class="{'loading': isLoading}">
<span>Save</span>
<i class='fa fa-spinner fa-pulse'>icon</i>
</button>
The "Angular way" would by this
<button type="submit" ng-disabled="IsLoading" ng-click="OnClick()">
<span ng-hide="IsLoading">Save</span>
<i ng-show="IsLoading" class='fa fa-spinner fa-pulse'></i>
</button>
But you need to actually load Angular.js in your jsfiddle, i.e. <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
Working Plunker: http://plnkr.co/edit/ELYDsfIsbeo7sSvub6Nx?p=preview
Wrap your i element in an div with the ng-show or ng-hide element and then apply your expression to the value of either of those two directives.
Check this jsfiddle , Its a working example of what you are asking for
Updating a little code :
<div ng-app ng-controller="Controller">
<div style="float: left;">
<button type="submit" ng-disabled="IsLoading" ng-click="OnClick()">
{{ IsLoading === false ? "Save" : "<i class='fa fa-spinner fa-pulse'></i>" }}
</button>
</div>
<div style="float: left;">
<button type="submit" ng-disabled="IsLoading" ng-click="OnClick()">
{{ IsLoading === false ? "Save" : "Loading..." }}
</button>
</div>
</div>
I want to change the content of a span in my form
HTML:
<form action="javascript:submit()" id="form" class="panel_frame">
<label>Origin:</label>
<div class="input-group" id="input-group">
<input type="text" id="origin" name="origin" class="form-control">
<span class="input-group-btn">
<button id="btn-default" class="btn btn-default" type="button">
<span class="glyphicon glyphicon-pushpin" aria-hidden="true"></span>
</button>
</span>
</div>
What I want change is che content of <span class="input-group-btn"> with
<button id="btn-default" class="btn btn-default" type="button">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
So what change is: the icon pushpin to remove and the action useCurrentPosition to clearPosition.
I' using jquery and despite I've read other answer about similar question on Stack like: How can I change the text inside my <span> with jQuery? and how to set a value for a span using JQuery I haven't solved the issue.
I tried:
$("#input-group span").html('
<button id="btn-default" class="btn btn-default" type="button" onclick="br_bus.useCurrentPosition()">
<span class="glyphicon glyphicon-pushpin" aria-hidden="true"></span>
</button>
');
,giving an id to the span and also modify the full div, but none solved my problem.
What am I missing?
Here's a way to overcome the problem of changing the onclick attribute, which is bad practice, without storing a Global var, and using jQuery delegation (learn to use it, it's really good):
$(document).on('click','.btn', positionChange); // Give that button an id on his own and replace '.btn' with '#newId'
// Not using an anonymous function makes it easire to Debug
function positionChange(){
var $btn = $(this), // Caching jQuery elements is good practice
$span = $btn.find('span'), // Just caching
pushpinApplied = $span.hasClass('glyphicon-pushpin'); // Check which icon is applied
( pushpinApplied ) ? useCurrentPosition() : clearPosition();
$span.toggleClass( 'glyphicon-pushpin glyphicon-remove' );
}
Rather than changing the function called in the onclick attribute I suggest having a flag in one function to define the logic it should follow.
For example:
function positionChange(this){
var $this = $(this);
if(!$this.data("currentpositionused")){
//useCurrentPosition() code here
$this.data("currentpositionused", true);
}
else {
//clearPosition() code here
$this.data("currentpositionused", false);
}
Then change your HTML to:
<button class="btn btn-default" type="button" onclick="positionChange(this)">
If you want to change only the onclick attribute of the button inside the particular span you can use the following in your script.,
$(document).ready(function(){
$("span.input-group-btn button").attr("onclick","clearPosition()");
});
EDIT
$(document).ready(function(){
$("span.input-group-btn button").attr("onclick","clearPosition()");
$("span.input-group-btn button span").attr("class","Your_class");
});
And also learn about how to change/add/remove attribute values....
Try this:
$("span.input-group-btn").html('<button class="btn btn-default" type="button" onclick="clearPosition()">
<span class="glyphicon glyphicon-pushpin" aria-hidden="true"></span>
</button>');
Is it like This ?
how to change onclick event with jquery?
$("#id").attr("onclick","new_function_name()");
jquery change class name
$("#td_id").attr('class', 'newClass');
If you want to add a class, use .addclass() instead, like this:
$("#td_id").addClass('newClass');
I'm trying to refresh one ID of my page within the click of a button.
I've tried several ways but none of them work. Although I've created the button to refresh it, it keep the submission of the page (triggering the validation event). So, each time I click that button, he tries to submit the form, validation the inputs instead refresh that div.
Here's my code right now:
function refreshCaptcha() {
$("#captcha_code").attr('src','./inc/captcha.php');
}
<div class="form-group">
<div class="col-xs-4">
<button class="btn btn-sm btn-warning" id="refreshcap" name="refreshcap" onclick="refreshCaptcha();">
<i class="fa fa-refresh push-5-r"></i>
<img id="captcha_code" src="inc/captcha.php" />
</button>
</div>
<div class="col-xs-8">
<div class="form-material floating">
<input class="form-control" type="text" id="cap" name="cap">
<label for="cap">Captcha</label>
</div>
</div>
</div>
Can someone help me trying to get what's wrong?
Thanks.
Assuming that your button is inside the form,
add type in your button
which will stop button from submitting your form
<button type="button" class="btn btn-sm btn-warning" id="refreshcap" name="refreshcap" onclick="refreshCaptcha();">
<i class="fa fa-refresh push-5-r"></i>
<img id="captcha_code" src="inc/captcha.php" />
</button>
other than that you can use javascript return false; in your function end
with js
<script>
$(document).ready(function() {
$("#refreshcap").on("click",function(event){
event.preventDefault();
$("#captcha_code").attr('src','./inc/captcha.php');
});
});
</script>
with this you wont need to call on click event this will do it for you, no matter type is button or submit
I think your JS function should return false; in order to not submit the form.
<script>
function refreshCaptcha() {
$("#captcha_code").attr('src','./inc/captcha.php');
return false;
}
</script>
I have date picker in angular using bootstrap UI. This code is working very fine in IE but its not get open in chrome. As after calling the method open () input box get focused but date picker popup not opens. Any help will be really appreciable. Thanks in advance
<p class="input-group">
<input is-open="opened" type="text" datepicker-popup="M/d/yyyy" ng-model="Date" datepicker-options="dateOptions" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
Java Script
$scope.open = function () {
$scope.opened = true;
};
You need to stop the click event from propagating from the button as it will cause the datepicker to close instantly...
<button type="button" class="btn btn-default" ng-click="$event.stopPropagation(); open();">
<i class="glyphicon glyphicon-calendar"></i>
</button>
Demo - JSFiddle
it may correct way to use above solution .
when you use $event.preventDefault(); $event.stopPropagation(); be carefully . it may affect other components events too. the live code is http://jsfiddle.net/mDLzn/34/
$scope.open = function (event) {
event.stopPropagation();
event.preventDefault();
$scope.opened = true;
console.log('foo'); };