After a button is selected on a fresh page, all information are there, but whenever another is clicked, the first info is still there and wont change until the page is refreshed.
Help me pass this will ya?
button
<?php while($b = mysqli_fetch_assoc($equery)): ?>
<button type="button" onclick="modal(<?=$b['id'];?>)" class="w3-btn w3-border" style="width: 260px; display: inline-block; margin: 9px">
<img src="">
<h3><?php echo $b['product'];?></h3>
<h5>Descritopm</h5>
<h6></h6>
</button>
<?php endwhile;?>
js:
function modal(id){
var data = {"id" : id};
jQuery.ajax({
url : <?=BASEURL;?>+'includes/modal.php',
method : "post",
data : data,
success: function(data){
jQuery('body').append(data);
jQuery('#mod').modal('show');
},
error: function(){
alert("IDK")
}
});
}
modal:
<?php
require_once '../core/init.php';
$id = $_POST['id'];
$id =(int)$id;
$sql = "SELECT * FROM aisle WHERE id = '$id'";
$result = $db->query($sql);
$product = mysqli_fetch_assoc($result);
?>
<!-- Modal -->
<?php ob_start();?>
<div id="mod" class="modal fade" role="dialog" tabindex="-1">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="modal-title w3-center"><?=$product['product'];?></h3>
</div>
<div class="modal-body">
<p><?=$product['aisle'];?></p>
<p>$<?=$product['price'];?></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<?php echo ob_get_clean();?>
The problem is here
jQuery('body').append(data);
This line will append more modal and many modals will appear on your page. You should follow this way. Create a div tag called contents_from_ajax inside body tag and then use this.
jQuery('#contents_from_ajax').html(data);
This code will remove all old modals and create a new one instead of append, and then it will work fine.
Hope this help
Related
i have a php app with 3 table, each one have multiple row with button for each row to get a form for the affected data
the idea is to give a value for the modal to have as much column as in the affected table.
until now, i tried to have one form with button fo each table, with different value, and testing it in php to use the correct table for for the column as below in the code (it's a test webpage so there is just one button, i'm just trying to open a modal manually after testing a php value ) :
<body>
<form action="" method="post">
<button type="submit" class="btn btn-primary" data-bs-toggle="modal" data-bs-
target="#CreateInfra" name="der">
Launch demo modal
</button>
</form>
<script>
function modal(){
$("#myModal").modal('show');
}
</script>
<div class="bs-example">
<!-- Modal HTML -->
<div id="myModal" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal Title</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<p>This is a simple Bootstrap modal. Click the "Cancel button", "cross icon" or
"dark gray area" to close or hide the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data
dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
</div>
<?php
if (isset($_POST['der'])){
$value = 1;
var_dump($value);
}
else{
$value=2;
var_dump($value);
}
if ($value == 1){
echo "<script>modal()</script>";
}
?>
</body>
the thing is , when i hit the button, i see my page loading something for maybe 0.4 second but nothing happen.
is there any way to do this or i should use something else ?
You can do something like this as long as you want it to decide on the page load
<script>
function modal(val){
let options = [];
var myModal = new bootstrap.Modal(document.getElementById('exampleModal'))
if (val == 0){
myModal.show()
}
}
</script>
<?php $val = 0; ?>
<?php echo "<script>modal(".$val.")</script>" ?>
Other than that you would have to do it through a fetch request or AJAX because php and JS can't directly talk to each other
I've been trying to create a confirm delete popup in a modal via bootstrap. I was initially having issues with posting via plain php, but now I don't know whether my AJAX code is working or not. If I create an alert on error and success, both of them alert.
Here is the following code:
Modal:
<div id="delete_data_Modal" 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">Delete Member</h4>
</div>
<div class="modal-body">
<form method="post" id="deleteMember">
<input type="hidden" value="<?php echo $deleteMemberID ?>">
<p>Are you sure you want to delete this member?</p>
<button class="btn btn-danger"
id="deleteConfirm">Delete
</button>
</form>
</div>
</div>
</div>
</div>
PHP code when confirm delete is clicked:
<?php
if (isset($_POST['deleteConfirm'])) {
$deleteMemberID = $_POST['MemberID'];
$sql = "DELETE FROM tbl_Members WHERE tbl_Members.MemberID = %{$deleteMemberID}";
$update = mysqli_query($DB, $sql);
echo "<script>alert('DELETED')</script>";
}
?>
and finally, my AJAX code.
<script>
$(document).ready(function () {
$('#deleteMember').submit(function (e) {
e.preventDefault();
$.ajax({
type: "POST",
data: $(this).serialize(),
success: alert("yay"),
});
});
});
</script>
I'm relatively new to PHP, and extremely new to AJAX (Have never used it before this), so I don't know how obvious the issue could be. Any comments would be appreciated. TIA.
i have create a bootstrap modal but i need the content to be dynamic. Each time i select a different table row, the content of that row should popup. The content inside bootstrap modal is a dynamic table. Is possible to show a simple sample of how by selecting from the row of a table, i can get a dynamic table in the popup modal. Please help. Thanks
while($row = $results->fetch_assoc()): ?>
<tr>
<td class="list-answer"
data-toggle="modal"
href="#content-confirmation">
<?= $row["name"]; ?>
</td>
</tr>
<?php endwhile ?>
<div class="control-popup modal fade" id="content-confirmation"
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">Are you sure you wanna do
that?</h4>
</div>
<div class="modal-body">
load dynamic table content.......
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary"
data-dismiss="modal">Save</button>
</div>
</div>
</div>
Are you trying to give your table column a link with href ? because it would not work like that.
To your question, there are multiple ways of doing this. I would give the table's row an id and handle the row click or column click event in js code. after that i would get that rows content either with an ajax request or directly from the table's columns.
So your code would look like:
while($row = $results->fetch_assoc()): ?>
<tr data-id="<?= $row["id"]; ?>">
<td class="list-answer">
<?= $row["name"]; ?>
</td>
</tr>
your javascript code:
$(function(){
$(".list-answer").click(function() {
var row_id = $(this).parents('tr').attr('data-id');
get_data(row_id);
$('#my-modal').modal();
});
});
function get_data(row_id) {
//either get data with ajax request or row
//fill modals content with $('#input-field-id').val('vlaue') or .html()
}
$.ajax({
url : 'url',
method : 'post',
data: {
},
success : function(response)
{
$('#my-modal').html(response);
// put your html response in the popup div
$('#my-modal').modal();
}
});
<div id="my-modal"></div>
I don't know if i understand well, but i think you need something like me :
$("table").on('click', 'tr', function() {
var json_data = {
"controller": "NameOfController",
"action": "action",
"contentofRow": $(this).text()
};
$.post('ajax_handler.php', json_data, function (res) {
if (res.indexOf('ERREUR') != -1) {
alert(res);
return false;
}
else {
$('#mymodalID').modal();
$("#myModalLabel").html("Content of the row : " + res[0]);
$.each(res[1], function (index, valeur) {
$("#bodySupp").append($('<tr>')
.css("text-align", "center")
.css("fontSize", "12px")
.append($('<th>')
.html(valeur['indexOfValue'])
)
.append($('<th>')
.html(index)
)
.append($('<th>')
.html(valeur['indexOfValue2'])
)
.append($('<th>')
.html(valeur['indexOfValue3'])
)
)
});
}
}, 'json');
});
$("table").on('click', 'tr', function()
You open the modal on the click on the row of the table,
"contentofRow": $(this).text()
You take the content of the current row, this is what you will display :)
And then you have the controller :
class NameOfController implements AjaxControler {
public function execute($data)
{
switch($data['action']){
default :
$contentRow= $data['yourcontent'];
$res = array();
$res[] = $contentRow
return json_encode($res);
}
}
}
You can do that in OctoberCMS backend. I'll give you a quick example.
I put that in a controller _list_toolbar.htm
<button
href="javascript:;"
data-control="popup"
data-size="large"
disabled="disabled"
data-trigger-action="enable"
data-trigger=".control-list input[type=checkbox]"
data-trigger-condition="checked"
onClick="$(this).popup({ handler: 'onAssignTechnical', extraData: { checked: $('.control-list').listWidget('getChecked') } })"
href="javascript:;"
class="btn btn-default oc-icon-plus">
<?= e(trans('lilessam.maintenancesystem::lang.work_orders.assigntechnical_button')) ?>
</button>
And in the onAssignTechnical() in the controller I'll make a bootstrap modal.
public function onAssignTechnical() {
/** Check if this is even set **/
if (($checkedIds = post('checked')) && is_array($checkedIds) && count($checkedIds)) {
foreach($checkedIds as $workorder_checked_id) {
$check_work_order = \Lilessam\Maintenancesystem\Models\WorkOrder::where(['id' => $workorder_checked_id, 'assigned_to_id' => null])->count();
}
/** Check if there's more than one record checked */
if(count($checkedIds) == 1 && $check_work_order != 0):
/**Labels **/
$modal_title = Lang::get('lilessam.maintenancesystem::lang.assign_technical_title');
$assign_label = Lang::get('lilessam.maintenancesystem::lang.assign_label');
$name_label = Lang::get('lilessam.maintenancesystem::lang.assign_modal_name_label');
$action_label = Lang::get('lilessam.maintenancesystem::lang.assign_modal_action_label');
/** Getting all workers IDS by their group id 2 **/
$allWorkers_ids = DB::table('backend_users_groups')->where('user_group_id', 2)->get();
/** Workers Array **/
$workers_array = [];
// Looping to get all workers
foreach($allWorkers_ids as $worker_id) {
//Fetching the user
$worker = User::find($worker_id->user_id);
//Pushing the worker to workers' array
array_push($workers_array, [
'login' => $worker->login,
'first_name' => $worker->first_name,
'last_name' => $worker->last_name,
'id' => $worker->id,
]);
}
#setting the table header
$workers_code = '<div class="control-list list-unresponsive">
<table class="table data" data-control="rowlink">
<thead>
<tr>
<th>'.$name_label.'</th>
<th style="width: 150px"><span>'.$action_label.'</span></th>
</tr>
</thead>
<tbody>';
#Adding workers to the table
foreach($workers_array as $worker_row) {
foreach($checkedIds as $workorder_id):
$workers_code .= '<tr>
<td>
<a href="javascript:;">
'.$worker_row['first_name']." ".$worker_row['last_name'].'
</a>
</td>
<td>
<form method="post" data-request="onAssignNow">
<input type="hidden" name="workorder_id" value="'.$workorder_id.'">
<input type="hidden" name="id" value="'.$worker_row['id'].'">
<button type="submit" class="btn btn-info">'.$assign_label.'</button>
</form>
</td>
</tr>';
endforeach;
}
#Adding Table Fotter
$workers_code .= "</tbody>
</table>
</div>";
#Returning all modal
return '
<div class="control-popup modal fade in" id="content-confirmation" tabindex="-1" role="dialog" aria-hidden="false" style="display: block;">
<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">
<div class="form-group textarea-field span-full" data-field-name="idea" id="Form-field-Idea-idea-groupc" style="height: 395px;
overflow-x: hidden;
margin-bottom: 20px;
overflow-y: scroll;">
<div class="qa-message-list" id="wallmessages">
'.$workers_code.'
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">X</button>
</div>
</div>
</div>
</div>
';
else:
/** Labels **/
$warning_title = Lang::get('lilessam.maintenancesystem::lang.assign_technical_warning_title');
$warning_body = Lang::get('lilessam.maintenancesystem::lang.assign_technical_warning');
#Returning all modal
return '
<div class="control-popup modal fade in" id="content-confirmation" tabindex="-1" role="dialog" aria-hidden="false" style="display: block;">
<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">'.$warning_title.'</h4>
</div>
<div class="modal-body">
<div class="form-group textarea-field span-full" data-field-name="idea" id="Form-field-Idea-idea-groupc" style="height: 395px;
overflow-x: hidden;
margin-bottom: 20px;
overflow-y: scroll;">
<div class="qa-message-list" id="wallmessages">
'.$warning_body.'
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">✖</button>
</div>
</div>
</div>
</div>
';
endif;
}
}
Excuse me for the long code but I'm sure It will help you.
I have this code for showing dynamic data in a bootstrap modal box using $.ajax and json.
JS:
$(function() {
$('.push').click(function() {
var id = $(this).attr('id');
$.ajax({
type: 'post',
url: '<?PHP echo SITE;?>controller/booksdetails.php', // in here you should put your query
dataType: "json",
data = {
'bookid': id,
'csrf_token': <?php echo $token; ?>
},
success: function(r) {
// now you can show output in your modal
$('#bookdetails').modal({
backdrop: 'static',
keyboard: false
}) // put your modal id
$('.something').show().html(r);
}
});
});
});
HTML:
show details
<div id="bookdetails" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
<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">title</h4>
</div>
<div class="modal-body text-justify">
<div class="something" style="display:none;">
</div>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-primary btn-sm"> close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
But in reality when I click on the link, the modal and data are not shown! How can I fix the problem and show a value in my modal?
DEMO
You have several typo mistakes:
'csrf_token': <?php echo $token; ?>
Should be:
'csrf_token': '<?php echo $token; ?>'
String must be quoted.
Also:
data = {
'bookid': id,
'csrf_token': <?php echo $token; ?>
},
Should be:
data: {
'bookid': id,
'csrf_token': <?php echo $token; ?>
},
Property assignment of an object is performed with : not with = operator.
I have mocked your ajax reuqest and fixed typos mentioned above. Your code works fine:
http://jsfiddle.net/kwv3h8jv/2/
I want to create modal button for delete a user gets from a foreach in the html body.
The modal opens an iframe with a form. The iframe url seems like
<iframe src=<?php echo base_url('index/page/');?> witdth....
I want to pass to the iframe src the php variable contains an userid, for example:
<iframe src=<?php echo base_url('/index/page/'+username);?> witdth....
First code works fine and it shows the view but no variable passed with the second code.
I use a javascript for open the modal and get the ID variable.
The link:
<a data-toggle="modal" data-target="#myModal" data-detail-id=<?php echo $users->username; ?>>
And the js:
<script>
$(".myModal").on("click", function(e) {
var username;
e.preventDefault();
username = $(this).data("detail-id");
});
</script>
How to get the detailId to the iframe src to pass the variable to the index/page?
Thanks a lot.
EDIT---
I will post full code, the ovjective is to pass a PHP variable got in a foreach to a modal windows in that calls a iframce to other view to use the variable:
<a data-toggle="modal" data-target="#myModal" data-detail-id=<?php echo $users->username; ?>></a>
<!-- Modal -->
<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">
<script>
$(".myModal").on("click", function(e) {
var username;
e.preventDefault();
username= $(this).data("detail-id");
});
</script>
<center><iframe src=<?php echo base_url('/index/page/'+username);?> width="500" height="380" frameborder="0" allowtransparency="true"></iframe></center>
</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>
</div>
</div>
Thanks!!
You are mixing JS and PHP together:
<iframe src=<?php echo base_url('/index/page/'+username);?> width.... ( note the + )
<iframe src=<?php echo base_url('/index/page/'.$username);?> width.... ( append with . operator )
In PHP, you append with . operator
Also if you are looking for easy solution to delete smoething (ex. user) you can use something like this in your view:
<script>
function doconfirm()
{
job=confirm("Are you sure, to delete?");
if(job!=true)
{
return false;
}
}
</script>
<?php foreach ($users as $user_detail): ?>
Delete user<br>
<?php endforeach ?>
and from your user model try somethig like:
public function delete($user_id)
{
$query = $this->db->where('user_id', $user_id);
return $query = $this->db->delete('users');
}
Hope this helps.