I don't know if this makes any sense but I have a form with checkboxes and once the user clicks on the box it will show a hidden message. But once I reload the browser, the checkbox is still checked off but the hidden message is no longer there.
<input type="checkbox" id="CB6" name="" value="">
<table name="hidden" id="hidden" style="display:none;">
<tr>
<td>It works</td>
</tr>
</table>
<script type="text/javascript" language="JavaScript">
$(document).ready(function() {
$('#CB4').click(function() {
if($(this).is(':checked')) {
$('#hiddenRAcost').show();
} else {
$('#hiddenRAcost').hide();
}
});
});
</script>
Is there like an onload function or something when a user reloads the page, it can run that script?
Thanks
<body onload="myFunc()">
...
</body>
Whenever the body loads (or page), myFunc() will run, so you can use this to check.
Just have it look for the checkbox state when the page loads as well as when it is clicked.
Take this code:
if($(this).is(':checked')) {
$('#hiddenRAcost').show();
} else {
$('#hiddenRAcost').hide();
}
And place it directly in your $(document).ready() handler. If you want, you could make it a function and then use that in both the click event handler and the onload.
Related
All I want to accomplish is to show a "loading ..." when the submit button is clicked using AngularJS.
I figured that should be quite easy using
<form ng-if="!export.buttonClicked">
... various input values without ng-model
<input type="submit" value="Start export" class="btn btn-default" ng-click="export.buttonClicked=true;">
</form>
<div ng-if="export.buttonClicked">
loading...
</div>
How could I be so wrong. Seems like Angular prevents the default form submission like this. Showing the loading div works quite fine, but I need the form to be submitted (The server has to calculate a lot so it responds slowly and I would like to show loading... instead of the Button once it has been clicked)
I can't use ng-submit because I have to combine AngularJS with Razor and I don't want no ng-form or ng-model...
Any ideas?
If you have an angular controller tied to the page or div, just use a function in your ng-click like this:
<div ng-controller="sampleController" style="text-align:center">
<button ng-click="buttonClickedFunction()">Submit</button>
<p>{{message}}</p>
</div>
Then in your controller:
yourAppName.controller('sampleController', function($scope) {
$scope.buttonClickedFunction = function() {
$scope.message = "Loading...";
// Whatever else you wish to do with your button/function.
};
});
This puts loading on the screen once button is clicked, if this is what you were shooting to do?
I have an x-editable form with several fields in it. I've only show the checkbox field here for brevity. There is an edit button that opens all of the elements for editing and when I click submit all of the elements are saved. While in edit mode I want to be able to call a function when the checkbox is clicked before submitting the form. It will be for validation to make sure the user really wants to uncheck the box. I want to prevent the default behavior of the checkbox and display a dialog for confirmation. This is simple with a regular checkbox but I can figure out how to do it with x-editable . ng-click doesnt seem to work. As you can see from the example e-onClick works but only with built in functions like alert() and console.log().
<form editable-form name="tableform" onaftersave="save()"oncancel="cancel()">
<table>
<tr>
<th>Active:</th>
<td>
<span editable-checkbox="user.active" e-form="tableform" e-onClick="console.log('test')"> {{user.active)}}
</span>
</td>
</tr>
</table>
</form>
I want to do some thing like this:
<span editable-checkbox="user.active" e-form="tableform" e-onClick="confirm($event)"> {{user.active)}}
</span>
and in my controller do something like this:
$scope.confirm = function($event){
$event.preventDefault();
// show confirmation code
};
Can you try
<span editable-checkbox="user.active" e-form="tableform" e-ng-click="confirm()"> {{user.active)}}</span>
And
$scope.confirm = function(){
console.log("test")
};
This will work
I'm trying to make a check box that should be ticked when a value from the controller is filled (!= null).
It also need to be able to be ticked off and on, but I can't get it to work:
<input type='checkbox'
ng-false-value="''"
ng-model="entry[element.propertyName]"
id="q{{element.id}}"
ng-checked="entry[element.propertyName] != ''"
>
The check box is ticked when entry[element.propertyName] is filled, so far so good. But when I untick the check box the model remains unchanged, even though I've set ng-false-value, and the 'selected=selected' attribute doesn't disappear. When I tick and untick again, then the model starts to change to true and ''
Should be the easiest thing in the world, what am I missing here?
I'm using Angular 1.3.11
I have no idea why you are using ng-false-value, never saw that before.
Here is a snippet with a button updating a checkbox.
function testCtrl($scope){
// Initialise the checkbox as unckecked
$scope.testIsChecked=false;
// This function makes the checkob checked
$scope.makeItCHecked = function(){
$scope.testIsChecked=true;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<div ng-controller="testCtrl">
<div><input type="checkbox" ng-model="testIsChecked">
$scope.testIsChecked value : {{testIsChecked}}</div>
<button ng-click="testIsChecked=true">Make it checked</button>
</div>
</div>
See this link for explanation.
You can include the array in an object like:
public class objElement
{
string[] propertyName;
}
and then bind to your checkbox.
My Problem is Click event is not firing from alert.html.
In index.html I have included output.html assigned to outputController, in output.html I have included alert.html by default alert.html will be hidden.
When I click on a button from output.html it will fire openWindow() method, inside it will call javascript alert method. (Where as we have overwritten the window.alert method to change the view of normal basic alert.) I can able to get the view in alert dialogue and even I can able to access the $scope member variable in alert.html but my problem is I can not fire click event. anyone suggest me what could be the problem with my code.
OutputController.js
App.controller('OutputController',[ '$scope',function($scope){
$scope.testVal = "Ajith";
$scope.checkClick = function () {
console.log("Clicked");
};
$scope.openWindow = function (title) {
alert(angular.element(document.querySelector("#HtmlA"))).html(), title);
};
}]);
index.html
<div class="tabpage" id="tabpage_4" ng-controller="OutputController">
<div class="outputTab" ng-include src="'views/output.html'"></div>
</div>
output.html
<input type="button" ng-click="openWindow('A')" value="OenAlert"/>
<div id="HtmlA" ng-controller="OutputController" ng-init="Type = 'A'"
ng-include="'views/alert.html'" ng-hide="true"></div>
alert.html
{{testVal}}
<input type="button" ng-click="checkClick()" value="Click Here"/>
As per above suggestions I have removed my custom alert, I have used angular-ui modal popup. It was working fine.
http://plnkr.co/edit/FEtJo3?p=preview
I am working on a website that displays numerous articles. Each article has a comment section. I have effectively been able to recursively write the comments to the DOM with recursion inside an ng-repeat. However, I need to be able to click on a respond button on any of the comments (they display in a nested fashion) and for a div to be inserted beneath the clicked button. This div would contain a text area for the comment they want to submit and a button. When this second button is clicked, the controller will save the comment to the database. I initially wanted to do this by directly manipulating the DOM from the controller. However, after further research, that would be in direct violation of the MVC/MVW pattern. I believe the correct answer is to create a custom directive. Please give me some insight on how to correctly do this. Any and all information would be very helpful. Thanks in advance.
If you want to add response div dinamically:
<div ng-repeat="article in articles" id="article-{{$index}}">
<p>{{article.content}}</p>
<button ng-click="addAnswer($index)">Add Answer</button>
</div>
js:
myApp.controller("articlesController", function($compile){
$scope.addAnswer = function (index) {
var div = $("<div></div>");
var input = $("<input type='text' ng-model='article.response'></input>");
div.append(input);
var button = $("<button>Send</button>");
button.attr("ng-click", "sendResponse(article)");
$compile(div)($scope);
$("#article-" + index).append(div);
};
});
You don't really need to make a directive to achieve this.
html:
<div ng-repeat="article in articles">
<p>{{article.content}}</p>
<input type="text" ng-model="article.response"></input>
<button ng-click="sendResponse(article)">Send</button>
</div>
js:
myApp.controller("articlesController", function($http){
$scope.sendResponse = function (article) {
console.log(article.response);
$http.post(url, article);
};
});
Of course, you can do it better by hidding input and send button, and show it after user clicks over an answer button.