Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I am stuck with an issue ..
I am using AngularJS and 'have included jQuery in it which is not working in HTML page. Why does this happen?
$('#setting').change(function() {
alert("hi");
});
<div class="content table-responsive table-full-width">
<table class="table table-hover table-striped">
<thead>
<th>Settings</th>
</thead>
<tbody>
<tr>
<td>
<select id="setting" class="form-control">
<option>---Select---</option>
<option ng-repeat="item in settings" value="{{item.id}}">{{item.name}}</option>
</select>
<div id="btn" class="col-md-12" style="margin-top: 16px;">
<input type="button" name="Activate" value="Activate" />
<input type="button" name="Deactivate" value="Deactivate" />
</div>
</td>
</tr>
</tbody>
</table>
</div>
Please help me with this. Thanks in advance
Instead just use ng-change directive:
<select id="setting" class="form-control" ng-change='functionToCall()'>
and in your controller's scope object add this funciton:
$scope.functionToCall = function(){
alert('hi');
};
If you have started with angularjs then its better to leave the jquery style code. Angularjs is way different than jquery.
This is good starting point."Thinking in AngularJS" if I have a jQuery background?
This often happens when you use jQuery against DOM elements which haven't been created yet.
When your webpage loads, the Angular (probably) won't have kicked in, and populated your drop down list yet.
The solution is to use Angular's ng-change instead. Then, your function will get kicked off when you select an item in your drop down list.
I have an example of this here:
Angular tutorial
Here, I update the customer's details whenever the user selects a new customer:
The code, to populate the list, and call a function when the selected item changes, looks like this:
<select ng-model="selectedCustomer"
ng-change="loadOrders();"
ng-options="customer as customer.CompanyName for customer in listOfCustomers" >
</select>
Related
I'm developing an app and I've a table populated with ng-repeat and the last column of the table is an image that it is clicked open another page that should contains more details about the line of the table that I've choose clicking the image.
I've tried to use an input type hidden in a form but it doesn't work for me.
This is my code:
<tr ng-repeat="Data in response">
<td align="center">{{Data.date}}</td>
<td align="center">{{Data.conf}}</td>
<td align="center">{{Data.evaso}}</td>
<form ng-submit="submit()">
<input type="hidden" name="codice" value="Data.code" ng-model="codice">
<td align="center"><input type="image" src="img/note.png" class="imageNote" ng-click="submit()"></td>
</form>
</tr>
After in the controller I need to manage this data (the cod). But in this way, I've tried to print it in the console and the result is undefined.
How can I solve this problem?
I am not sure if I get your question, but if you want to pass the selected item to the submit function, you can have your angular function like this:
$scope.submit = function(selectedId){
console.log(selectedId);
//Your code.
}
and your HTML should change to this:
<input ng-click="submit(Data.id)" type="image" src="img/note.png" class="imageNote">
Note: You do not need to use {{}} (expressions) to pass something to a function (here, ng-click)
I think you can try following way to get easily the Date.code data on click:
<input type="image" src="img/note.png" class="imageNote" ng-click="submit(Data.code)">
I continue working on my meteor app, and am currently facing a new problem.
I'm still not a level 100 master of Meteor.js, but I kinda start to know it.
But today I discovered but challenges :
The first is that I want my textarea to grow automatically in height
as I'm typing, exactly like facebook do it, without a drag option.
For that, I've tried to implement 2 different solutions : the first
being to call the Jquery autogrow() function, the second one being to
code my own function to modify the css number of row. Unfortunately,
none of them gave me a result.
The second challenge I face is that i want to make my
bootstrap compliant, exactly like it is described here :
http://silviomoreto.github.io/bootstrap-select/
The problem being : no matter in which js file I enable Bootstrap-select, or allow the textarea to autogrow(), nothing happens.
So here is my question : when I build a meteor app, where and how do i implement such function from bootstrap and JQuery ? What are the good habits to have, the tips I should know to improve my app structure and fonctionnality ?
Edit : here is my select code, when i apply the solution proposed by Ethan, i do well get the css applied, but the select doesn't deploy anymore by clicking on it.
<div class="well">
<h3>Account informations :</h3>
<label for="bio">My presentation :</label>
<textarea id="bio" rows="5" cols="100" placeholder="Present yourself (hobbies, job...)"></textarea><br>
<label for="nativeLang">I speak :</label>
<select class="show-tick" id="nativeLang" data-style="btn-primary" data-live-search="true" data-max-options="2" multiple>
{{#each isoLangs}}
{{>isoLang}}
{{/each}}
</select><br>
<label for="learningLang">I want to practice :</label>
<select class="" id="learningLang" data-style="btn-primary" data-live-search="true" multiple>
{{#each isoLangs}}
{{>isoLang}}
{{/each}}
</select><br>
</div>
Thanks you,
David
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
<table class="table table-hover">
<thead>
<tr>
<th> Kategoriler </th>
</tr>
</thead>
<tbody data-bind="foreach:categories">
<tr>
<td>
<input type="checkbox" class="tooltips" data-bind="value: name" data-bind="checked: categoriesToSend" />
</td>
<td data-bind="text:name"></td>
</tr>
</tbody>
</table>
This is my table that content checkboxex. I want to get values from this checkboxes and insert this values to an observable array how can i do this?
In this case, you would want to do something like:
<input type="checkbox" data-bind="attr: { value: name }, checked: $parent.categoriesToSend" />
So, you want to:
use a single data-bind attribute
do a one-way binding for the value attribute using the attr binding
use the checked binding against categoriesToSend which lives on the parent (not on the category itself), so it can be referenced using $parent.categoriesToSend
Here is a sample in jsFiddle: http://jsfiddle.net/rniemeyer/Vf5LA/
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I have been set the task of making a online register system for a school to know who has arrived as well as a page to add students to a mysql database.
I need to use javascript to make a text area be displayed as well as having text areas un changeable until the edit button beside them has been clicked, once the button has been clicked I need the values to change to say done which when clicked will make them unchangeable again. Here is the jsfiddle:
JSFiddle
Code:
<div id="addstudents">
<form>
Students Full Name:<input type="text" name="fullname"><input type="button" value="edit"><br>
Students Form: <select name="form">
<option value="No">No</option>
<option value="Yes">Yes</option>
</select><input type="button" value="edit"><br>
Students Tutor Name: <input type="text" name="lastname"><input type="button" value="edit"><br>
Students Tutor Name: <input type="text" name="TutorName"><br>
Disability: <select name="disability">
<option value="No">No</option>
<option value="Yes">Yes</option>
</select><br>
<p>All the fields need to be locked until the edit button beside them is clicked. When the value of the disability is changed i need to text area to apear. All of this need to be done in java script.</p>
</form>
</div>
<div id="menu">
this will be the menu area
</div>
1 Give the input an id, like this:
<input id="blah" readonly="true">
You will need the id later. And make it readonly.
2 Hook the button up to code like this:
<input type="button" onclick="makeEditable()">
3 Write some code:
function makeEditable() {
var text = document.getElementById("blah") //Id in step 1
text.readonly = "false" //make it editable - see link
}
There you go!
I have a form that I am building in an Ember.js app that requires the <label> tags be separate from the <input> tags. This has created a problem b/c I cannot seem to bind the for="" attribute of the <label> tag correctly.
I have looked at this Question and the Fiddle in the solution's comments, but it doesn't seem to work with apps that use the Ember.Router architecture
Here is my fiddle exemplifying the issue:
http://jsfiddle.net/wmarbut/jKGMW/
I would very muchly prefer not to use any solution that requires me to make actual entries into either my view or controller object for each individual form field.
The quick and dirty of the code can be seen here
<table>
<tr>
<th>
<!-- XXX: How do I bind the "for" attribute correctly? -->
<label {{bindAttr for="curUser.elementId"}}>Current User</label>
</th>
<td>
{{view Ember.TextField valueBinding="current_user.first_name" viewName="curUser"}}
</td>
</tr>
</table>
Apparently you need to explicitly access the element at its namespace with view.
This fiddle works: http://jsfiddle.net/wmarbut/jKGMW/5/
updated code would be
<table>
<tr>
<th>
<!-- XXX: This now works -->
<label {{bindAttr for="view.curUser.elementId"}}>Current User</label>
</th>
<td>
{{view Ember.TextField valueBinding="current_user.first_name" viewName="curUser"}}
</td>
</tr>