Why there won't be a value pass in my modal body? - javascript

For example there are three inputed sample and when I try to delete the second inputed sample it won't be deleted instead the third one will be the one is deleted. Another error is that if there will be one inputed sample left and I try to delete it then code will be error.
Modal Code
<div class="modal fade" id="delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title text-center" id="myModalLabel">Delete Confirmation</h1>
</div>
<form class ="delete" action="{{ action('ReservationController#destroy', ['id' => $reservation->id])}}" method="post">
{{ method_field('DELETE')}}
{{ csrf_field() }}
<div class="modal-body">
<p class="text-center">Are you sure you want to delete?
</p>
<input type="hidden" name="reservation_id" id="resid" value="" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" data-dismiss="modal">No, Close</button>
<button type="submit" class="btn btn-danger">Yes, Delete</button>
</div>
</form>
</div>
</div>
Script Code
<script>
$('#delete').on('show.bs.modal',function(event){
var button = $(event.relatedTarget)
var resid = button.data('deleteid')
var modal = $(this)
modal.find('.modal-body #resid').val(resid)
})
</script>
Button code
<button type="submit" class="btn btn-danger" data-deleteid="{{$reservation->id}}" data-toggle="modal" data-target="#delete" >Delete</button>
Controller
$reservation = PropertyReservation::findOrFail($id);
$reservation->delete();
return redirect('/reservations')->with('success','Successfully Deleted');

Try this
<script>
$(document).on('show.bs.modal','#delete',function(event){
var resid = $(this).find('button[type="submit"]').attr('data-deleteid')
var modal = $(this);
modal.find('.modal-body #resid').val(resid);
})
</script>

Related

css selectors, set property for all except two tags

i have a modal and i try to implement nested comments
now i want to send the parent comment id to child comment in modal
button that show modal:
<button class="btn btn-xs btn-light" data-target="#commentModal" data-toggle="modal" data-parent="3">پاسخ</button>
<div class="modal fade" id="commentModal" tabindex="-1" role="dialog" aria-labelledby="commentModal" aria-hidden="true" dir="rtl">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
<h4 id="modal-label-3" class="modal-title">ارسال نظر</h4>
</div>
<div class="modal-body">
<div class="respond-form" id="respond" style="padding-top: 0">
<form action="/comment" class="form-gray-fields">
{{ csrf_field() }}
<input type="hidden" name="parent_id" value="0">
<br>
<div class="row">
<div class="col-md-12">
<div class="form-group text-center">
<button class="btn btn-block" type="submit">ثبت دیدگاه</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
i want to send value of data-parent in button, to "vlaue" attribute of input in modal
i see this for bootstrap modals:
$('#commentModal').on('show.bs.modal' , function (event) {
let button = $(event.relatedTarget);
let parentId = button.data('parent');
let modal = $(this);
modal.find("[name='parent_id']").val(parentId);
});
but i do not use bootstrap and following code not working for me!
How about something like this?
$(".btn").on("click", function(){
$(".modal-body").find("[name=parent_id]").val($(this).data("parent"));
// Code to show modal
});

How to change a value in hidden field from a modal

Having a modal with the Terms and Conditions, I need to change the hidden input field value, (name="agree") which is outside the modal, from "no" to "yes" if user accept the terms by clicking the Accept (Acepto) button.
The reason for doing this is that the form can be sent with the acceptance of the Terms and Conditions.
Many Thanks in advance.
This is my code (its not working, the value of the input field "agree" never changes):
<form id="formced" ... >
....
<div class="form-group">
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#termsModal">Acepto los Términos y Condiciones </button>
</div>
<!-- Terms and conditions modal -->
<div class="modal fade" id="termsModal" tabindex="-1" role="dialog" aria-labelledby="Términos y Condiciones" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Términos y Condiciones</h3>
</div>
<div class="modal-body">
<p>TERMINOS Y CONDICIONES ...</p>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary" id="agreeButton" data-dismiss="modal">Acepto</button>
<button type="button" class="btn btn-default" id="disagreeButton" data-dismiss="modal">No Acepto</button>
</div>
</div>
</div>
<input type="hidden" name="agree" value="no" />
<script>
$(document).ready(function() {
// Update the value of "agree" input when clicking the Agree/Disagree button
$('#agreeButton, #disagreeButton').on('click', function() {
var whichButton = $(this).attr('id');
$('#formced')
.find('[name="agree"]')
.val(whichButton === 'agreeButton' ? 'si' : 'no')
.end()
});
});
</script>
<a class="btn btn-primary btn-md" role="button" onClick="return ParaOtrosNavegadores1();">Continuar <span class="glyphicon glyphicon-forward" aria-hidden="true"></span></a>
<script type="text/javascript">
function ParaOtrosNavegadores1(){
document.formced.submit();
}
</script>
</form>
Working fiddle.
Try to target the element directly like :
$('input[name="agree"]').val(assignedVal);
Code:
function ParaOtrosNavegadores1() {
document.formced.submit();
}
$(document).ready(function() {
// Update the value of "agree" input when clicking the Agree/Disagree button
$('#agreeButton, #disagreeButton').on('click', function() {
var whichButton = $(this).attr('id');
var assignedVal = whichButton === 'agreeButton' ? 'si' : 'no';
$('input[name="agree"]').val(assignedVal);
console.log('Hidden field value is : ' + $('input[name="agree"]').val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<input type="hidden" name="agree" />
<form id="formced">
<div class="form-group">
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#termsModal">Acepto los Términos y Condiciones </button>
</div>
<!-- Terms and conditions modal -->
<div class="modal fade" id="termsModal" tabindex="-1" role="dialog" aria-labelledby="Términos y Condiciones" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Términos y Condiciones</h3>
</div>
<div class="modal-body">
<p>TERMINOS Y CONDICIONES ...</p>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary" id="agreeButton" data-dismiss="modal">Acepto</button>
<button type="button" class="btn btn-default" id="disagreeButton" data-dismiss="modal">No Acepto</button>
</div>
</div>
</div>
<a class="btn btn-primary btn-md" role="button" onClick="return ParaOtrosNavegadores1();">Continuar <span class="glyphicon glyphicon-forward" aria-hidden="true"></span></a>
</form>

Inject values into html function via jQuery on modal

I have a trigger button for modal, passing the id and value.
In script section I need "inject" the form into modal-body.
My problem is pass the variables in the html function of the script. How do it?
html
<button value="{{ $etapaano->trabalho_id }}" id="{{ $etapaano->id }}" class="btn btn-primary btn-sm" title="Enviar Arquivo" data-toggle="modal" data-target="#myModalUploadArquivos"><i class="fa fa-upload"></i> Enviar</button>
<div id="myModalUploadArquivos" class="modal fade" 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" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Submeter Arquivo</h4>
</div>
<div id="modalBodyArquivo" class="modal-body">
</div>
</div>
</div>
</div>
script
$('#myModalUploadArquivos').on('show.bs.modal', function(e) {
var $modal = $(this);
var etapaanoid = e.relatedTarget.id;
var trabalhoid = e.relatedTarget.value;
$('#modalBodyArquivo').html('<form method="POST" enctype=multipart/form-data action="{{ url("arquivo/store/etapaanoid/trabalhoanoid") }}" file="true">{{ csrf_field() }}<label for="descricao">Arquivo *</label><input type="file" name="descricao" /></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button><button id="enviaArquivo" type="submit" class="btn btn-primary pull-right" title="Enviar Arquivo">Enviar</button></div></form>');
});
Try replacing this:
"{{ url("arquivo/store/etapaanoid/trabalhoanoid") }}"
With this:
"{{ url("arquivo/store") }}/'+etapaanoid+'/'+trabalhoanoid+'"

Call show.bs.modal event before parent event

I have a bootstrap button (I used bootstrap 4) that open a modal and transfer the data that in the button to the form in the modal by the function:
$('#exampleModal').on('show.bs.modal', function (event).
the button is in a div (parent).
when I click on the button the parent event called before the child.
I don't want the parent event to be run.
I need only the popup modal to open.
when I try to open the button by onclick its call first but the data is not transfer.
this is my code example: codepen
this is the html
<div class="row">
<div class="col-12 parent">
I'm the parent!
<div class="child">
I'm the child
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="#mdo" data-message="#test message" >Open modal </button>
</div>
</div>
</div>
<!-- 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">
<h5 class="modal-title" id="exampleModalLabel">New message</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="form-control-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="message-text" class="form-control-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>
this is the script
<script>
$(".parent").click(function(event){
alert("Parent event");
})
/*
if I add this function I cant transfer the data that in the button
$(".child").click(function(event){
alert("Child event");
event.stopPropagation();
$('#exampleModal').modal('show');
})*/
$('#exampleModal').on('show.bs.modal', function (event) {
alert("btn event");
var button = $(event.relatedTarget) // Button triggered the modal
var recipient = button.data('whatever')
var message = button.data('message')
var modal = $(this)
modal.find('.modal-title').text('New message to ' + recipient)
modal.find('.modal-body input').val(recipient)
modal.find('.modal-body textarea').val(message)
})
</script>
Quite simple in the parent click , check if target is different to the button with data-target='#exampleModal' or not , all that using the .is() jquery function like below :
//get reference to the button
var $button = $("button[data-target='#exampleModal']");
$(".parent").click(function(event){
if (!$(event.target).is($button)) { // be sur button was'nt clicked
alert("Parent event");
}
})
Updated Pen
See below working snippet :
var $button = $("button[data-target='#exampleModal']");
$(".parent").click(function(event){
if (!$(event.target).is($button)) {
alert("Parent event");
}
})
$('#exampleModal').on('show.bs.modal', function (event) {
alert("btn event");
var button = $(event.relatedTarget) // Button triggered the modal
var recipient = button.data('whatever')
var message = button.data('message')
var modal = $(this)
modal.find('.modal-title').text('New message to ' + recipient)
modal.find('.modal-body input').val(recipient)
modal.find('.modal-body textarea').val(message)
})
body {
background-color: #a3d5d3;
}
.col-12{ background:red; height:100px;}
.child{background:white;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-12 parent">
I'm the parent!
<div class="child">
I'm the child
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="#mdo" data-message="#test message" >Open modal </button>
</div>
</div>
</div>
<!-- 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">
<h5 class="modal-title" id="exampleModalLabel">New message</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="form-control-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="message-text" class="form-control-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>

Use Handlebar template with bootstrap modal

I have a bootstrap modal with handlebar script-
<script id="data-template" type="x-handlebars-template">
<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" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">Add Data</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" id="form" enctype="multipart/form-data" action="upload.php" method="POST">
<fieldset>
<div class="control-group">
<label class="control-label" for="input01">Message</label>
<div class="controls">
<textarea class="input-xlarge" id="input01" name="text" value="{{value}}"></textarea>
</div>
</div>
</fieldset>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary" name="submit" value="submit">
Save
</button>
<button name="cancel" value="cancel" class="btn btn-default" data-dismiss="modal">
Cancel
</button>
</div>
</form>
</div>
</div>
</div>
</script>
now on a button click I am opening the modal as well as onClick method is calling getDataWithId() method to fill data in the modal-
<b>+</b> Add
and this my getDataWithId() method.
function getDataWithId(id){
var newData;
var theTemplateScript = $("#data-template").html();
var theTemplate = Handlebars.compile (theTemplateScript);
$.get("http://localhost:8092/data_service.php?method=news&id="+id,
function(data, textStatus, jqXHR) {
newData= $.parseJSON(JSON.stringify(data.data.posts));
$(".modal").append (theTemplate(newData));
}).fail(function(jqXHR, textStatus, errorThrown) {
});
}
Data is not showing on the input field though modal is opening perfectly.

Categories