Inject values into html function via jQuery on modal - javascript

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+'"

Related

Value of an html input text sent to a .Net MVC controller

I try to send an html input text value to a controller. I can't use a form post because my modal dialog is already in a form.
Here's the code :
#foreach (var annonce in Model.AnnoncesRecherchees)
{
<!-- Modal -->
<div class="modal fade" id="#("AjouterVisiteVirtuelleModal" + #annonce.Reference)" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Ajouter visite virtuelle annonce #annonce.Reference</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="form-floating">
<input id="visitevirtuelle" class="form-control" autocomplete="" aria-required="false" />
<label class="form-label"></label>
<span asp-validation-for="Ville" class="text-danger"></span>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
#*<button type="button" class="btn btn-primary">Understood</button>*#
<a class="btn btn-primary" asp-controller="Acheteur" asp-action="AjouterVisiteVirtuelle" asp-route-annonceId="#annonce.ID" asp-route-visiteVirtuelle="document.getElementById("visitevirtuelle").value">Ajouter une visite virtuelle</a>
</div>
</div>
</div>
</div>
I want the parameter "asp-route-visiteVirtuelle" to have the value of the input text "visite virtuelle".
But it doesn't work
PLease help me.
Tag helper in anchor link render the url in href when the page load, so you cannot use js to add the value to asp-route-visiteVirtuelle.
Here is a whole working demo:
#foreach (var annonce in Model.AnnoncesRecherchees)
{
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="##("AjouterVisiteVirtuelleModal" + #annonce.Reference)">
Launch demo modal
</button> <!-- Modal -->
<div class="modal fade" id="#("AjouterVisiteVirtuelleModal" + #annonce.Reference)" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Ajouter visite virtuelle annonce #annonce.Reference</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="form-floating">
//add event here......................
<input onchange="ChangeUrl(this)" id="visitevirtuelle" class="form-control" autocomplete="" aria-required="false" />
<label class="form-label"></label>
<span asp-validation-for="Ville" class="text-danger"></span>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<a class="btn btn-primary" asp-controller="Acheteur" asp-action="AjouterVisiteVirtuelle" asp-route-annonceId="#annonce.ID" >Ajouter une visite virtuelle</a>
</div>
</div>
</div>
</div>
}
#section Scripts
{
<script>
function ChangeUrl(event)
{
var visiteVirtuelleVal = $(event).val();
var anchor = $(event).closest('.modal-body').siblings('.modal-footer').find('a').attr('href');
$(event).closest('.modal-body').siblings('.modal-footer').find('a').attr('href',anchor+"&visiteVirtuelle="+visiteVirtuelleVal);
}
</script>
}

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

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>

pass data to modal and then use the data as parameter in calling a controller not working

View:
<head>
<script>
var ABSOLUTE_PATH = '<?php echo base_url()?>';
</script>
</head>
//inside a table data
<button type="button" class="btn btn-danger btn-sm open-deleteModal" data-id="<?php echo $news['id']; ?>" data-toggle='modal' data-target="#deleteModal"><i class="fa fa-fw fa-trash-o"></i> Delete
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Delete Record</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Are you sure you want to delete this record?</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
<a class="btn btn-primary" id="delRowId">Delete</a>
</div>
</div>
</div>
</div>
javascript placed in a footer
$(document).on("click", ".open-deleteModal",function(){
var rowId = $(this).data('id');
$(".modal-body #delRowId").attr("href",ABSOLUTE_PATH+"admins/deletenews/"+rowId);
});
</script>
controller:admins.php
public function deletenews($rowid){
$this->load->view('templates/admin_header');
$this->load->view('admin_pages/view');
$this->load->view('templates/admin_footer');
}
the <a class="btn btn-primary" id="delRowId">Delete</a> should be the one calling the javascript but it does not call the controller. please help me someone....
This just changes the href to proper link
$(".modal-body #delRowId").attr("href",ABSOLUTE_PATH+"admins/deletenews/"+rowId);
Need to trigger click event after changing the href for propoer link. try something like this
$(".modal-body #delRowId").attr("href",ABSOLUTE_PATH+"admins/deletenews/"+rowId).click();

Delete confirmation modal using Bootstrap and AJAX

I am trying to create a modal pop up and include an AJAX call inside the modal body.
The script, included AJAX. works fine.
Here is the button which calls the modal (I am working with TWIG templates)
<button class="btn btn-danger" data-id="{{ product.id }}">Delete</button>
This is the jQuery script:
$(document).ready(function() {
$('[data-id]').each(function() {
var $this = $(this),
id = $this.data('id');
$this.on('click', function(event) {
event.preventDefault();
$.post('{{ path('dashboard_ajax ') }}', {
'id': id
},
function(details) {
var $modal = $(details);
$('#confirm-delete').remove();
$('body').append($modal);
$modal.modal();
}
);
})
});
});
And this is the page with the modal
<div class="modal fade" id="confirm-delete" 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">Confirm Delete</h4>
</div>
<div class="modal-body">
<div class="alert alert-danger" role="alert">
<p>Do you really want to delete <b>{{ product.name }}?</b></p>
</div>
<img src="{{ asset('uploads/product_images/') }}{{ product.image }}" style="width: 240px;" class="img-responsive thumbnail" />
</div>
<div class="modal-footer">
<button type="button" id="misha" class="btn btn-default" data-dismiss="modal">Cancel</button>
<a class="btn btn-danger btn-ok">Delete</a>
</div>
</div>
</div>
Now, If click on the delete button I would like remove the selected item using the related page (example: delete.php)
One way you can do is by attaching a click hander and setting the location like this
window.location.href = 'delete.php';
Or something like this
<a class="btn btn-danger btn-ok" href="delete.php">Delete</a>
If you have the product ID, that be sent to delete.php like this
<a class="btn btn-danger btn-ok" href="delete.php?ID={{ product.id }}">Delete</a>

Modal work But not delete data with clicking confirm

I want to delete my data with modal confirmation.on remove click my modal show but when click confirm then data not delete.
I am trying but cant understand whats wrong with my code
my code
<script>
$(document).on("click", "#deleteBtn", function (e) {
e.preventDefault();
e.stopPropagation();
var link = $(this).attr('data-adid');
console.log($("#myModal btn-warning a"));
$("#myModal .btn-warning a").attr('href',link);
$(".modal").modal("show");
});
</script>
<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">Remove Client Account</h4>
</div>
<div class="modal-body">
Body goes here...
</div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-default" type="button">Close</button>
<button class="btn btn-warning" type="button"> <a href="" >Confirm</a></button>
</div>
</div>
</div>
</div>
<a class="btn btn-warning" id="deleteBtn" data-adid=?a=client&cdid='.$cd[$i][0].' data-toggle="modal" href="#myModal">Remove</a>
I too can't understand what's wrong with your code, but since you want to delete the data attribute, you can do the below.
$(this).removeAttr("data-adid");

Categories