send data from js function to a modal in the same file

send data from js function to a modal in the same file - javascript

I have 3 variables declared in a js function and i want to send them to my modal to display their data
js:
function consulter_salle(id)
{
$.ajax({
url : "<?php echo site_url('index.php/batiment/list_salle')?>/"+id,
type: "POST",
dataType: "JSON",
success: function(data)
{
var table_header = "<table>";
var table_footer = "</table>";
var html ="";
for (var row in data)
{
html += "<tr><td>"+ data.id+"</td><td>"+data.libelle +"</td></tr>";
}
$('#modal_list').modal('show'); // show bootstrap modal when complete loaded
$('.modal-title').text('Test');
},
error: function (jqXHR, textStatus, errorThrown)
{
alert('Error displaying data');
}
});
}
my modal :
<div class="modal fade" id="modal_list" role="dialog">
<div class="modal-dialog">
<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>
<h3 class="modal-title">Liste des salles</h3>
</div>
<div class="modal-body form">
<form action="#" id="form" class="form-horizontal">
<div class="form-body">
</form>
</div>
<div class="modal-footer">
<button type="button" id="btnSave" onclick="save()" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
</body>
</html>
the data is a list that i sent it by my controller,and it been verified that the data is recieved , but i can't find a way to send it to the modal.
I wonder what to write in the modal-body section!
Thank you .

Here is working example.
// Example result, JS Object
var result = {
id: 12,
title: 'My title',
content: '<div>My example content</div>'
}
// your ajax success method
function ajaxSuccess(result) {
var modal = $('#modal_list');
modal.modal('show');
modal.find('.modal-title').html(result.title);
modal.find('.modal-body').html(result.content);
}
ajaxSuccess(result);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="modal fade" id="modal_list" role="dialog">
<div class="modal-dialog">
<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>
<h3 class="modal-title">Liste des salles</h3>
</div>
<div class="modal-body form">
<form action="#" id="form" class="form-horizontal">
<div class="form-body">
</form>
</div>
<div class="modal-footer">
<button type="button" id="btnSave" onclick="save()" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>

Related

Sweet Alert inside Bootstrap Modal

I have a javascript function to call sweetalert based on the userinput but sweet alert is not working inside bootstrap model.
can anyone help me out
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<input type="text" id="input1" onblur="alerts()">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
JavaScript:
function alerts()
{
var inputs = document.getElementById("input1").value;
if(inputs < 2)
{
swal('Not Valid', 'Enter another','warning');
}
}

just needed to reorder your function slightly
http://jsfiddle.net/link2twenty/oj5cfp6j/
alerts = function () {
var inputs = document.getElementById("input1").value;
if (inputs < 2) {
swal('Not Valid', 'Enter another', 'warning');
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<input type="text" id="input1" onblur="alerts()">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

I'm not big fan of JavaScript so can't sure why it's not working with blur(), but you can do it with jQuery keyup function
$(document).ready(function () {
$('#input1').keyup(function () {
var inputs = $(this).val();
if (inputs < 2) {
swal('Not Valid', 'Enter another', 'warning');
}
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">Open Modal</button>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<input type="text" id="input1" class="form-control">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

BootStrap modal doesn't want to be closed

I’m using BootStrap
I open a modal(the modal is inside a file).
<div id="buy-function" class="modal fade" role="dialog">
<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="gridSystemModalLabel">Achat </h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<form class="operation" role="form" method="post" >
<div class="form-group">
<label for="quantite" class="col-sm-3 control-label">Quantitée : </label>
<div class="col-sm-9">
<input type="number" class="form-control" id="buy_live_quantite" name="quantite" value="10" >
</div>
</div>
<div class="form-group">
<label for="justif" class="col-sm-3 control-label">Justification : </label>
<div class="col-sm-9">
<textarea rows="3" class="form-control" id="justif" name="justif"></textarea>
</div>
</div>
</form>
</div>
</div>
</div>
<!--<div class="modal-footer"></div>
<div id="live_invoice"></div>-->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
<button type="button" id="new_operation" class="btn btn-info">Acheter</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
I open a modal with a button.
<div class="box-body">
<button type="button" class="btn btn-block btn-info btn-lg" data-toggle="modal" data-target="#buy-function">Acheter</button>
<button type="button" class="btn btn-block btn-warning btn-lg" data-toggle="modal" data-target="#sell-function">Vendre</button>
</div>
However, when I want to close this modal
(I use
$('#buy-function').modal('hide'); ),
my script :
<script>
$(document).ready(function () {
$("button#new_operation").click(function(){
$.ajax({
type: "POST",
url: "/views/composants/new_operation.php", //process
data: $('form.operation').serialize(),
success: function(msg){
//alert(msg);
$('#buy-function').modal('hide'); //hide popup
},
error: function(){
alert("failure");
}
});
});
});
</script>
it doesn’t work. Any idea ?

Check that you are not including jQuery more than once. Bootstrap will apply it to the first instance only and when jQuery gets initiated again then it will be lost.

Parameter from button to modal and then call Spring controller

I'm enough new with html/javascript so I would need an advice. I have to call modal from button and in this modal I would like to see a table obtained from database.
So my idea is to call modal through button so:
<tbody>
<tr th:each="fleet : ${fleets}">
<td th:text="${fleet.application}"></td>
<td th:text="${fleet.cubic}"></td>
<td th:text="${fleet.power}"></td>
<td th:text="${fleet.euroClass}"></td>
<td th:text="${fleet.engineType}"></td>
<td th:text="${fleet.traction}"></td>
<td th:text="${fleet.transmission}"></td>
<td><button data-id="showCarsButton" type="button"
class="btn btn-primary" data-toggle="modal"
data-target="#modalShowCar">Show cars</button></td>
<td><button id="addCarButton" type="button"
class="btn btn-primary">Add car</button></td>
</tr>
temporary modal:
<div class="modal fade" id="modalShowCar" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Fleet cars</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">Close</button>
</div>
</div>
</div>
temporary js:
$(document).ready(function(){
$('#modalShowCar').on('show.bs.modal', function (e) {
var idFleet = $(e.relatedTarget).data('id');
$.ajax({
type : "GET",
url : "cars/"+ idFleet,
contentType : 'application/json',
success : function(data) {
if (data.status==200){
//I have to pass to modal the data.body
} else {
//show error
}
},
error : function(data) {
window.location.href = "/500"; //Redirect to page 500
}
});
});
});
and then from modal call the Spring controller with data-url into table tag.
I need to pass parameter (id) to perform the query, so from the button to the url into modal, how can I do it? Is this the best way?
thanks,regards

There are many ways to achieve what you are trying, with your appraoch, you can use bootstrap modal event and pass the id to modal
change id="showCarsButton" to data-id="showCarsButton"
<button data-id="showCarsButton" type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalShowCar">Show cars</button></td>
JS
$('#modalShowCar').on('show.bs.modal', function (e) {
var carid = $(e.relatedTarget).data('id');
// Do Whatever you like to do,
});
Example Code
$(document).ready(function(){
$('#modalShowCar').on('show.bs.modal', function (e) {
var carid = $(e.relatedTarget).data('id');
alert(carid);
$(".modal-body").html(carid);
// Do Whatever you like to do,
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#modalShowCar" data-id="showCarsButton">Open Modal</button>
<div id="modalShowCar" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

jQuery popup box is not getting displayed

I am trying to display a popup box from a div. My code is below.
Upon successful addition on record the div needs to be shown but its not working. I have tried $("#div").html.
Script:
<script src="scripts/jquery-1.11.1.min.js "></script>
<script>
$(document).ready(function() {
$('#users').submit(function() {
$('#response').html("<b>Adding...</b>");
$.post('controller_adduser.php', $(this).serialize(), function(data) {
$('#response').html("<b>Adding...</b>");
//// Show div Message box
}).fail(function() {
alert( "Posting failed." );
});
return false;
});
});
</script>
DIV:
<div id="remote_modal" class="modal fade" tabindex="-1" role="dialog">
<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"><i class="icon-accessibility"></i> Loading remote path</h4>
</div>
<div class="modal-body with-padding">
<p>Added!!</p>
</div>
<div class="modal-footer">
<button class="btn btn-warning" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
POPUP MSG BOX

I see that youre using bootstrap. In order for the modal to show you need to run the .modal("show") command. I would try this:
HTML:
<div id="remote_modal" class="modal fade" tabindex="-1" role="dialog">
<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">
<i class="icon-accessibility"></i>
<span id="response">Loading remote path</span>
</h4>
</div>
<div class="modal-body with-padding">
<p>Added!!</p>
</div>
<div class="modal-footer">
<button class="btn btn-warning" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
JS:
<script src="scripts/jquery-1.11.1.min.js "></script>
<script>
$(document).ready(function() {
$('#users').submit(function() {
$.post('controller_adduser.php', $(this).serialize(), function(data) {
$('#remote_modal #response').html("<b>Adding...</b>");
$('#remote_modal').modal("show");
}).fail(function() {
alert( "Posting failed." );
});
return false;
});
});
</script>

client side events for html textbox and html button is not triggered on bootstrap modal

I have called textbox onchange event and button click event. the textbox and htmlbutton in bootstrap Modal body. these events are not triggered.
<script type="text/javascript">
$(document).ready(function () {
$('#mybutton').on('click', function (evt) {
alert("htmlbutton clik");
});
$("#input1").change(function () {
alert("htmltext changed");
});
});
</script>
<div class="modal fade">
<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">Modal title</h4>
</div>
<div class="modal-body">
<input type="button" id="mybutton" value="htmlbutton" />
<input type="text" id="input1" value="htmltext" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>

Your Code looks fine. Not sure if you included Jquery here is the complete code
<html>
<script src="http://code.jquery.com/jquery-1.11.0.min.js" ></script>
<script type="text/javascript">
$(document).ready(function () {
$('#mybutton').on('click', function (evt) {
alert("htmlbutton clik");
});
});
</script>
<div class="modal fade">
<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">Modal title</h4>
</div>
<div class="modal-body">
<input type="button" id="mybutton" value="htmlbutton" />
<input type="text" id="input1" value="htmltext" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
<script>
$("#input1").on('change',function () {
alert("htmltext changed");
});
$("#input1").on('keypress',function () {
alert("htmltext changed");
});
</script>
</html>
Did the key press part seperatly for better understanding of the code.

Develop Reference

JavaScript is the programming language of the Web.

send data from js function to a modal in the same file - javascript

Related

Sweet Alert inside Bootstrap Modal

BootStrap modal doesn't want to be closed

Parameter from button to modal and then call Spring controller

jQuery popup box is not getting displayed

client side events for html textbox and html button is not triggered on bootstrap modal

Categories

Resources