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?
Related
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>
I create form, the popup window (in the same file with the form) and the script that creates the post request when the user clicks the button, but when I click the button the page relaoded automatically and the popup window never appears
*I want to pass a parameter from the form to popup window in order to identify the product that the user selected.
My code is below:
*The form is inside of a loop in order to create many items
index.php
while($row = mysqli_fetch_assoc($select_all_products)) {
$product_id = $row['id'];
$product_name = $row['name'];
$product_price1 = $row['price1'];
$product_price2 = $row['price2'];
$product_price3 = $row['price3'];
$product_image= $row['photo'];
?>
<div class="col-lg-6 col-md-6 item-entry mb-4">
<form method="post" >
<a href="#" class="product-item md-height bg-gray d-block">
<?php echo "<img width='300px' height='300px' src='images/$product_image' alt='Image' class='img-fluid'>"; ?>
</a>
<h2 class="item-title"><?php echo $product_name; ?></h2>
<input id="id" type="hidden" name="id" value="<?php echo $product_id; ?>">
<label>shop1: </label>
<strong class="item-price"><?php echo $product_price1 ."\xE2\x82\xAc".str_repeat(' ', 5) ; ?></strong>
<label>shop2 </label>
<strong class="item-price"><?php echo $product_price2 ."\xE2\x82\xAc".str_repeat(' ', 5) ; ?></strong>
<label>shop3 </label>
<strong class="item-price"><?php echo $product_price3 ."\xE2\x82\xAc" .str_repeat(' ', 3) ; ?></strong>
<button type="submit" onclick="loadData(this.getAttribute('data-id'));" data-id="<?php echo $product_id; ?>" class="btn btn-primary btn-sm rounded" data-toggle="modal" data-target="#myModal">Change Price<i class="fas fa-tags"></i></button>
</form>
</div>
<?php
}
?>
popup window :
<!-- 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">
</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>
script :
<script type="application/javascript">
function loadData(id) {
id.preventDefault();
$.ajax({
url: "price.php",
method: "POST",
data: {get_data: 1, id: id},
success: function (response) {
console.log(response);
}
});
}
</script>
From the console log I found that the post request send it but with reload page and for this reason the the popup window never appears. 1
What I can do in order the page not reloaded ,the pop up appeared get the post request?
Thank you
To prevent the form from being submitted and hence the page refresh, you should call preventDefault on the form's onsubmit event, like this: <form method="post" onsubmit="event.preventDefault()">. It also works returning false like this: <form method="post" onsubmit="return false">.
I've made an example with the php part removed so you can see. Hope this helps.
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.
I am trying to open a modal when submit is clicked in the table .
I tried to change the animation to fadeIn because using fade the modal shows only flash.
The result when I use the fadeIn the modal appears but in split second and I did not include any timers or refresh in the whole page.
Can I have a sample code to show the modal and set the conditions in
if(isset($_POST['pending'])) { ...alert ..}
or please comment suggestions for this.
Because I am unable to use and view the modal properly.
Note: It has a bootstrap for the modal and jquery but I did not include here in the post
while($record = mysql_fetch_array($myData))
{
echo "<form action='dir_1.php' method='POST'>";
echo "<tr>";
echo '<td><input type="submit" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" /></td>';
echo "</tr>";
echo "</form>";
}
if(isset($_POST['pending'])){
echo('
<div class="modal fadeIn" 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">
<h2>Enter your First and Last Name</h2>
<form action="submit_prompt.php" method="post">
<p><strong>First Name:</strong><br />
<input type="text" name="notes" id="input1"/></p>
<input type="submit" name="submit" value="Add" />
</div>
<div class="modal-footer">
<input type="submit" name="submit" value="Add" />
<button type="button" onclick="play()" class="btn btn-default" data-dismiss="modal">Close</button>
</form>
</div>
</div>
</div>
</div>
');
}
Have you tried triggering with JavaScript:
<?php if(isset($_POST['pending'])) { ?>
<script>
$( document ).ready(function() {
$('#myModal').modal('show')
});
</script>
<?php } ?>
Quick Browser test, testmodal.php:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="modal fadeIn" 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">
<h2>Enter your First and Last Name</h2>
<form action="submit_prompt.php" method="post">
<p><strong>First Name:</strong><br />
<input type="text" name="notes" id="input1"/></p>
<input type="submit" name="submit" value="Add" />
</div>
<div class="modal-footer">
<input type="submit" name="submit" value="Add" />
<button type="button" onclick="play()" class="btn btn-default" data-dismiss="modal">Close</button>
</form>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<?php if(isset($_GET['pending'])) { ?>
<script>
$( document ).ready(function() {
$('#myModal').modal('show')
});
</script>
<?php } ?>
In the browser:
http://your-domain/testmodal.php?pending=fakevar
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