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);
}
}
Related
whenever i clicked a SEND BUTTON a dropdown menu will popup. How can I do it? That's my code right now. What's wrong with this snippet?
<?php if(isset($_POST["driver_number"]))?>
<form action="#" method="post">
<select name="driver_number">
<option value="Driver Number">Driver Number</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button type="submit" input style="background-color:#FFFF00;color:black" name="submitSent" class="btn btn-primary"onclick="if(!confirm('+ document.getElementById('driver_number').value')){return false;}" >Send</button> </form>
UPDATE: Thank you guys! All your answer help me.
You have to do following changes:
1) You are selecting element by id so need to give id to your select box
2) Your escaping for click event in incorrect change your code as below
<form action="#" method="post">
<select name="driver_number" id="driver_number">
<option value="Driver Number">Driver Number</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button type="submit" input style="background-color:#FFFF00;color:black" name="submitSent" class="btn btn-primary"onclick="if(!confirm(document.getElementById('driver_number').value)){return false;}" >Send</button> </form>
Please see my complete runable code . I hope it will help you.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<div class="container">
<?php if(isset($_POST["driver_number"]))
print_r($_POST);
?>
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" style="background-color:#FFFF00;color:black" name="submitSent" class="btn btn-primary" data-toggle="modal" data-target="#myDropdown">Send dropdown value</button>
<!-- Modal -->
<div class="modal fade" id="myDropdown" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">× </button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<form action="#" method="post">
<select name="driver_number">
<option value="Driver Number">Driver Number</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button type="submit" input style="background-color:#FFFF00;color:black" name="submitSent" class="btn btn-primary"onclick="if(!confirm('+ document.getElementById('driver_number').value')){return false;}" >Send</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
First of all, you have to change the button type="submit" to type="button", otherwise the form is submitted without evaluating the onclick event.
Secondly, to use document.getElementById('driver_'number') you must have an id on the select element.
Thirdly (this is mainly for elegance) the {return false;} in the if condition for the confirm could be unnecessary, and you could implement the submission in a function as suggest in the code below:
<?php if(isset($_POST["driver_number"])) { print_r($_POST); }// to test what has been posted?>
<form id="myform" action="#" method="post">
<select id="driver_number" name="driver_number">
<option value="Driver Number">Driver Number</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button type="button" input style="background-color:#FFFF00;color:black" name="submitSent" class="btn btn-primary"onclick="send();" >Send</button> </form>
<script>
function send(){ if(confirm(document.getElementById('driver_number').value)){ document.getElementById('myform').submit(); }
}
</script>
Finally, there are two typos '+ and ' in your if(!confirm('+ document.getElementById('driver_number').value')) condition, it should read if(!confirm(document.getElementById('driver_number').value))
I have something here which got me stucked up for quite some time.
I have a Php form which has an anchor tag and a dropdown. I managed to open a modal using the anchor tag but how do I pass the value of the dropdown to that modal.
Here's the anchor tag and dropdown script
<label id="labelfordropdown"><strong>Filter By Month:</strong></label>
<select name="datestart" id="datestart" class="form-control" style="width:500px;">
<option value="">--Select Month--</option>
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
Then the anchor tag
<span class="glyphicon glyphicon-th-list"></span> Details
And heres the modal
<div id="modalRegister" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" style="text-align-last: center">Register</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
How do I pass the data let's say December to modal using that anchor tag. So I can create an ajax for that modal.
Thanks.
Try this. It will get the value of you dropdown when the modal is already visible.
$('#modalRegister').on('shown.bs.modal', function() {
var datestart = $('#datestart').val(); // value of your dropdown
// it is now up to you on what you do on the value of your dropdown here.
});
Inside your modal div make a hidden input like:
...
<input type="hidden" id="myVal" value="" />
and on click of anchor that opens the modal pass the value to this hidden input like:
$('#modalRegister').click(function(){
$('#myVal').val('any value');
});
I want to get the href value of the selected option so that i can now go to the link that i selected using the button.
Here's my code
<div class="modal fade" id="soa">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Choose the name of student</h4>
</div>
<div class="modal-body">
<div class="col-md-12">
<div class="form-group">
<label class="control-label"><span
class="text-danger"></span> Name of Student</label>
<select name="childNames" class="form-control input-lg" id="childNames" data-size="5">
<option value="" selected disabled></option>
<option value="${pageContext.request.contextPath}/app/billsandpayments/invoice">John Dela Cruz</option>
<option value="${pageContext.request.contextPath}/app/billsandpayments/invoice1">Josh Dela Cruz </option>
<option value="${pageContext.request.contextPath}/app/billsandpayments/invoice2">Jane Dela Cruz</option>
</select>
</div>
</div>
</div>
<div class="modal-footer">
View</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Add a id to =>
<a id="link" href=''><button type="button" class="btn btn-info">View</button></a>
This should work :
$(document).ready(function() {
$("#childNames").on('change', function () {
var ref = document.getElementById("childNames").value;
alert(ref);
$('#link').attr('href', ref);
});
});
jsfiddle example
Here's also the alternative answer. Just add it to your script
<script type="text/javascript" >
jQuery(document).ready(function($) {
$("#childNames").change(function () {
var ref =$(this).find('option:selected').attr('value');
$('#link').attr('href', ref);
});
});
</script>
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....
i have problem to show data-id to with bootstrap. it won't show the value dynamically when i click the button, and needs to refresh page between 2-3 times to change the value (refresh).
here is my code
<a class="btn btn-warning btn-xs" href="#modal-form-edit" rel="button" data-toggle="modal" data-id="1" > Edit</a>
<a class="btn btn-warning btn-xs" href="#modal-form-edit" rel="button" data-toggle="modal" data-id="1" > Edit</a>
modal
<div id="modal-form-edit" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
.....
</div>
<div class="modal-body">
<div class="item form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">Book list <span class="required">*</span></label>
<div class="col-md-6 col-sm-6 col-xs-12">
<select class="select2_single form-control" tabindex="-1" data-width="100%" name="book" id="book" required="required">
<option id="book" value="" selected="selected"></option>
<option id="book" value="1" >book 1</option>
<option id="book" value="2" >book 2</option>
</select>
</div>
</div>
</div>
</div>
</div>
js
<script>
$('#modal-form-edit').on('show.bs.modal', function(e) {
var books-id = $(e.relatedTarget).data('id');
$("#book").val(books-id);
});
</script>
any wrong code at there?
thanks before for any help (sorry for my English)
Try like this once,
$('.atag').on('click', function(e) {
var books = $(this).attr('data-id');
$("#book").val(books);
});
I have given saperate class, and variable declaration is wrong ,- is considered as minus use _ instead.
DEMO
Try:
$('#modal-form-edit').on('show.bs.modal', function(e) {
var books_id = $(this).data('id');
$('.select2_single option[value="'+books_id+'"]').attr('selected','selected');
});