in a modal i want to run a method when click on a button
here is the code of modal :
<div class="modal fade" id="new" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">#lang('admin.new')</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="col-xs-12 create text-center font-rtl">
<div class="form-group form-md-line-input col-xs-12 text-center">
<label for="form_control_1">#lang('admin.type')</label>
<input type="text" class="form-control" name="type" id="form_control_1"
required v-model="da.type">
</div>
<div class="form-group form-md-line-input col-xs-12 ">
<label for="form_control_1">#lang('admin.status')</label>
<select class="form-control" name="active" required v-model="da.active">
<option value=""></option>
<option value="true">#lang('admin.active')</option>
<option value="false">#lang('admin.inactive')</option>
</select>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button class="btn btn-primary bb" #click="post_type()">#lang('admin.save')</button>
</div>
</div>
</div>
</div>
and my method is define in external .ts file :
post_type() {
post_data(this.da).subscribe(function (x: any) {
if (x.status == "failure") {
// toastr[]("Gnome & Growl type non-blocking notifications", "Toastr Notifications")
toastr.error(x.message);
} else {
// console.log(result.status);
// location = "/admin/category?type_id="+this.type_id;
this.get_type_data();
$('#new').modal('toggle');
this.da.type = '';
this.da.active = '';
toastr.success(x.message);
}
});
},
i do this for other page and it work correctly but for this one does not work and even not firing .
what should i do?
Related
I use VueJS on one page. It's just imported from CDN so I can't use bootstrap-vue.
I'm trying to show and hide modal when showModal data is true.
So far it works but it does not show the gray overlay surrounding the modal. How can I do that? It's Bootstrap 5.
<div id="exampleModalLong" tabindex="-1" aria-labelledby="exampleModalLongTitle" class="modal fade"
:class="showModal ? 'show' : ''" :style="{display: showModal ? 'block' : 'none'}" :aria-modal="showModal ? 'true' : ''"
:role="showModal ? 'dialog' : ''">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div style="width: 400px;">
<form>
<div id="div_id_api_secret_key" class="form-group">
<div v-for="field in journeySourceApp.details.fields">
<label :for="field.name" class=" requiredField">
[[field.name]]<span class="asteriskField">*</span> </label>
<div class="">
<input type="text" :name="field.name" v-model="authorizeAppForm[field.name]"
class="textinput textInput form-control" required=""
id="id_api_secret_key">
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" #click="createAppInstance">Save</button>
</div>
</div>
</div>
</div>
</div>
It goes like this
<button class="btn btn-primary" v-on:click="newAddressModal.show()">
Show Modal
</button>
<div class="modal fade" id="newModal" ref="newModal">
<div class="modal-dialog">
<div class="modal-content p-3">
<div class="modal-header">
<h3>Header</h3>
</div>
</div>
<div class="modal-body">
body
</div>
</div>
</div>
<script>
import { Modal } from 'bootstrap';
export default {
data(){
newModal : null
},
mounted(){
this.newModal = new Modal(this.$refs.nweModal);
}
}
Works on vue 3 bootstrap 5
This is my jquery code, i've to hide modal using jquery, i tried using 'hide' but it doesn't work!
$(document).ready(function () {
$('#modalButtonLogin').click(function (e) {
e.preventDefault();
$('#loginModal').modal()
});
$('#reserveButtonModal').click(function (e) {
e.preventDefault();
$('#modelId').modal()
});
$('#dismiss').click(function () {
$('#modelId').modal('hide');
});
});
I'm using the same ids but i don't know how to do it the id's are 'dismiss'
i have a problem, cause using data-dismiss it works but i need to know how it works in jquery
<!-- Modal Task's -->
<div class="modal fade" id="modelId" tabindex="-1" role="dialog" aria-labelledby="modelTitleId" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Reserve Table</h5>
<button type="button" class="close" aria-label="Close" id="dismiss">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="row p-2">
<div class="col-sm col-lg-2">
<h5>Section</h5>
</div>
<div class="btn-group align-self-center" data-toggle="buttons">
Non-Smoking
Smoking
</div>
</div>
<div class=" row p-2">
<div class="col-sm col-lg-2">
<h5 class="">Date and Time </h5>
</div>
<div class="mr-3 pb-2 ">
<input type="date" name="dateinfo" id="" placeholder="Date">
</div>
<div class="mr-3 pl-4">
<input type="time" name="" id="" placeholder="Time">
</div>
</div>
<div class=" row offset-lg-2 offset-1">
<button type="submit" class="btn btn-primary"> Reserve </button>
<button type="button" class="btn btn-secondary ml-2" id="dismiss">Close</button>
</div>
</div>
</div>
</div>
You can try to replace $('#modelId').modal('hide'); by $('#modalId').modal('toggle');
I have a model in html file with button which direct me to function in JS file.
My problem that I can't fetch the data from the modle
my HTML code
<div class="modal fade" id="modalRegisterForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header text-center bg-primary">
<h4 class="modal-title w-100 font-weight-bold" style="margin:5px 0 -10px 0;">أسم الصنف</h4>
<button type="button" class="close cl" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body mx-3">
<div class="md-form text-right">
<label data-error="wrong" data-success="right" for="orangeForm-company">الوصف</label>
<i class="fas fa-pen-fancy prefix blue-text"></i>
<textarea type="text" id="orangeForm-company" name="orangeForm-company" class="form-control validate text-right" placeholder=" إدخال الوصف"></textarea>
</div>
<div class="form-group md-form text-right">
<label for="sel1">الفئة</label>
<i class="fas fa-balance-scale prefix grey-text"></i>
<select class="form-control text-right" id="sel1" name="sel1">
<option>خامات</option>
<option class="text-right">تركيبات</option>
<option class="text-right">مكن</option>
</select>
</div>
</div>
<div class="modal-footer d-flex justify-content-center">
<button class="btn btn-success" onclick="AddItem()">إضافة</button>
</div>
</div>
</div>
</div>
While my JS code is
function AddItem(){
var ItemDesc = getElementById["orangeForm-company"].value;
var ItemType = getElementById["sel1"].value;
SearchInDataBase(ItemDesc,ItemType); }
The code crash in this statment
getElementById["sel1"].value;
How Can I solve this problem ??
The javascript is wrong, The code should be like,
function AddItem(){
var ItemDesc = document.getElementById("orangeForm-company").value;
var ItemType = document.getElementById("sel1").value;
SearchInDataBase(ItemDesc,ItemType);
}
I have a web page which displays jquery modal on button click.
$("#add").click(function () {
$("#dialog").modal();
});
HTML:
<div id="dialog" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="model" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Add</h4>
</div>
<div class="modal-body">
<div class="form-group required">
<label class="form-control-label">Name</label>
<input type="text" class="form-control required" required id="name" pattern="[A-Za-z]*" placeholder="John"/>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" id="save">OK</button>
</div>
</div>
</div>
</div>
When I resize the screen i.e, change width of the screen beyond certain limit, modal gets disabled. Is it the default behaviour of jquery modals and how to overcome this.?
I have this Bootstrap modal:
<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">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="exampleModalLabel">Input parameters</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="form-control-label">Base URL to fill id with your data (optional):</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="message-text" class="form-control-label">Max #pics per cluster:</label>
<input type="text" class="form-control" id="message-text">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">
Close
</button>
<button id="paramsOkay" type="button" class="btn btn-primary">
Okay
</button>
</div>
</div>
</div>
</div>
and I am doing this:
$('#exampleModal').on('click','#paramsOkay', function (e) {
console.log($('#recipient-name').text());
console.log(e);
});
which will fire when the "Okay" button is clicked, but the first console.log() is empty, and there I would expect to get user's input! The second console will log the event, but I don't really now how to extract the user's input from that...
How to get the value the user inputed, after the "Okay" value is clicked?
You must use of val() no text().
Change:
console.log($('#recipient-name').text());
To:
console.log($('#recipient-name').val());
Final code :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<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">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="exampleModalLabel">Input parameters</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="form-control-label">Base URL to fill id with your data (optional):</label>
<input type="text" class="form-control" id="recipient-name" value="Test">
</div>
<div class="form-group">
<label for="message-text" class="form-control-label">Max #pics per cluster:</label>
<input type="text" class="form-control" id="message-text">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">
Close
</button>
<button id="paramsOkay" type="button" class="btn btn-primary">
Okay
</button>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#exampleModal').on('click','#paramsOkay', function (e) {
console.log($('#recipient-name').val());
//console.log(e);
});
})
</script>
</body>
</html>