I used Chosen plugin in angular this is the snippet of the code
<select ng-model="vendor_value" ng-options="vendor.text for vendor in vendors" ui-jq="chosen" ui-options="{width: 300px}"></select>
then this will rendered in the browser
<select ng-model="category_value" ng-options="category.text for category in categories" style="border-color: red; display: none;" ui-jq="chosen" ui-options="{width: '300px', no_results_text: 'Press enter to add ', placeholder_text_single: '' }" class="ng-pristine ng-untouched ng-valid">
<option value="?" selected="selected" label=""></option>
<option value="0" label="Games">Games</option>
<option value="1" label="Baby">Baby</option>
<option value="2" label="Shoes">Shoes</option>
</select>
<div class="chosen-container chosen-container-single" style="width: 300px;" title="">
<a class="chosen-single chosen-default" tabindex="-1"> <----- I want to insert a class after form is submitted in the angular controller
<span>Select an Option</span>
</a>
<div class="chosen-drop">
<div class="chosen-search">
<input type="text" autocomplete="off">
</div>
<ul class="chosen-results"></ul>
</div>
</div>
In this line
<a class="chosen-single chosen-default" tabindex="-1">
I want to insert a class after form is submitted. How can I insert class in a dynamically created html line by chosen plugin in angular controller?
Related
<div class="content">
<div class="row" style="margin-top: 27px;">
<div class="col-sm-2" style="width: 13%;">
<select id = "app" class="form_input_box">
<option value="" selected="selected">App</option>
</select>
</div>
<div class="col-sm-2" style="margin-left: -25px;width: 11%;">
<select id = "app or not" class="form_input_box">
<option value="" selected="selected" hidden>App Type</option>
<option value="" selected>App Type</option>
<option value="1">App</option>
<option value="2">Not a App</option>
</select>
</div>
<div class="col-sm-2" style="margin-left: -25px;">
<select id = "dept" class="form_input_box">
<option value="" selected="selected">Department</option>
</select>
</div>
<div class="col-sm-1" style="margin-left: -25px;width: 12%;">
<input type="text" name="date_box" id="date_box" class="form_input_box filter_date" Placeholder="Created Date">
</div>
<div class="col-sm-2" style="margin-left: -25px;width: 11%;">
<input type="text" name="search" id="search" class="form_input_box" Placeholder="Search">
</div>
<div class="col-sm-1" style="margin-left: -25px;">
<button id="erase" class="form-control btn btn-primary" name="erase">Clear values</button>
</div>
<div class="row">
<div class="col-sm-1">
<input type="month" id="month" name="month" class="form_input_box" placeholder="Month">
</div>
<div class="col-sm-2" style="right: 30px">
<button type="button" name="report" id="file" class="button">Report file</button>
</div>
</div>
</div>
</div>
i have html page with buttons drop downs like above i need to set a single button when i click on the button it will show all these things if i again click then these need to be hided how can i achieve this.
To solve the problem simply you could use javascript or jquery and hide or show the options based on the selected values...
$('idoption').hide();
$('idoption').show();
Plunker.
The above plunker is working fine in Chrome and IE. But When comes to Mozilla Firefox it is not.
When I try to select the dropdown the page is reloading.How to stop that issue.
<script type="text/ng-template" id="items_renderer.html">
<div ui-tree-handle>
<a class="btn btn-success btn-xs" data-nodrag ng-click="toggle(this)"><span class="glyphicon" ng-class="{'glyphicon-chevron-right': collapsed, 'glyphicon-chevron-down': !collapsed}"></span></a>
<input type="text" style="display:none" ng-model="item.rowId">
<input type="text" id="componentName{{$index}}" ng-style="getWidth(item.rowId)" ng-change="validateOnChange(item.componentName, 'componentName','',$index)" ng-model="item.componentName" style="width:156px;height: 23px;">
<input type="text" id="componentIdentification{{getRowId(item.rowId)}}" ng-model="item.componentIdentification" ng-change="validateOnChange(item.componentIdentification,'componentIdentification', '',getRowId(item.rowId))" style="width:125px;height: 23px;">
<select ng-model="item.componentType" id="componentType{{getRowId(item.rowId)}}" ng-change="validateOnChange(item.componentType, 'componentType', 'Select', getRowId(item.rowId))" style="width:102px;height: 23px;">
<option>Select</option>
<option ng-repeat="type in typeList" value="{{type.TYPE_ID}}">{{type.COMPONENT_TYPE}}</option>
</select>
<select ng-model="item.componentState" id="componentState{{getRowId(item.rowId)}}" ng-change="validateOnChange(item.componentState,'componentState', 'Select' ,getRowId(item.rowId))" style="width:122px;height: 23px;">
<option>Select</option>
<option ng-repeat="list in statusList" value="{{list.STATUS_ID}}">{{list.STATUS}}</option>
</select>
<select ng-model="item.actionId" id="actionId{{getRowId(item.rowId)}}" ng-change="validateOnChange(item.actionId, 'actionId', 'Select',getRowId(item.rowId))" style="width:103px;height: 23px;">
<option>Select</option>
<option ng-repeat="action in actionList" value="{{action.ACTION_ID}}">{{action.URL}}</option>
</select>
<select ng-model="item.actionToPerform" id="actionToPerform{{getRowId(item.rowId)}}" ng-change="validateOnChange(item.actionToPerform, 'actionToPerform', 'Select',getRowId(item.rowId))" style="width:122px;height: 23px;">
<option>Select</option>
<option ng-repeat="actionPerform in actiontoperformList" value="{{actionPerform.ACTIONPERFORM_ID}}">{{actionPerform.ACTION_TO_PERFORM}}</option>
</select>
you need to remove the ng-model from the ui-tree-nodes div.
change this
<ol ui-tree-nodes ng-model="componentList">
to this
<ol ui-tree-nodes>
Demo
I solved this problem by disabling the drag and drop as it is calling some internal functions hence the page is reloading.
<div ui-tree="options" data-drop-enabled="false" data-drag-enabled="false">
i have a problem in my Symfony2.4 project .i have 2 selects and 2 radiobuttons
i want to disable the first and make second enabled on each click here is my code
<div class="row">
<div class="col-lg-3 col-md-3 ui-sortable">
<span class="ui-spinner ui-widget ui-widget-content ui-corner-all">
<input type="radio" name="group1" value="mensuelle" checked="checked"style="opacity: 1!important;" /> Mensuelle
</span>
</div>
<div class="col-lg-3 col-md-7 ui-sortable">
<span class="ui-spinner ui-widget ui-widget-content ui-corner-all">
<input type="radio" name="group1" value="trimestre"style="opacity: 1!important;" /> Trimestre
</span>
</div>
<div class="col-lg-3 col-md-3 ui-sortable">
<span class="ui-spinner ui-widget ui-widget-content ui-corner-all">
<select id="mois" name="mois" class="form-control" size="1">
<option value="Janvier">Janvier</option>
<option value="Fevrier">Fevrier</option>
<option value="Mars">Mars</option>
<option value="Avril">Avril</option>
<option value="Mai">Mai</option>
<option value="Juin">Juin</option>
<option value="Juillet">Juillet</option>
<option value="Aout">Aout</option>
<option value="Septembre">Septembre</option>
<option value="Octobre">Octobre</option>
<option value="Novembre">Novembre</option>
<option value="Decembre">Decembre</option>
</select>
</span>
</div>
<div class="col-lg-3 col-md-4 ui-sortable">
<span class="ui-spinner ui-widget ui-widget-content ui-corner-all">
<select id="trimest" name="trimest" class="form-control" size="1">
<option value="1er Trimestre">1er Trimestre</option>
<option value="2eme Trimestre">2eme Trimestre</option>
<option value="3eme Trimestre">3eme Trimestre</option>
<option value="4eme Trimestre">4eme Trimestre</option>
</select>
</span>
</div>
and this is the script :
<script type="text/javascript">
document.getElementById('trimest').disabled=true;
$('input:radio[name="group1"]').change(function() {
if ($(this).val() === 'mensuelle') {
// append stuff
document.getElementById('trimest').disabled=true;
document.getElementById('mois').disabled=false;
}
else {
document.getElementById('trimest').disabled=false;
document.getElementById('mois').disabled=true;
}
});
</script>
i have no problems here but when i include this file file in my page the script don't works
https://drive.google.com/file/d/0B9iqIn8LtQ7gdmdZYmlhYVM1alE/view?usp=sharing
Perhaps the JS Code is executed before the DOM is completely setup.
Try the follwing:
$(document).ready(function() {
//Your Code
});
When you use that, your script will be executed, after the DOM is setup, and all the inputs etc. can be accessed by jQuery
See http://learn.jquery.com/using-jquery-core/document-ready/ (good idea #sebnukem)
Assuming that JQuery has been properly loaded.
A page can't be manipulated safely until the document is "ready." Make sure the JS code is running once the DOM is ready:
<script type="text/javascript">
$(function() { // add this
document.getElementById('trimest').disabled=true;
$('input:radio[name="group1"]').change(function() {
console.log('radio button clicked'); // do you see this?
if ($(this).val() === 'mensuelle') {
// append stuff
document.getElementById('trimest').disabled=true;
document.getElementById('mois').disabled=false;
} else {
document.getElementById('trimest').disabled=false;
document.getElementById('mois').disabled=true;
}
});
); // and this
</script>
See http://learn.jquery.com/using-jquery-core/document-ready/
What does your console say?
In the program below I am using fee head id and trying to access dynamic data but when I select or click on any element of the first list it does not go to the next list.
After clicking on any element in first list, the element should disappear from first list and display in the second list. I am using a theme which has built-in classes in JS and JSP.
<div class="panel-body">
<div class="form-group">
<div class="col-lg-12">
<div class="leftBox">
<select id="feesHeads" multiple="multiple" class="multiple nostyle form-control" style="height:300px;">
<!-- <option value="1">Spain</option>
<option value="2">Germany</option>
<option value="3">Uruguay</option>
<option value="4" selected="selected">Brazil</option>
<option value="5" selected="selected">England</option>
<option value="6" selected="selected">Portugal</option>
<option value="7">Argentina</option>
<option value="8">Italy</option>
<option value="9">Croatia</option>
<option value="10">Denmark</option>
<option value="11">Russia</option>
<option value="12">Greece</option>
<option value="13">Chile</option>
<option value="14">Côte d'Ivoire</option>
<option value="15" selected="selected">France</option>
<option value="16">Sweden</option>
<option value="17">Switzerland</option>
<option value="18">Republic of Ireland</option>
<option value="19">Australia</option>
</select> -->
<br/>
<span id="box1Counter" class="count"></span>
<div class="dn"><select id="box1Storage" name="box1Storage" class="nostyle"></select></div>
</div>
<div class="dualBtn">
<button id="to2" type="button" class="btn" ><span class="icon12 minia-icon-arrow-right-3"></span></button>
<button id="allTo2" type="button" class="btn" ><span class="icon12 iconic-icon-last"></span></button>
<button id="to1" type="button" class="btn marginT5"><span class="icon12 minia-icon-arrow-left-3"></span></button>
<button id="allTo1" type="button"class="btn marginT5" ><span class="icon12 iconic-icon-first"></span></button>
</div>
<div class="rightBox">
<select id="box2View" multiple="multiple" class="multiple nostyle form-control" style="height:300px;"></select>
<br/>
<span id="box2Counter" class="count"></span>
<div class="dn"><select id="box2Storage" class="nostyle"></select></div>
</div>
</div>
</div><!-- End .form-group -->
</div>
</div><!-- End .panel -->
</div><!-- End .span6 -->
</div><!-- End .row -->
When you click on the firstList's option remove it from there and append it to the secondList. I've created a simple demo that might go with your scenario.
HTML :
First :
<select id="firstList">
<option>Mango</option>
<option>Banana</option>
<option>Apple</option>
</select>
<br />
Second
<select id="secondList"></select>
jQuery :
$("#firstList").on("change", function(){
var selectedItem = $(this).children("option:selected").val();
$(this).children("option:selected").remove();
$("#secondList").append($("<option> </option>").text(selectedItem));
});
jsFiddle
Note : It's just an overview of how you can implement it. But what you want is entirely upto you.
Probably a stupid question but please bear with me on this one:
Is it possible, with the use of jQuery/javascript, to make it so that when you click one button it clicks/submits multiple buttons?
This will probably help make answering the question easier:
<div class="form-item form-type-select form-item-field-status-10-field-status-und-select">
<select size="0" name="field_status[10][field_status][und][select]" id="edit-field-status-10-field-status-und-select" class="select-or-other-select form-select chzn-done" style="width: 100px; display: none;">
<option value="">- select -</option>
<option selected="selected" value="In">In</option>
<option value="Gym">Gym</option>
<option value="Lunch">Lunch</option>
<option value="Out">Out</option>
<option value="select_or_other">Other</option>
</select>
<div id="edit_field_status_10_field_status_und_select_chzn" class="chzn-container chzn-container-single" style="width: 100px;" title=""><a tabindex="-1" class="chzn-single" href="javascript:void(0)"><span>In</span></a>
<div style="left: -9000px; width: 98px; top: 25px;" class="chzn-drop">
<div class="chzn-search">
<input type="text" autocomplete="off" style="width: 63px;">
</div>
<ul class="chzn-results">
<li style="" class="active-result" id="edit_field_status_10_field_status_und_select_chzn_o_0">- select -</li>
<li style="" class="active-result result-selected" id="edit_field_status_10_field_status_und_select_chzn_o_1">In</li>
<li style="" class="active-result" id="edit_field_status_10_field_status_und_select_chzn_o_2">Gym</li>
<li style="" class="active-result" id="edit_field_status_10_field_status_und_select_chzn_o_3">Lunch</li>
<li style="" class="active-result" id="edit_field_status_10_field_status_und_select_chzn_o_4">Out</li>
<li style="" class="active-result" id="edit_field_status_10_field_status_und_select_chzn_o_5">Other</li>
</ul>
</div>
</div>
</div>
This way:
<input type="button" id="triggerAll">
<input type="button" class="button1">
<input type="button" class="button2">
<input type="button" class="button3">
$('#triggerAll').on('click',function(){
$('.button1,.button2,.button3').trigger('click');
});
Or this way:
<input type="button" id="triggerAll">
<input type="button" class="processed">
<input type="button" class="processed">
<input type="button" class="processed">
$('#triggerAll').on('click',function(){
$('.processed').trigger('click');
});
Or this way:
<form class="monitorChanges">
<label>
Pick one:
<select data-defaultvalue="" name="other">
<option value="" selected></option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
</label>
<label>
Other:
<input type="text" data-defaultvalue="" name="other">
</label>
<input type="submit">
</form>
<input type="text" value="Trigger All" id="triggerAll">
$('.monitorChanges').on('change keyup',"input,textarea,select",function(){
var defaultValue = $(this).data('defaultvalue');
if ($(this).val() !== defaultValue){
$(this).parent().parent().find('input[type="submit"]:not(.processed)').addClass('processed');
}
else {
$(this).parent().parent().find('input[type="submit"].processed').removeClass('processed');
}
});
$('#triggerAll').on('click',function(){
$(this).parent().find('form input[type="submit"].processed').trigger('click');
});
$('#mybtnId').click(function(){
$('button, input[type=button]').not('#mybtnId').trigger('click');
});
Here is an example specific to you:
$('.processed').on('click', function (e) {
//real event
if (e.originalEvent !== undefined) {
$('.processed').click();
}
//manually triggered event
else {
alert($(this).text() + ' triggered');
}
});
Hope this helps! You can see it working in this jsFiddle example
I came up with a solution that does the trick for me:
// Find input(s) that have changed. Add class to their hidden submit button.
$(function() {
$("input, select").change(function() {
$(this).closest('td').find('input.ajax-processed').addClass("changed");
});
});
// One button to submit all input(s) that have changed.
$('.submit-all').click(function(){
$('.changed, input[type=button]').not('.submit-all').trigger('click');
});
Thanks guys for all of your help. It took a combination of all of your advice to get this beast working and it also helped me to rethink what I was trying to accomplish.
That's what worked for me, using pure JavaScript. I used the onclick event on a list item (li) containing two reset button's. They control different form's and one of them is not displayed in the list item (style="display:none;"). Of course, you can make the same implementation in any type of input.
<ul>
<li onclick="document.getElementById('btn-clear-1').click(); document.getElementById('btn-clear-2').click();">
<input class="btn" id="btn-clear-1" form="frm1" type="reset" value="Clear" />
<input class="btn" id="btn-clear-2" form="frm2" type="reset" value="Clear" style="display:none;" />
</li>
</ul>
But what I did is unnecessary code for what I was looking for. It could be <li onclick="document.getElementById('#frm1').reset(); document.getElementById('#frm2').reset();">Clear</li>
(Commentary made only to avoid bad coding in this board)