Edit function using modal dialog (JQuery) - javascript

I have the following code in my application/view/userlist.php
<script type="text/javascript">
$(document).ready(function(){
$('.edit-row').live('click',function(){
var me = $(this);
var editModal = $('#myModalEdit');
editModal.find('#userFullName').val(me.attr('data-userFullName'));
editModal.find('#userID').val(me.attr('data-userID'));
editModal.find('#userName').val(me.attr('data-userName'));
editModal.find('#userPass').val(me.attr('data-userPass'));
editModal.find('#userEmail').val(me.attr('data-userEmail'));
$('#myModalEdit').modal('show');
});
});
</script>
<div class="modal fade" id="myModalEdit" 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">Edit System User <label id="userFullName"></label></h4>
</div>
<form role="form" id="userForm" action="<?php echo base_url().'admin/updateUser'; ?>" method= "POST">
<!-- #myModalEdit codes here-->
</form>
<!-- some html codes -->
<a class="edit-row" href="javascript:"
data-userID="<?php echo $row->userID; ?>"
data-userFullName="<?php echo $row->userFullName; ?>"
data-userName="<?php echo $row->userName; ?>"
data-userEmail="<?php echo $row->userEmail; ?>"
data-userPass="<?php echo $row->userPass; ?>"
>
<button type="button" data-hover="tooltip" title="Edit User <?php echo $row->userName; ?>" class="btn btn-default">
<i class="fa fa-pencil"></i>
</button>
</a>
I got error
Uncaught TypeError: $(...).live is not a function
What does it mean?

User .on() instead of .live()
try
$(parentDiv).live('click', '.edit-row', function(){
// write you code here
});

Related

How to use click event on bootstrap modal

I generate many bootstrap modals with a php script, and I'd like to edit some input of it when I click button "save changes".
ModalIDs generated are something like "ModalID0000".
But nothing happens with my script when i click on "save changes".
<input role="button" data-target="#modalID<?php echo $post->Clone;?>" />
<!-- Modal -->
<div class="modal fade" id="modalID<?php echo $post->Clone;?>" tabindex="-1" role="dialog" aria-labelledby="Identifiants" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Identifiants de connexion</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- mdp et user récupérés dans le champ commentaire, sinon standard -->
<?php if ($flagLogin == true){ ?>
<input type="text" value="<?php echo $user; ?>"/>
<input type="password" value="<?php echo $pwd; ?>"/>
<?php } else { ?>
<input class="user_login" type="text" value="user"/>
<input class="user_password" type="password" value="xxxxxxxxx"/>
<?php } ?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-blue-grey z-depth-0" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-warning z-depth-0 save" >Save changes</button>
</div>
</div>
</div>
</div>
$("modal.save").click(function(){
alert('save');
//edit user_login and user_password values here
});
EDIT :
1st mistake found with modal element selector instead of class, but still no alert
$(".modal.save").click(function(){
alert('save');
});
Save button is the child element of .modal selector.
So $("modal.save") should be replaced to $(".modal .save").
Or that button belongs to .modal-footer so you can put as follows.
$(".modal-footer .save")
$(".modal .save").click(function () {
alert('save');
//edit user_login and user_password values here
});
<input role="button" data-target="#modalID<?php echo $post->Clone;?>" />
<!-- Modal -->
<div class="modal fade" id="modalID<?php echo $post->Clone;?>" tabindex="-1" role="dialog"
aria-labelledby="Identifiants" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Identifiants de connexion</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- mdp et user récupérés dans le champ commentaire, sinon standard -->
<?php if ($flagLogin == true){ ?>
<input type="text" value="<?php echo $user; ?>" />
<input type="password" value="<?php echo $pwd; ?>" />
<?php } else { ?>
<input class="user_login" type="text" value="user" />
<input class="user_password" type="password" value="xxxxxxxxx" />
<?php } ?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-blue-grey z-depth-0" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-warning z-depth-0 save">Save changes</button>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Form action in model window not working in PHP

I tried to create a form in a model window. But the form action doesn't work. This is my code so far.
HTML Code
<form action="functions/userManagement.php?id="<?php echo $id ?> name='searchdata' id="comment_box" method="get">
<div style="display: none;" aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button aria-hidden="true" data-dismiss="modal" class="close" type="button">x</button>
<h4 id="myModalLabel" class="modal-title">Put the Reason for Deactivate</h4>
</div>
<div class="modal-body">
<textarea rows="4" cols="70" name="comment" form="usrform"></textarea>
</div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-default" type="button">Close</button>
<button onclick="form_submit()" class="btn btn-primary" name="add" value="Proceed">Proceed</button>
</div>
</div>
</div>
</div>
</form>
Java Script code
<script type="text/javascript">
function form_submit() {
document.getElementById("comment_box").submit();
}
</script>
Can anyone help me to fix this.
1st : Your action attribute Get parameter value should be inside the double quotes .
action="functions/userManagement.php?id="<?php echo $id ?>
To
action="functions/userManagement.php?id=<?php echo $id ?>"
2nd : Simple change button type to submit
<button type="submit" class="btn btn-primary" name="add" value="Proceed">Proceed</button>
3rd : Your form should be inside the modal .
<div style="display: none;" aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<form action="functions/userManagement.php?id="<?php echo $id ?> name='searchdata' id="comment_box" method="get">
<div class="modal-header">
<button aria-hidden="true" data-dismiss="modal" class="close" type="button">x</button>
<h4 id="myModalLabel" class="modal-title">Put the Reason for Deactivate</h4>
</div>
<div class="modal-body">
<textarea rows="4" cols="70" name="comment" form="usrform"></textarea>
</div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-default" type="button">Close</button>
<button onclick="form_submit()" class="btn btn-primary" name="add" value="Proceed">Proceed</button>
</div>
</form>
</div>
</div>
</div>
Note : simple your submiting the form . so you can submit the form easily by button type="submit" .
Use this one
onclick="javascript:form_submit()"
Use this one
action="<?php echo htmlentities('functions/userManagement.php?id= echo $id');?>"
Hope it is helpful for you.

Show data based of selected id on modal popup window after click a button php mysql

On my website, when the button is clicked, it will prompt to a popup window. Im using the modal popup window. My problem is, I cant get the right data that being retrieved based on the id of the button. Below is my code:
The html table:
<tbody>
<?php
$counter = 1;
$data = "SELECT * FROM family";
$result = $conn->query($data);
while($ser=mysqli_fetch_array($result))
{
?>
<tr>
<td><center><?php echo $counter;
$counter++; ?></center></td>
<td><center><?php echo $ser['fam_id'];?></center></td>
<td><center><?php echo $ser['fam_name']; ?></center></td>
<td><center><button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal" data-id=<?php echo $ser['fam_id'];?>>Edit Attendance Status</button></center>
The fam_id is the primary key.
Then, below is the code for modal popup window
<!-- Modal -->
<form id="form1" method="post">
<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="fam_id">Name <?php echo $ser['fam_name'];?></h4>
</div>
<div class="modal-body">
<b>Details</b>
<hr></hr>
Address: <?php echo $ser['fam_add']; ?><p></p>
Phone_num: <?php echo $ser['fam_phone']; ?><p></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</form>
Moreover, Im doing them in one file. In conclusion, it is like below:
<tbody>
<?php
$counter = 1;
$data = "SELECT * FROM family";
$result = $conn->query($data);
while($ser=mysqli_fetch_array($result))
{
?>
<tr>
<td><center><?php echo $counter;
$counter++; ?></center></td>
<td><center><?php echo $ser['fam_id'];?></center></td>
<td><center><?php echo $ser['fam_name']; ?></center></td>
<td><center><button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal" data-id=<?php echo $ser['fam_id'];?>>Edit Attendance Status</button></center>
<!-- Modal -->
<form id="form1" method="post">
<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="fam_id">Name <?php echo $ser['fam_name'];?></h4>
</div>
<div class="modal-body">
<b>Details</b>
<hr></hr>
Address: <?php echo $ser['fam_add']; ?><p></p>
Phone_num: <?php echo $ser['fam_phone']; ?><p></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</form>
</td>
</tr>
<?php
}
?>
</tbody>
<tbody>
<?php
$counter = 1;
$data = "SELECT * FROM family";
$result = $conn->query($data);
while($ser=mysqli_fetch_array($result))
{
?>
<tr>
<td><center><?php echo $counter; $counter++; ?></center></td>
<td><center><?php echo $ser['fam_id'];?></center></td>
<td><center><?php echo $ser['fam_name']; ?></center></td>
<td>
<center>
<a class="modalLink" href="#myModal" data-toggle="modal" data-target="#myModal" data-id="<?php echo $ser["fam_id"]; ?>" data-addr="<?php echo $ser['fam_add']; ?>" data-phone="<?php echo $ser['fam_phone']; ?>" data-name="<?php echo $ser['fam_name']; ?>">
<button class="btn btn-primary btn-sm">
Edit Attendance Status
</button>
</a>
</center>
Place this code in footer.php or end of this page.
<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>
</div>
</div>
Call your 'somepage.php' (Separate page.Where modal-body is present) through ajax. Place this <script></script> in your JS file.
<script>
$('.modalLink').click(function(){
var famID=$(this).attr('data-id');
var famAddr=$(this).attr('data-addr');
var famPhone=$(this).attr('data-phone');
var famName=$(this).attr('data-name');
$.ajax({url:"somepage.php?famID="+famID+"&famAddr="+famAddr+"&famPhone="+famPhone+"&famName="+famName,cache:false,success:function(result){
$(".modal-content").html(result);
}});
});
</script>
somepage.php
Create somepage.php (If you want to change this page name. Change in <script></script> too. Both are related.)
<?
$famID=$_GET['famID'];
$famAddr=$_GET['famAddr'];
$famPhone=$_GET['famPhone'];
$famName=$_GET['famName'];
?>
<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="fam_id">Name <?php echo $famName;?></h4>
</div>
<div class="modal-body">
<form id="form1" method="post">
<b>Details</b>
<hr></hr>
Address: <p><?php echo $famAddr;?></p>
Phone_num: <p><?php echo $famPhone;?></p>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>

Bootstrap modal and passing value

When I click edit, 'id' should pass to own page and modal should pop up. But it doesn't work. Please help me
PHP and Bootstrap
<tr>
<td><?php echo $row['name']; ?></td>
<td><a data-toggle="modal" data-target="#myModal" href='?id=<?php echo $row['id']; ?>'>Edit</a> </td>
</tr>
Modal
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
------
-----
-----
</div>
</div>
Create a class Edit in <a></a> tag. Use this class to call modal. And, add data-Id="<?echo $row['id'];?>"
<tr>
<td><?php echo $row['name']; ?></td>
<td>
<a class='Edit' data-toggle="modal" href="#form_modal" data-target="#myModal" data-Id="<?php echo $row['id'];?>">Edit</a>
</td>
</tr>
Place this code in footer
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
</div>
</div>
</div>
JS
<script>
$('.Edit').click(function(){
var Id=$(this).attr('data-Id');
$.ajax({url:"SomePage.php?Id="+Id,cache:false,success:function(result){
$(".modal-content").html(result);
}});
});
</script>
Create somepage.php (If you want to change this page name. Change in <script></script> too. Both are related.)
SomePage.php
<?php
$Id=$_GET['Id'];
?>
<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="fam_id"></h4>
</div>
<div class="modal-body">
<?php echo $Id;?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
For more info, click Show data based of selected id on modal popup

twitter bootstrap modal works with js only once

Implemented in PHP using Codeigniter, I am using Twitter Bootstrap Modal for my project. The goal is that when I click the modal, an entry form for the name will appear. Fortunately, the modal gets the data I need (i.e. the name of the community). However, when I load the modals one by one, it is only in the first modal that my code here works:
Here are my codes inside my view page together with the codes linked above:
//..code here
<?php foreach ($name_list as $list) { ?>
modal trigger
<img class="pointer" title="Edit" src="pic.png" data-toggle="modal" data-target="<?php echo "#" . $list->name?>"/> <?php echo $list->name?>
modal
<div class="modal fade bs-example-modal-sm" id="<?php echo $list->name ?>" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<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">Edit <?php echo $list->name?></h4>
</div>
<form action="<?php echo base_url();?>edit" method="post">
<div class="modal-body">
<b><p id="warning"></p></b>
<input name="edit-name" id="edit-name" type="text" placeholder="Name" value="<?php echo $list->name?>"/>
<input name="edit-id" type="text" value="<?php echo $list->id?>" class="hidden"/>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<input type="submit" id="edit-btn" disabled="true" class="btn btn-primary" value="Save changes" />
</div>
</form>
</div>
</div>
</div>
What is wrong with my code? Why does my JS code work only once?

Categories