I have a regular bootstrap-modal in HTML. I'm trying to show/hide it with javascript and i get undefined function.
I'm doing as the bootstrap documentation says, still i get undefined function on this row:
$("#registermodal").modal('show');
This is my HTML modal:
<div class="modal fade" id="registermodal" aria-hidden="true">
<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" id="registerDevice">Klargjøring</h4>
</div>
<div class="modal-body">
<div id="registerContent" class="form-group">
<form class="form-horizontal">
<div class="form-group">
<label for="Enhetsnavn" class="col-lg-4 control-label">UUID</label>
<div class="col-lg-8">
<input type="text" class="form-control" id="uuid" placeholder="">
</div>
</div>
<div class="form-group">
<label for="AppleID1" class="col-lg-4 control-label">Apple-ID #1</label>
<div class="col-lg-8">
<input type="text" class="form-control" id="AppleID1" placeholder="">
</div>
</div>
<div class="form-group">
<label for="AppleIDPassword1" class="col-lg-4 control-label">Apple-ID Password #1</label>
<div class="col-lg-8">
<input type="text" class="form-control" id="AppleIDPassword1" placeholder="">
</div>
</div>
<div class="form-group">
<label for="AppleID2" class="col-lg-4 control-label">Apple-ID #2</label>
<div class="col-lg-8">
<input type="text" class="form-control" id="AppleID2" placeholder="">
</div>
</div>
<div class="form-group">
<label for="AppleIDPassword2" class="col-lg-4 control-label">Apple-ID Password #2</label>
<div class="col-lg-8">
<input type="text" class="form-control" id="AppleIDPassword2" placeholder="">
</div>
</div>
<div class="form-group">
<label for="SIMpin" class="col-lg-4 control-label">SIM-PIN</label>
<div class="col-lg-8">
<input type="text" class="form-control" id="SIMpin" placeholder="">
</div>
</div>
<div class="form-group">
<label for="losekod" class="col-lg-4 control-label">Låsekod</label>
<div class="col-lg-8">
<input type="text" class="form-control" id="losekod" placeholder="">
</div>
</div>
<div class="form-group">
<label for="select" class="col-lg-2 control-label">Lokation</label>
<div class="col-lg-10">
<select size="6" class="form-control" id="lokationSelect">
<option value="Phone">Phone</option>
<option value="PDA">PDA</option>
<option value="Phone">Phone</option>
<option value="PDA">PDA</option>
<option value="Phone">Phone</option>
<option value="PDA">PDA</option>
<option value="Phone">Phone</option>
<option value="PDA">PDA</option>
</select>
</div>
</div>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" data-dismiss="modal" onclick="performKlargjoring()">Klargjøring</button>
</div>
</div>
</div>
</div>
One reason you may receive an undefined function would be if you have defined the jquery library more than once.
<script src="/Scripts/jquery-1.10.2.min.js"></script>
<script src="/Scripts/bootstrap.min.js"></script>
<div class="modal fade" id="registermodal" aria-hidden="true">
...
...
</div>
<script src="/Scripts/jquery-1.10.2.min.js"></script>
The bootstrap library gets applied to the first jquery library but when you reload the jquery library, the original bootstrap load is lost (Modal function is in bootstrap).
One common cause of this issue is when including partial blocks of code within a web app as the same javascript file reference could appear in a complete page output in more than one location.
This is especially dangerous when your js definitions are scattered throughout your page ie, in the head, at the top of the body and at the bottom of the body (in a partial template).
I solved my problem changing
$(id).modal("show")
to
jQuery(id).modal("show").
Add following script tag before declaring your own js file. This will solve the error.
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
EDIT: I added an on click to hide : DEMO2
DEMO
It is not giving the undefined function like you say. I suggest wrapping your $("#registermodal").modal('show');
in a $(document).ready(function(){});
If that doesn't work (or if you already did that) I suggest adding your js script (or link) right before your </body>
Last case scenario, make sure you have bootstrap.min.js and jquery on your HTML page.
Try:
$("#registermodal").modal();
Related
guys I'm new to jquery as well as javascript.
I want to make an application in laravel where I have to add product and their detail dynamically.
So I tried Jquery first time. I got Jquery code but now I can't get how these values pass through the controller
So please help me out with this.
Thank You
This is my jquery code
$(document).ready(function(){
$("body").on("click",".add_new_frm_field_btn",
function (){
console.log("clicked");
var index = $(".form_field_outer").find(".form_field_outer_row").length + 1; $(".form_field_outer").append(`
<div class="row form_field_outer_row">
<div class="form-group col-md-6">
<div class="form-row">
<div class="col-md-6 mb-10">
<label for="validationCustom03">Item code</label>
<select class="form-control custom-select" name="itemcode" required>
<option value="">Select Item Code</option>
</select>
<div class="invalid-feedback">Please select Item code.</div>
</div>
</div>
<div class="form-group">
<label for="validationCustom03">Reason</label>
<input type="textarea" class="form-control" id="validationCustom03" rows="3" placeholder="Reason For Returning Product" name="categorycode" required>
<div class="invalid-feedback">Please provide a Reason for returning product.</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-10">
<label for="validationCustom03">Quantity</label>
<input type="number" class="form-control" id="validationCustom03" placeholder="Quantity" name="quantity" required>
<div class="invalid-feedback">Please provide a valid Quantity.</div>
</div>
</div>
</div>
</div>
`); $(".form_field_outer").find(".remove_node_btn_frm_field:not(:first)").prop("disabled", false); $(".form_field_outer").find(".remove_node_btn_frm_field").first().prop("disabled", true); }); });
how to get this value in the controller?
I suggest you to use bootstrap modal foe this,
When you click on the button add_new_frm_field_btn, bootstrap modal will appears and in this modal you change according your requirements.
see example below and try to do this,
<div class="content">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="#mdo">Return/Exchange</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Return Product</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form method="POST" action="{{ route('someurl') }}">
#csrf
<div class="form-group">
<label for="Item-code" class="col-form-label">Item Code:</label>
<select class="form-control-select" name="itemcode[]" multiple="multiple" required>
<option value="">-- Select Item Code --</option>
<option value="123">123</option>
<option value="145">145</option>
<option value="895">895</option>
<option value="756">756</option>
</select>
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">Reason:</label>
<textarea class="form-control" id="reason" required></textarea>
</div>
<div class="form-group">
<label for="quantity">Quantity</label>
<input type="number" class="form-control" placeholder="quantity" required>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="submit" id="returnRequest" class="btn btn-primary" data-dismiss="modal">Return Request</button>
</div>
</div>
</div>
</div>
</div>
Write script for select2 functionality,
<script type="text/javascript">
$(document).ready(function(){
$('.form-control-select').select2();
});
</script>
for using bootstrap you have to mentioned below scripts in your file,
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
You can create form in this modal and mentioned method post, route too and when you try to click on submit button it will go to the controller file and there you can try to get all parameters.
for more bootstrap modal options go through this link Bootstrap4
in your route.php file
Route::post('someurl', 'YourController#someMethod');
in your controller file
public function someMethod(Request $request)
{
dd($request->all()); //fetch all your inputted fields
//get single input fields value
$someName = $request->someName;
}
I'm developing an app in Spring Boot with JSP in frontend. I have the following problem:
I have a table with different rows. I can click a button to update every row if I want. When I click in one row and change some data all works fine. The problem is when I click in one row, close or save this modal and following I open another row and edit again. The modal is good but when I save, I receive 2 POST to update the row behind and the actually row.
I don't use nothing strange... Probably I need to "clean" the modal when I close or save?
One of my modals (this happends in all table with modal to update the row)
Html/JSP:
<!-- UPDATE DISP MODAL -->
<div id="updateDispModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<form id="updateDispForm" class="needs-validation">
<div class="modal-header">
<div class="modal-title">
<h5 id="modalTitle">
<spring:message code="shares.displacement.update.btn" />
</h5>
</div>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-12 col-md-6">
<div class="form-group">
<label for="activityCenter" class="col-form-label"><spring:message code="shares.displacement.table.activity.center" /></label>
<select id="activityCenter" name="activityCenter" class="form-control" required>
<option disabled selected="selected">
<spring:message code="shares.displacement.table.activity.center" />
</option>
<c:forEach items="${teamLeaders}" var="teamLeader">
<option value="${teamLeader.userId}">
<spring:message code="${teamLeader.name} ${teamLeader.surnames}" />
</option>
</c:forEach>
</select>
</div>
</div>
<div class="col-sm-12 col-md-6">
<div class="form-group">
<label for="displacementDate" class="col-form-label"><spring:message code="shares.displacement.table.total.time" /></label>
<input id="displacementDate" name="displacementDate" type="datetime-local" class="form-control" required>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-6">
<label for="manualHours" class="col-form-label"><spring:message code="shares.displacement.total.time" /></label>
<input type="time" class="form-control" id="manualHours" name="manualHours">
</div>
<div class="col-sm-12 col-md-6">
<label for="roundTrip" class="col-form-label"><spring:message code="shares.displacement.round.trip" /></label>
<input type="checkbox" class="form-control" id="roundTrip" name="roundTrip" style="width: 20px">
</div>
</div>
<div class="row">
<div class="col">
<div class="form-group">
<label for="observations" class="col-form-label"><spring:message code="shares.displacement.observations" /></label>
<textarea id="observations" name="observations" class="form-control" rows="6"></textarea>
</div>
</div>
</div>
<input type="hidden" class="form-control" id="projectId" name="projectId">
</div>
<div class="modal-footer clearfix">
<div class="w-100">
<div class="float-left">
<button type="button" class="btn btn-sm" data-dismiss="modal"><spring:message code="cerrar" /></button>
</div>
<div class="float-right">
<button id="updateDispBtn" type="button" class="btn btn-sm btn-success"><spring:message code="save" /></button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- /CREATE MODAL -->
JavaScript:
$('#updateDispBtn').click(function () {
$.ajax({
type: "PUT",
url: "/shares/displacement/" + id,
data: $('#updateDispForm').serialize(),
success: function(msg) {
$('#dTableSignings').DataTable().ajax.reload();
showNotify(msg, 'success');
},
error: function(e) {
showNotify(e.responseText, 'danger');
}
});
$('#updateDispModal').modal('hide');
});
Finally, the user Swati help me to solve this problem. I need to unbind the button before clicking event: button onclick function firing twice
Thanks!
i have a case here. when clicked on button i want the class to be change for example if the button is clicked i want hide-tab to be removed and at the same time i want to add show-tab class this is my jquery code please help me with it
$(document).ready(function() {
$('#button').on('click', function() {
$('.form-group').removeClass('hide-tab');
$(this).addClass('show-tab');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-container">
<form class="fs-form fs-form-full">
<div class="form-group">
<label class="field">What is your name?</label>
<input type="text" class="form-control">
<div class="border"></div>
</div>
<div class="form-group hide-tab">
<label class="field">What is your mobile number?</label>
<input type="text" class="form-control">
<div class="border"></div>
</div>
<div class="form-group hide-tab">
<label class="field">What is your email address?</label>
<input type="email" class="form-control">
<div class="border"></div>
</div>
<div class="form-group hide-tab">
<label class="field">What type of event do you want us to organize?</label>
<select class="form-control">
<option>Dance Events</option>
<option>Birthday Events</option>
<option>Family Gathering Events</option>
<option>Marathon Events</option>
<option>Awards Ceremony</option>
<option>Art Competition</option>
</select>
<div class="border"></div>
</div>
<div class="form-group hide-tab">
<label class="field">Breif your thoughts</label>
<textarea class="form-control"></textarea>
<div class="border"></div>
</div>
<div class="form-group hide-tab">
<label class="field">Schdule Meeting</label>
<input type="date" class="form-control">
<div class="border"></div>
</div>
<div class="form_group">
<button type="submit" class="btn btn-primary" id="button">Continue</button>
</div>
</form>
</div>
Since your button type is submit.So changes happen but at-once form is processed and everything is reloaded. That's why you are unable to see the changes.
Use preventDefault() like below:-
$(document).ready(function() {
$('#button').on('click', function(e) {
e.preventDefault();
$('.form-group').removeClass('hide-tab'); // remove hide-tab class from all elements having form-group class
$(this).addClass('show-tab'); // this will add class to the button only not to others
});
});
I HAVE A FORM BUT NG SBMIT DOESNOT CALL THE FUNCTION
I dont understand why this form not submitting . i have check every thing but it not even call the alert button also
HTML
<form role="form" name="frmCashback" method="post" ng-submit="CashbackUser(frmCashback, Rates)">
<!-- Personal Details Start -->
<div class="well">
<legend> Cashback Details </legend>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="Store">Store:</label>
<select name="Store" class="form-control" ng-model="Rates.Store" ng-options="stores.StoreID as stores.StoreName for stores in StoreList" >
<option value="">Select</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="Store">Category:</label>
<select name="Category" class="form-control" ng-model="Rates.Category" ng-options="Cate.CategoryID as Cate.CategoryName for Cate in CategoryList" >
<option value="">Select</option>
</select>
</div>
<!-- Modal -->
<!---------Model End-------->
</div>
<div class="col-md-4">
<div class="form-group">
<label for="usr">Cash Back Rate:</label>
<input type="text" class="form-control" name="Cashback" id="Cashback" ng-model="Rates.Cashback" required>
</div>
</div>
</div>
<!---------Model End-------->
</div>
</div>
<div class="row">
<div class="col-md-12">
<button class="btn btn-primary" type="submit">Add Cashback</button>
</div>
</div>
</div>
<!-- Personal Details End -->
</form>
Here is my controller
CONTROLLER
$scope.CashbackUser = function(frm, Rates) {
alert('Hi');
//query_params.Status = CheckStatus.Action;
//console.log(Rates);
}
I have check :
function is within the controller
I am figthing with this for 4 hr kindly help me.
Your template seems to be having error ,form submit will not work if your template having error think so
<!---------Model End-------->
</div>
</div>
In your form, you can use this:
ng-submit="CashbackUser()"
And in your controller:
$scope.CashbackUser = function(){
console.log($scope.frmCashback);
console.log($scope.Rates);
}
I have a project requirement in which the web page I am building in question needs to be read by the JAWS screen reading software, but the client only has access to JAWS 11 as their latest version.
We currently have JavaScript-based pop-up dialogs for many of the forms on the web and right now a big problem is that the JAWS 11 software cannot read the below pop-up text. What is wrong with the pop-up dialog below (in HTML)?
<div class="modal fade" id="EditContentModal" tabindex="-1" role="dialog" aria-labelledby="editContentDialogTitle"
aria-hidden="true" title="Edit Content Pop-up Dialog Window" aria-describedby="editContentDialogTitle">
<div class="modal-dialog" >
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" value="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="editContentDialogTitle">Edit: Content ID <span id="lblContentid"></span></h4>
</div>
<div class="modal-body">
<div class='row'>
<div class='col-md-8'>
<div class='form-group'>
<label for="edit_Contentnumber">Content Number</label>
<input type="text" class="form-control" max-length="20" id="edit_Contentnumber" />
</div>
</div>
</div>
<div class='row'>
<div class='col-md-8'>
<div class='form-group'>
<label for="edit_Educationalinsitution">Educational Insitution</label>
<input type="text" class="form-control" max-length="100" id="edit_Educationalinsitution" />
</div>
</div>
</div>
<div class='row'>
<div class='col-md-8'>
<div class='form-group'>
<label for="edit_TotalAmountforRecovery">Total Amount Available for Recovery</label>
<input type="text" class="money form-control" max-length="10" id="edit_TotalAmountforRecovery" />
</div>
</div>
</div>
<div class='row'>
<div class='col-md-8'>
<div class='form-group'>
<label for="edit_source">Source</label>
<select id="edit_source" class="form-control"></select>
</div>
</div>
</div>
<div class='row'>
<div class='col-md-8'>
<div class='form-group'>
<label for="edit_indemletterdate">Indemnification Letter Date</label>
<input type="text" class="form-control datepicker" id="edit_indemletterdate" />
</div>
</div>
</div>
<div class='row'>
<div class='col-md-8'>
<div class='form-group'>
<label for="edit_Contentreceiveddate">Content Received Date</label>
<input type="text" class="form-control datepicker" id="edit_Contentreceiveddate" />
</div>
</div>
</div>
<div class='row'>
<div class='col-md-8'>
<div class='form-group'>
<label for="edit_site">Site</label>
<select id="edit_site" class="form-control">
</select>
#*<input type="text" class="form-control" max-length="10" id="edit_site" />*#
</div>
</div>
</div>
<div class='row'>
<div class='col-md-8'>
<div class='form-group'>
<label for="edit_status">Status</label>
<select id="edit_status" class="form-control">
</select>
</div>
</div>
</div>
<input type="hidden" id="edit_Contentid" />
<img id="displayBlockUI" alt="Spinner" src="~/Images/loader2.gif" width="32" height="32" style="display:none" />
</div>
<div class="modal-footer">
<button type="button" id="cancel_edit" class="btn btn-default" data-dismiss="modal" value="Close">Close</button>
<button type="button" id="save_edit" class="btn btn-primary" value="Save">Save</button>
</div>
</div>
</div>
</div>
Setting the main content to aria-hidden='true' tells the screen reader to stop reading the content there.
Try using aria-hidden='false'
How are you opening the modal? Because with a tabindex of -1 on the wrapper div, you will only be able to send the screenreader and keyboard focus to the modal via JavaScript. In that case it's best to make moving the focus part of the script which opens the modal.
On the other hand, if it's opened via a link, you can just remove that tabindex attribute altogether and put the id of the wrapper div in the link href, e.g. <a href=#EditContentModal>
Either way, remember to send focus back to where it started when the modal is closed.
Edited to clarify: the tabindex="-1" attribute on your wrapper div is preventing keyboard access. Remove it. See MDN's tabindex reference: a negative value means that the element should be focusable, but should not be reachable via sequential keyboard navigation.