I have a project which combines AngularJS and Materialize CSS which opens a model with id #modal-some-form using AngularJS $('#model-some-form').openModel();.
Now I have another project with similar code, same JQuery, AngularJS and Materialize versions, but when trying to open the model I get:
Error: $(...).openModel is not a function
The code for the model is:
<div ng-app="myApp" ng-controller="myController">
<div id="modal-bango-form" class="modal">
<div class="modal-content">
<h4 id="modal-bango-title">Andika bango jipya</h4>
<div class="row">
<label>Ujumbe wa bango unahusu nini?</label>
<div class="input-field">
<select class="browser-default">
<option value="" disabled selected>Chagua</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
<div class="input-field">
<i class="material-icons prefix">mode_edit</i>
<textarea id="ujumbe" class="materialize-textarea"></textarea>
<label for="ujumbe">Ujumbe wa bango</label>
</div>
<div class="input-field">
<a class="btn waves-effect waves-light blue-grey" ng-click="createBango()"><i class="material-icons left">add</i> Tuma</a>
<a class="btn waves-effect waves-light blue-grey" ng-click="closeBangoForm()"><i class="material-icons left">close</i> Ghairi</a>
</div>
</div>
</div>
</div><!-- // end of #modal-form -->
</div>
And the code for my Angular script is:
var myApp = angular.module('myApp',[]);
myApp.controller('myController', function($scope, $http){
$scope.openBangoForm = function(){
$("#modal-bango-form").openModel();
}
$scope.closeBangoForm = function(){
$('#modal-bango-form').closeModel();
}
});
Neither closeModel() nor openModel(), but on the other project it runs well.
Please assist.
Regards
I came to realize before #dfsq replied to my question that i was misspelled the modal with model.
Fixing the line $('#modal-bango-form').openModel(); with $('#modal-bango-form').openModal(); fixed the problem.
It's dumb, but took me a day to figure out, duh!...
Hope will help someone there....
Related
Im currently developing a project at my job, im using Laravel as my framework and im using KeenThemes as my frontend. I believe they have their variation of the Datatables library and maybe that's why im having this issue. Since i can't find a well documented example of the metronic Datatable library im using the original Datatable documentation to work on this project. Ok, so on to the problem. This is my blade component for the datatable.
<div class="m-portlet m-portlet--mobile m-portlet--rounded">
<div class="m-portlet__head">
<div class="m-portlet__head-caption">
<div class="m-portlet__head-title">
{{$title}}
</div>
</div>
<div class="m-portlet__head-tools">
{{$buttons}}
<ul class="m-portlet__nav">
<li class="m-portlet__nav-item">
<div class="m-dropdown m-dropdown--inline m-dropdown--arrow m-dropdown--align-right m-dropdown--align-push" m-dropdown-toggle="hover"
aria-expanded="true">
<a href="#" class="m-portlet__nav-link btn btn-lg btn-secondary m-btn m-btn--icon m-btn--icon-only m-btn--pill m-dropdown__toggle">
<i class="la la-ellipsis-h m--font-brand"></i>
</a>
<div class="m-dropdown__wrapper">
<span class="m-dropdown__arrow m-dropdown__arrow--right m-dropdown__arrow--adjust"></span>
<div class="m-dropdown__inner">
<div class="m-dropdown__body">
<div class="m-dropdown__content">
<ul class="m-nav">
<li class="m-nav__section m-nav__section--first">
<span class="m-nav__section-text">Acciones</span>
</li>
{{$actions}}
<li class="m-nav__separator m-nav__separator--fit m--hide">
</li>
<li class="m-nav__item m--hide">
Submit
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="m-portlet__body">
{{-- begin - search input --}}
<div class="m-form m-form--label-align-right m--margin-top-20 m--margin-bottom-30">
<div class="row align-items-center">
<div class="col-xl-8 order-2 order-xl-1">
<div class="form-group m-form__group row align-items-center">
<div class="col-md-4">
<div class="m-form__group m-form__group--inline">
<div class="m-form__label">
<label>Status:</label>
</div>
<div class="m-form__control">
<select class="form-control m-bootstrap-select" id="m_form_estado">
<option value="">All</option>
<option value="1">En servicio</option>
<option value="6">En Busqueda</option>
<option value="5">En Saneamiento</option>
<option value="3">En Obra</option>
<option value="2">En Instalación</option>
<option value="4">Listo Para Ejecutar</option>
<option value="12">Sin Estado</option>
<option value="14">Caido</option>
<option value="15">Retirado</option>
</select>
</div>
</div>
<div class="d-md-none m--margin-bottom-10"></div>
</div>
<div class="col-md-4">
<div class="m-form__group m-form__group--inline">
<div class="m-form__label">
<label class="m-label m-label--single">Type:</label>
</div>
<div class="m-form__control">
<select class="form-control m-bootstrap-select" id="m_form_type">
<option value="">All</option>
<option value="1">Online</option>
<option value="2">Retail</option>
<option value="3">Direct</option>
</select>
</div>
</div>
<div class="d-md-none m--margin-bottom-10"></div>
</div>
<div class="col-md-4">
<div class="m-input-icon m-input-icon--left">
<input type="text" class="form-control m-input" placeholder="Search..." id="generalSearch">
<span class="m-input-icon__icon m-input-icon__icon--left">
<span><i class="la la-search"></i></span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
{{-- end - search input --}}
<!--begin: Datatable -->
<div class="m_datatable" id="m_datatable"></div>
<!--end: Datatable -->
</div>
Now, this is some of the javascript im using to render and fill the table with data. The part im gonna paste is where i define the fuction to search data and also the definition of the column i wanna get from the row.
{
field: "IdEstacion",
title: "#",
width: 40,
sortable: !0,
selector: !1,
textAlign: "center",
responsive: {
hidden: 'lg'
},
template: '{{IdEstacion}}',
query: {},
sort: {
sort: "asc",
field: "IdEstacion"
}
{...}
$("#m_datatable").on("click", "tr", function () {
var tr=$(this).parents("tr")[0];
var row=t.row(row).data();
console.log(row));
alert(row);
})
I've checked the console and also checked the values in the debug and row is returning an object, however, it is returning the whole datatable not just the row i clicked on. And when I try to reference a value from the row variable i keep getting undefined on the console and on the alert. Am i missing something? Thanks in advance.
EDIT: adding my json structure
JSON value #1
$('#YourTable tbody').on( 'click', 'a', function () {
var data = '';
data = YourTable.row( $(this).parents('tr') ).data();
//to do this your table need to be declared like this
//yourTable= $('#YourTable').DataTable();
console.log(data);
var carId= data['id'];
console.log(carId);
})
The idea is right, but there seem to be a few typos in your example.
var tr=$(this).parents("tr")[0] is not needed, change row to this in var row=t.row(row).data();
There's a syntax problem in console.log(row));
Also, t needs to be defined.
var t = $("#m_datatable").DataTable();
t.on("click", "tr", function () {
var row = t.row(this).data();
console.log(row);
alert(row);
})
Before marking question duplicate, I want to make clear that I have already tried all the ways possible (e.g. here) to simply load a select2 dropdown on a simple page in Meteor.
Below is simple code to understand my select2 application procedure.
ManageRoles.js
Template.ManageRoles.onRendered(function() {
$(".roleSelect").select2();
});
ManageRoles.html
<form class="assignRoleForm">
<div class="row">
<div class="col-sm-12">
<label>Roles</label>
<select class="roleSelect form-control" multiple="multiple" required>
<option value="">Select Option</option>
<option value="1">ADMIN</option>
<option value="2">MANAGER</option>
</select>
</div>
</div>
<br/>
<div class="text-center">
<button type="submit" class="btn btn-success"> Assign </button>
<button type="button" class="btn btn-danger"> Close </button>
</div>
</form>
select2 Import structure
root\client\vendor\select2\select2-bootstrap.css
root\client\vendor\select2\select2.js
root\client\vendor\select2\style\select2.css
Below is the snapshot of the current output.
****************** Updated *******************
Upon doing this console.log($('.roleSelect').get(0)); I get below in console log
<select class="roleSelect form-control" multiple="multiple" required="">
<option value="">Select Option</option>
<option value="fov9sPjiXtbRdJccR">ADMIN</option>
<option value="ga4p3FwQ76LH4Nq8y">MANAGER</option>
</select>
I would try the following:
Template.ManageRoles.onRendered(function() {
this.$(".roleSelect").select2({
placeholder: 'Select Option'
});
});
And then in the HTML leave the first option blank:
<option value=""></option>
Is it possible when using jQuery Clone to increment the current GUID of an object?
At present, when the selecter is initialised all selects, including hidden ones, are assigned a GUID.
The cloning process simply duplicates the template div. The problem being that it also clones the GUID of the hidden select, which means any dynamically added selects are rendered unusable as more than one select share the same guid.
To implement all selects on a form I am using the code below:
$(document).ready(function () {
$("select").selecter();
});
The code to create a clone of a row, which includes a select is as follows:
$('.addButton').on('click', function () {
var $template = $('#Template'),
$clone = $template
.clone(true, true)
.removeClass('hide')
.removeAttr('id')
.attr('title', 'DynamicRow')
.insertBefore($template);
$("#Form").validate();
$clone.find('[name="Type[]"]').rules("add", { required: true });
});
I have also included the HTML below to demonstrate what is being cloned:
<div class="fieldset">
<div class="col-sm-1">
<div>
<button type="button" class="btn btn-default addButton"><i class="fa fa-plus"></i></button>
</div>
</div>
<div class="col-sm-11">
<div class="field">
#Html.LabelFor(model => model.Type)
<select name="Type[]" id="Type[]">
<option value="">Type</option>
<option value="1">Other</option>
<option value="2">Maintenance</option>
<option value="3">Attendance</option>
</select>
</div>
</div>
</div>
<div class="fieldset hide" id="Template">
<div class="col-sm-1">
<div>
<button type="button" class="btn btn-default removeButton"><i class="fa fa-minus"></i></button>
</div>
</div>
<div class="col-sm-11">
<div class="field">
#Html.LabelFor(model => model.Type)
<select name="Type[]" id="Type[]">
<option value="">Type</option>
<option value="1">Other</option>
<option value="2">Maintenance</option>
<option value="3">Attendance</option>
</select>
</div>
</div>
</div>
The Formstone Classic Selecter library can be found at:
https://github.com/FormstoneClassic/Selecter/blob/master/jquery.fs.selecter.js
The only workaround I could find, was to initialise each form select individually, therefore $("select").selecter(); could not be used as this initialises all selects, including hidden ones.
HTML
<div class="fieldset" id="Types">
<div class="col-sm-1">
<div>
<button type="button" class="btn btn-default addButton"><i class="fa fa-plus"></i></button>
</div>
</div>
<div class="col-sm-11">
<div class="field">
#Html.LabelFor(model => model.Type)
<select name="Type[]" id="Type[]">
<option value="">Type</option>
<option value="1">Other</option>
<option value="2">Maintenance</option>
<option value="3">Attendance</option>
</select>
</div>
</div>
</div>
<div class="fieldset hide" id="Template">
<div class="col-sm-1">
<div>
<button type="button" class="btn btn-default removeButton"><i class="fa fa-minus"></i></button>
</div>
</div>
<div class="col-sm-11">
<div class="field">
#Html.LabelFor(model => model.Type)
<select name="Type[]" id="Type[]">
<option value="">Type</option>
<option value="1">Other</option>
<option value="2">Maintenance</option>
<option value="3">Attendance</option>
</select>
</div>
</div>
</div>
To initialise the first select I used $('#Types').find('[name="Type[]"]').selecter(); and to initialise the hidden clone select I used $clone.find('[name="Type[]"]').selecter();
I hope this proves useful to others.
I'm sure this is very simple problem for you guys, but I'm stuck. I have a modal angularjs form and I'd like to execute a function when I press the "Assign" button. In the HTML template that creates the modal form, I have a select element and I want to pass a value. The code is this:
<script type="text/javascript">
$("#assignButton").on("click",function(event) {
myValue = $("#sfc").selectmenu("value")
});
</script>
<script type="text/ng-template" id="assignSFC.html">
<div class="modal-header" style="fill: #f08a00">
<h3>Assign SFC</h3>
</div>
<div class="modal-body">
<fieldset>
<label for="sfc">Select a Service Chain</label>
<select name="sfc" id="sfc">
<option selected="selected" value="0">No Chain</option>
<option value="1">Service Chain 1</option>
<option value="2">Service Chain 2</option>
</select>
</fieldset>
<div class="modal-footer">
<!-- <div class="alert alert-error" ng-model="error.msg">
<a class="close" data-dismiss="alert">x</a>
<strong>Error!</strong>This is a fatal error. {{error.msg}}
</div> -->
<button type="button" class="btn btn-warning" ng-click="cancel()">Cancel</button>
<button type="button" id="assignButton" class="btn btn-primary" ng-click="ok(value)">Assign</button>
</div>
</script>
In the last button, if I put something like: ng-click="ok(2)", it will execute the assignSFC function perfectly. My problem is that I don't know how to pass these values (0,1,2) according to the selection in the form.
Do you see anything idiotic?
THANKS AGAIN!!
You are doing it in wrong way. Angularjs is two way binding, you are trying to mixup jQuery with angularjs. Angularjs has its own functions to achieve what you want. You haven't use controller and you are trying to use click button using ng-click.
Try below code:
<script type="text/ng-template" id="assignSFC.html">
<div ng-controller="TemplateController">
<div class="modal-header" style="fill: #f08a00">
<h3>Assign SFC</h3>
</div>
<div class="modal-body">
<fieldset>
<label for="sfc">Select a Service Chain</label>
<select name="sfc" id="sfc" ng-model="data.sfcSelection">
<option selected="selected" value="0">No Chain</option>
<option value="1">Service Chain 1</option>
<option value="2">Service Chain 2</option>
</select>
</fieldset>
<div class="modal-footer">
<!-- <div class="alert alert-error" ng-model="error.msg">
<a class="close" data-dismiss="alert">x</a>
<strong>Error!</strong>This is a fatal error. {{error.msg}}
</div> -->
<button type="button" class="btn btn-warning" ng-click="cancel()">Cancel</button>
<button type="button" id="assignButton" class="btn btn-primary" ng-click="ok()">Assign</button>
</div>
</div>
</script>
And here the controller:
angular.module('myApp', [])
.controller('TemplateController', ['$scope', TemplateController]);
function TemplateController($scope) {
$scope.data = {};
$scope.data.sfcSelection = [];
$scope.ok = ok;
function ok() {
console.log($scope.selectedValue);
}
}
I am using bootstrap select Bootstrap-select v1.7.2 in Angular. When I select some option from drop down it selects some other option.
Plunker is setup here:
http://plnkr.co/edit/HPPlxx?p=preview
(code is in dashboard.html and dashboard.js)
That's how I am creating it. bootstrap-dropdown is the directive that initiates the drop-down.
<form role="form" name="frmVariableConfig" ng-submit="vm.saveChanges()">
<select ng-model="vm.CurrCustomer.Logic" name="ddlLogic" check-validation class="validate[required]" bootstrap-dropdown >
<option ng-repeat="logic in vm.Logics" value="{{logic.value}}">{{logic.displayName}}</option>
</select>
<button type="submit" class="btn btn-sm text-right">Save</button>
</form>
This should fix your problem. You need a blank state option. Also it helps to use ng-options rather than using ng-repeat in the option. Hope this solves your problem!
<div ng-controller="dashboard as vm">
<div class="block-area">
<div class="row col-md-12 ">
<h3 class="block-title"> {{vm.title}}</h3>
<form role="form" name="frmVariableConfig" ng-submit="vm.saveChanges()">
<select required ng-model="vm.CurrCustomer.Logic" name="ddlLogic" check-validation class="validate[required]" ng-options="logic.displayName for logic in vm.Logics track by logic.displayName" bootstrap-dropdown >
<option value="">Pick One</option>
</select>
<button type="submit" class="btn btn-sm text-right">Save</button>
</form>
</div>
</div>
</div>
You should use ng-options to populate the option elements of a select input.
Like so:
<select ng-model="vm.CurrCustomer.Logic" data-ng-options="logic.displayName for logic in vm.Logics track by logic.value" name="ddlLogic" check-validation class="validate[required]" bootstrap-dropdown >
<option value="">Select...</option>
</select>
EDIT
Use the following:
<select ng-model="vm.CurrCustomer.Logic" data-ng-options="logic.displayName for logic in vm.Logics" check-validation class="validate[customFunc]" bootstrap-dropdown>
<option style="display:none" value="">Select</option>
</select>
where customFunc is a new custom validation function you create to check that the selected value is not "".