Develop Reference

Adding row to table with Jquery error [object HTMLSpanElement]

I am trying to add the value of a Modal to a table but the error appears Adding row to table with Jquery error [object HTMLSpanElement], when I click on register.
$(document).ready(function(){
$(".add").click(function(){
//var name = $("#nomeoferta").val();
var name = document.getElementById('nomeoferta');
var lastname = $("#descontooferta").val();
var lastname = $("#ativodesde").val();
var markup = "<tr><td></td><td>" + nomeoferta + "</td><td>" + descontooferta + "</td><td></td><td>" + ativodesde + "</td></tr>";
$("#dataTable").append(markup);
});
});
HTML:
<!-- 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">Cadastro de Novas Ofertas</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="input-group mb-3">
<span class="input-group-text" id="nomeoferta">Nome da Oferta</span>
<input type="text" class="form-control" placeholder="Nome da Oferta"
aria-label="Username" aria-describedby="basic-addon1">
</div>
<div class="input-group mb-3">
<span class="input-group-text" id="descontooferta">Desconto de: </span>
<input type="text" class="form-control col-md-4" placeholder="Desconto"
aria-label="Desconto" aria-describedby="basic-addon1" type="number">
<span class="input-group-text" id="basic-addon2">%</span>
</div>
<div class="input-group mb-3">
<span class="input-group-text" id="ativodesde">Ativo desde</span>
<input type="date" class="form-control col-md-4" placeholder="Desconto"
aria-label="Desconto" aria-describedby="basic-addon1" type="number">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
<button type="button" class="btn btn-primary add">Cadastrar</button>
</div>
</div>
</div>
</div>
<!-- Modal -->

How to get dynamic data in bootstrap modal for each id by using laravel?

I am developing an app which requires to show the data at every click on my different list of icon. The problem is how to display data in to bootstrap modal according to id. Thanks in advance.
index.blade.php .
<div class="col-md-3">
<button type="button" class="btn btn-success " data-toggle="modal" data-target="#myModal" data-id="{{$post->id}}">Ajouter
</button>
</div>
<div class="modal fade" id="myModal" 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">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 class="container-fluid">
<div class="row">
<div class="col-md-12 ">
<div class="panel panel-default">
<div class="panel-heading text-center">Nouvelle annonce</div>
<div class=" form-group col-sm-6">
<img class="cart-img img-responsive" src="images/cover_image/{{$post->cover_image}}" alt="IMG-PRODUCT">
</div>
<div class=" form-group col-sm-3">
<span id="layer_cart_product_title" class="product-name layer_cart_product_title"><h2> {{$post->nom_comr}}</h2> </span>
<hr>
<span id="layer_cart_product_ti" class="product-name"><h4> {{$post->date_perm}}</h4> </span>
<span id="layer_cart_product_ti" class="product-name"><h4> {{$post->offre}}</h4> </span>
<hr>
<span id="layer_cart_product_ti" class="product-name"><h4> {{$post->pv_ht}}</h4> </span>
</div>

<button type="button" class="btn btn-success " data-toggle="modal" data-target="#myModal{{$post->id}}" data-id="{{$post->id}}">Ajouter</button>
<div class="modal fade" id="myModal{{$post->id}}" tabindex="-1" role="dialog" aria-labelledby="modelTitleId" aria-hidden="true">
thats work for me

I solve my problem by passing the post id in data-target and also in midel in
<button type="button" class="btn btn-success " data-toggle="modal" data-target="#{{$post->id}}">Ajouter </button>
<div class="modal fade" id="{{$post->id}}" tabindex="-1" role="dialog" aria-labelledby="modelTitleId" aria-hidden="true">

Hidding Modal with jquery

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');

Open only one modal from different buttons

I am trying to get a report from my created tables. The thing is I have 3 different button to trigger 3 different modal right now. This approach works but I think it is unnecessary to create them seperately. I want only one modal with auto routed to related "Action". I think it will be solved with jquery but I can't seem to understand.
The buttons that triggers modals is below.
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a data-toggle="modal" data-target="#GeneralModal" class="dropdown-item" href="#">General Report </a>
<a data-toggle="modal" data-target="#VehicleModal" class="dropdown-item" href="#">Vehicle Report</a>
<a data-toggle="modal" data-target="#WarrantylModal" class="dropdown-item" href="#">Warranty Report</a>
</div>
My modals are below.
<div class="modal fade" id="GeneralModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<form action="/Export/ExportGeneral" role="form" method="post">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Excel Report</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="form-group m-form__group row m--margin-top-20">
<label class="col-form-label col-lg-3 col-sm-12">
Start Date
</label>
<div class="col-lg-9 col-md-9 col-sm-12">
<input type="text" class="form-control" id="datepicker" name="date1" data-date-format="dd-mm-yyyy" autocomplete="off" placeholder="Choose start date">
</div>
<label class="col-form-label col-lg-3 col-sm-12">
End Date
</label>
<div class="col-lg-9 col-md-9 col-sm-12">
<input type="text" class="form-control" id="datepicker2" name="date2" data-date-format="dd-mm-yyyy" autocomplete="off" placeholder="Choose end date">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Vazgeç</button>
<button type="submit" class="btn btn-primary">Get Report </button>
</div>
</div>
</div>
</form>
<div class="modal fade" id="WarrantyModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<form action="/Export/ExportWarranty" role="form" method="post">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Excel Report</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="form-group m-form__group row m--margin-top-20">
<label class="col-form-label col-lg-3 col-sm-12">
Start Date
</label>
<div class="col-lg-9 col-md-9 col-sm-12">
<input type="text" class="form-control" id="datepicker" name="date1" data-date-format="dd-mm-yyyy" autocomplete="off" placeholder="Choose start date">
</div>
<label class="col-form-label col-lg-3 col-sm-12">
End Date
</label>
<div class="col-lg-9 col-md-9 col-sm-12">
<input type="text" class="form-control" id="datepicker2" name="date2" data-date-format="dd-mm-yyyy" autocomplete="off" placeholder="Choose end date">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Vazgeç</button>
<button type="submit" class="btn btn-primary">Get Report </button>
</div>
</div>
</div>
</form>
<div class="modal fade" id="VehicleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<form action="/Export/ExportVehicle" role="form" method="post">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Excel Report</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="form-group m-form__group row m--margin-top-20">
<label class="col-form-label col-lg-3 col-sm-12">
Start Date
</label>
<div class="col-lg-9 col-md-9 col-sm-12">
<input type="text" class="form-control" id="datepicker" name="date1" data-date-format="dd-mm-yyyy" autocomplete="off" placeholder="Choose start date">
</div>
<label class="col-form-label col-lg-3 col-sm-12">
End Date
</label>
<div class="col-lg-9 col-md-9 col-sm-12">
<input type="text" class="form-control" id="datepicker2" name="date2" data-date-format="dd-mm-yyyy" autocomplete="off" placeholder="Choose end date">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Vazgeç</button>
<button type="submit" class="btn btn-primary">Get Report </button>
</div>
</div>
</div>
</form>
The only changing part is the modal's,
<form action="/Export/ExportGeneral" role="form" method="post">
Depending on the triggered modal it route to another action such as,
ExportGeneral
ExportWarranty
ExportVehicle
What I am asking is if there is a thing that help me to click the different buttons but open them in only one modal which's
<form action="/Export/ExportGeneral" role="form" method="post">
Change's automatically depending on, clicked button. (Maybe an id to buttons ?)
Thank you for your time!

In your anchor tag, you just need to replace your code with mine:
<a data-toggle="modal" data-target="#GeneralModal" id="general-export-button" data-url="/Export/ExportGeneral" class="dropdown-item" href="#">General Report </a>
<a data-toggle="modal" data-target="#GeneralModal" id="warranty-export-button" data-url="/Export/ExportWarranty" class="dropdown-item" href="#">Vehicle Report</a>
<a data-toggle="modal" data-target="#GeneralModal" id="vehicle-export-button" data-url="/Export/ExportVehicle" class="dropdown-item" href="#">Warranty Report</a>
Now on the bottom of your page, add this jQuery code and everything will work fine.
<script>
$("#general-export-button, #warranty-export-button, #vehicle-export-button").click(function (e) {
e.preventDefault();
var form = $("#multpurpose-form");
form.prop("action", $(this).data("url"));
});
Now I will explain what is happening in my code. All anchor tags are linked to a single modal. The action method of form in the linked modal is changing against "anchor tag data-url" through jQuery code.

change your html like
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a onclick="openModal('GeneralModal')" class="dropdown-item" href="#">General Report </a>
<a onclick="openModal('VehicleModal')" class="dropdown-item" href="#">Vehicle Report</a>
<a onclick="openModal('WarrantylModal')" class="dropdown-item" href="#">Warranty Report</a>
</div>
and give your form id so we can change thier attribute using javascript like
<form action="" id="modalForm" role="form" method="post">
then in script
function openModal(modalName){
if(modalName == 'GeneralModal'){
$("#modalForm").attr("action",'/Export/ExportGeneral');
$("#modalId").modal('show');
}
else if(modalName == 'VehicleModal'){
$("#modalForm").attr("action",'/Export/ExportVehicle');
$("#modalId").modal('show');
}
else if(modalName == 'WarrantylModal'){
$("#modalForm").attr("action",'/Export/ExportWarranty');
$("#modalId").modal('show');
}
}
i think it might solved your problem and optimized your code. :)

click event does not fire in vue.js

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?