I am trying to send data on button on modal using jQuery, first time it is working well but when I click second time it execute twice and for third time it execute 3 times, I want to execute that button only once, what is wrong exactly?
my modal
`<div id="Modal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content modal-sm">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">product</h4>
</div>
<div class="modal-body">
<label>Quantity</label>
<input type="text" class="form-control" id="qty" value="">
<label>Note:</label>
<input type="text" class="form-control" id="note" value="">
</div>
<div class="modal-footer">
<button id="" type="button" class="btn btn-primary mdismiss" data-dismiss="modal">Add</button>
</div>
</div>
</div>
</div>`
my jQuery :
`
$('#btnbtn').click(function(){
$('#Modal').modal('show');
$('#addbutton').click(function(){
alert();
});
});`
You are adding click handler multiple time whenever you are clicking on #btnbtn button. No need of attaching click event handler to #addbutton on each click. Change your code like below:
$('#btnbtn').click(function(){
$('#Modal').modal('show');
});
$('#addbutton').click(function(){
alert();
});
Instead of using .click() when binding the button you can use one(). It will only execute once.
$('#btnbtn').click(function(){
$('#Modal').modal('show');
$('#addbutton').one('click', function(){
alert();
});
});`
Related
Im trying to fix a strange error with my code with the Bootstrap 4 Modal code. I've simply just copied and pasted the code from here: https://getbootstrap.com/docs/4.0/components/modal/#events
This is for an automotive website and Im trying to pass stock and VIN via the data attribute as requested. The question is how this works with a foreach loop. It works on a single Wordpress page or post but won't pull the data from each section of the loop.
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-stock="<?php echo $vehicle['stock_number'];?>">Check Availability</button>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Stock</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="col-form-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">Message:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
And my Jquery code
(function($) {
$('#exampleModal').on('modal.fade.show', function (event) {
alert( "clicked" );
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('stock') // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use $ here, but you could use a data binding library or other methods instead.
var modal = $(this)
modal.find('.modal-title').text('New message to ' + recipient)
modal.find('.modal-body input').val(recipient)
})})( jQuery );```
Functionality wise this works, just not within the dynamic pages that are being generated in the foreach loop. The buttons have the proper data-attribute applied but the data doesn't seem to pass to the modal from the loop. I have a development page up where you can take a live look here, the button in question is the "Check Availability" http://windsor.sixomedia.ca/inventory/New/
Try this
var recipient = button.data('data-stock');
Hope that helps.
i have modal popup in loop with database values. In popup there is a reply textarea and i want to post that value using ajax. But i am getting empty value of textarea when i alert value on click event using jquery. Here is my code
CODE:
<?php
$sn=1;$rep=1;
foreach($view_queries as $q) {?>
Reply
?>
<!-- create reply model -->
<div id="create_reply<?php echo $rep;?>" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<form id="send_reply" method="post" antype="multipart/form-data">
<input type="hidden" name="query_id" value="<?php echo $q->query_id;?>" />
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Reply To Query</h4>
</div>
<div class="modal-body">
<label>Query:</label>
<p><?php echo ucfirst($q->query);?></p>
<div class="form-group">
<label>Reply:</label>
<textarea rows="3" name="mesg" id="<?php echo $sn;?>mesg" class="form-control"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" id="" data-target="<?php echo $sn;?>mesg" class="btn btn-default form_click">Reply</button>
</div>
</form>
</div>
</div>
</div>
<!-- create reply model ends -->
<?php $sn++; $rep++; }?>
HERE IS THE SCRIPT FOR CHECKING VALUE IN ALERT:
<script>
$(document).ready(function(){
$(document).on("click",".form_click",function(event){
event.preventDefault();
var a=$('#' + $(this).data('target')).text();
alert(a);
});
});
</script>
You should use .val() instead of .text(). text() get's the HTML contents of a HTML element. val() is used for getting contents of HTML inputs.
Also as Smit Raval already stated, id's should be unique.
You could give the fields an id with and index set in PHP.
So in every loop you increment the index and add that to your id values, like so:
id="<?=$index?>_mesg".
And in your button do:
<button type="button" data-target="<?=$index?>_mesg" id="" class="btn btn-default form_click">Reply</button>
And then in your jquery you can do var a=$('#' + $(this).data('target')).val();
See the added data-target in your button. And the $(this).data('target') in the jquery for retrieving the value of the target data attribute.
<script>
$(document).ready(function(){
$(document).on("click",".form_click",function(event){
event.preventDefault();
var a= $(this).parents("form.send_reply").find("textarea.mesg").text();
alert(a);
});
});
</script>
change id="mesg" to class="mesg" in your loop.Also make sure you don't repeat the same ID in your loop. Change id="send_reply" to class="send_reply"
I have a small form for barcode scanning. I scan the barcode of a product and a bootstrap box will appear. Into the modal i post barcode number of product. And inside the modal there is another form, which will retrieve barcode number of product and will fill some inputs and insert it into the mysql database table.
<form name="barkod_oku" id="barkod_oku" action="" method="post" >
<input name="sto_barkod" id="sto_barkod" value="" autofocus placeholder="Barkod Numarası">
<input type="hidden" name="alis_fatura_no" value="<?php echo $finalcode1 ;?>">
</form>
This is the form which i post 2 values into the modal box.
And this is the modal box which i want to see. ( İ haven't put otehr inputs into the modal yet.Later i will put.)
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<input name="barkod_no" value="<?php echo $sto_barkod1; ?>">
<input name="fatura_no" value="<?php echo $stok_kodu1; ?>">
</div>
</div>
</div>
</div>
And also i use this javascript to open the modal box:
<script>
$('#barkod_oku').submit(function () {
$('#myModal').modal('show');
});
</script>
Shortly everything works fine i think but modal is not staying on the screen. It appears and then disappears in one second. What is the missing point that i can not see to hold the modal on screen?
You need to use Prevent the default action of a submit button
$('#barkod_oku').submit(function () {
event.preventDefault();
$('#myModal').modal('show');
});
I have a button and I am trying to pass value to a model.Inside button I have name="className" value="CPS210-CompSci-I (4)" button is type submit.
<button type="submit" data-toggle="modal" data-target="#myModal"
class="btn btn-info btn-md" name="className" value="CPS210-CompSci-I (4)">
<span class="glyphicon glyphicon-comment"></span> Comment
</button>
I have a model. Inside model I have php $className =$POST['className'];
echo "$className";
<div ng-app class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><?php echo "Note for $firstname $lastname" ?></h4>
</div>
<div class="modal-body">
<div class="form-group">
<textarea class="form-control" ng-model="note"
placeholder="Here you can write a a note for the student. " id="message"
required data-validation-required-message="Please enter a Goal"></textarea>
<p class="help-block text-danger"></p>
<label class="light">
</div>
<hr>
<?php $className = $_POST['className'];
echo "$className";
?>
<h4>Note Regarding:{{note}} </h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Variables are only added to the $_POST array after a form has been submitted. You're page must "refresh" before the array is filled. When the modal triggers and opens a new modal box on the scree, this is not considered a page refresh, therefore the value of the button you clicked is not added to the array.
You either need to put your button inside a form tag, which will trigger the modal to open when the page "refreshes" and the value in that key exists. This would be annoying and defeat the whole purpose of bootstrap modals.
You're other, more likely option, is to use javascript to move the value in the button to the spot in the modal when the button is clicked.
$('button[name="className"]').click(function(){
var className = $(this).val();
$('#class-name').html(className);
});
And edit your modal where you want the class name to this:
<hr>
<p id="class-name"></p>
<h4>Note Regarding:{{note}} </h4>
I am using Codeigniter framework and twitter bootstrap for my development purpose. Here I encountered a problem where I have to edit a form in the modal box. How can I pass data to the form displayed in twitter bootstrap modal box?. Please help me with a possible solution.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
</script>
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Header of Modal</h3>
</div>
<div class="modal-body">
<form class="form-element">
Title: <input type="text" class="form-title" value="initial title" /><br />
Something Else: <input type="text" class="form-element2" value="initial value" /><br />
<div class="some-box">
The elements inside the box
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
Click here to change title
Click here to change Element2
Click here to change div's contents
<script>
$(".changeTitle").click(function(){
$(".form-title").val("New title");
});
$(".changeElement").click(function(){
$(".form-element2").val("New value of element");
});
$(".changeDiv").click(function(){
$(".some-box").html("New Contents of the div element");
});
</script>