We Keep Coding

Return a message after submmited form

I have this form in html:
<form action='#Url.Action("ExportExcel", "Banks")' method="post" target="_blank" id="myForm">
#Html.AntiForgeryToken()
<input type="hidden" name="typeDetails" id="typeDetails" value="typeDetails.value" />
<input type="hidden" name="filteredBanksIds" id="filteredBanksIds" value="" />
<input id="btnExportExcel" type="hidden" value="submit" data-toggle="modal" data-target="#ExportExcelModal" />
</form>
and the modal is:
<div class="modal fade" id="ExportExcelModal" tabindex="-1" role="dialog" aria-labelledby="ExportExcelModalTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="ExportExcelModalTitle">Banks</h5>
<button type="button" class="close" id="ExportExcelModalClose" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Would you like to export this banks with details?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-target="#myModal" value="1" onclick="exportExcel(this.value)">yes</button>
<button type="button" class="btn btn-primary" data-target="#myModal" value="0" onclick="exportExcel(this.value)">no</button>
</div>
</div>
</div>
</div>
and I have this in JS:
function exportExcel(typeDetails) {
$('#ExportExcelModalClose').click();
$('#filteredBanksIds').val(filteredBanks.map(function (bank) { return bank.Id }));
$('#typeDetails').val(typeDetails);
$("#myForm").submit;
return true;
}
I would like that in addition to what happens on the server side (Excel export and download),
also a message will be returned to the user after the Excel export ends, with custom message from the server.
How can I add this?

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>

Javascript code to autoload a modal not workinng

I used some code that i found on the internet that was supposed to autoload a modal but its's not working.
This is a live website and i am supposed to bring some changes to it. Not sure what's wrong here:
if (isset($_SESSION['verify'])) {
echo '
<script type="text/javascript">
$(document).ready(function()
{
$("#exampleModal").modal('show');
}
);
</script>
<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">Modaltitle</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="#" method="post">
<input type="text" name="otp" placeholder="Type OTP">
<textarea rows="1" cols="25" name="message"placeholder="Type Message"></textarea>
<center><button id="button2" type="submit" name="verify_otp">Send Message</button></center>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>';
}
I wanted this to produce a modal without any need for a button to be pressed but on auto load it's not doing that.

if(isset($_SESSION['verify'])){
echo"
<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'>Modaltitle</h5>
<button type='button' class='close' data-dismiss='modal' aria-label='Close'>
<span aria-hidden='true'>×</span>
</button>
</div>
<div class='modal-body'>
<form action='#' method='post'>
<input type='text' name='otp' placeholder='Type OTP'>
<textarea rows='1' cols='25' name='message' placeholder='Type Message'></textarea>
<center><button id='button2' type='submit' name='verify_otp'>Send Message</button></center>
</form>
</div>
<div class='modal-footer'>
<button type='button' class='btn btn-secondary' data-dismiss='modal'>Close</button>
<button type='button' class='btn btn-primary'>Save changes</button>
</div>
</div>
</div>
</div>
<script type='text/javascript'>
$(document).ready(function()
{
$('#exampleModal').modal('show');
});
</script>";}
I have modified your code with changing quotes (single quote to double). This code should work for you. Before running please check following steps:
Is there any JQuery conflict in your code?
Use browser console to check whether there are any javascript errors.
I am assuming you have included required JS and CSS to use modal.

First issue: conflicting quotes
if (isset($_SESSION['verify'])) {
echo '
<script type="text/javascript">
$(document).ready(function()
{
$("#exampleModal").modal('show');
}
);
above you have an opening simple quote in theecho ' part and then you again use single quotes on your JS code in .modal('show') part.
Second issue: Absolutelly poorly engineered solution. You are echoing the modal server sides if you have a session variable called "verify" , with a static JS tiny code which just shows the modal. Why to charge the server with that work , if it's an UI concern? Why not to set a cookie server-sides and write a JS script which would show the modal if the cookie is not set? Like this
<?php
if(isset($_SESSION["verify"])){
setcookie("verify","true");
}
?>
<script type="text/javascript">
$(document).ready(function()
{
let cookie = getCookie("verify")
if(cookie){
$("#exampleModal").modal('show');
}
}
);
function getCookie(name) {
var value = "; " + document.cookie;
var parts = value.split("; " + name + "=");
if (parts.length == 2) return parts.pop().split(";").shift();
}
</script>
<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">Modaltitle</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="#" method="post">
<input type="text" name="otp" placeholder="Type OTP">
<textarea rows="1" cols="25" name="message"placeholder="Type Message"></textarea>
<center><button id="button2" type="submit" name="verify_otp">Send Message</button></center>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
I didn't tested that code though, it might work or need to be fine tuned but it's
main concept it's clear : separate your concerns as much as you can between the -layers of your application.The view layer (HTML, JS) should communicate via some mechanism (ideally you'd have sent an ajax request rather than a cookie) with the business layer (PHP) , the later tell whether the verify variable exists , and the view layer should then show the modal if necessary.
Third issue:Not readable code Even if you actually wanted to go on with such an bad approach, you are writing it the worst possible way. What if coders or designers wanted to change the quoted HTML ? Do you know how hard it would be to change it without breaking something within those quotes? A better approach would be
<?php if(isset($_SESSION["verify"])){ ?>
<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'>Modaltitle</h5>
<button type='button' class='close' data-dismiss='modal' aria-label='Close'>
<span aria-hidden='true'>×</span>
</button>
</div>
<div class='modal-body'>
<form action='#' method='post'>
<input type='text' name='otp' placeholder='Type OTP'>
<textarea rows='1' cols='25' name='message' placeholder='Type Message'></textarea>
<center><button id='button2' type='submit' name='verify_otp'>Send Message</button></center>
</form>
</div>
<div class='modal-footer'>
<button type='button' class='btn btn-secondary' data-dismiss='modal'>Close</button>
<button type='button' class='btn btn-primary'>Save changes</button>
</div>
</div>
</div>
</div>
<script type='text/javascript'>
$(document).ready(function()
{
$('#exampleModal').modal('show');
});
</script>
<?php } ?>
Fourth (and most important) issue: An "alive" website in which you are supposed to make changes that you found on internet and don't know why/how they works ? Dude, please stop doing that !! If you don't know what is that code doing or why it isn't doing it, perhaps you shouldn't be working professionally yet and need more training first.

A simple approach would be to end the PHP block and write the JS/HTML code. Like below.
if (isset($_SESSION['verify'])) {
?>
<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">Modaltitle</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="#" method="post">
<input type="text" name="otp" placeholder="Type OTP">
<textarea rows="1" cols="25" name="message"placeholder="Type Message"></textarea>
<center><button id="button2" type="submit" name="verify_otp">Send Message</button></center>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function()
{
$("#exampleModal").modal('show');
}
);
</script>
<?php
}

Pass id of a row in the modal

I wish to pass the id of a particular row into a modal
code for link
Resume
Code for modal
<div id="myModal" class="modal fade" tabindex="-1" data-width="760">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title">Update profile</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<div class="fetched-data"></div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
<button type="submit" name="register" alt="Login" value="Submit" class="btn blue">Save changes</button>
</div>
</div>
Code for script
<script>
$(document).ready(function(){
$('#myModal').on('show.bs.modal', function (e) {
var rowid = $(e.relatedTarget).data('id');
$.ajax({
type : 'post',
url : 'fetch.php', //Here you will fetch records
data : 'rowid='+ rowid, //Pass $id
success : function(data){
$('.fetched-data').html(data);//Show fetched data from database
}
});
});
});
</script>
Code for fetch.php
<?php
$editId = $_POST['rowid'];
echo $editId;
?>
I am supposed to get the id but instead i am getting undefined value in the modal, can anyone please tell why this is happening

Try this code
Resume
<div id="myModal" class="modal fade" tabindex="-1" data-width="760">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title">Update profile</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<span class='ShowData'> </span>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
<button type="submit" name="register" alt="Login" value="Submit" class="btn blue">Save changes</button>
</div>
</div>
Script Code
<script>
$('.ListId').click(function()
{
var Id=$(this).attr('data-id');
$.ajax({url:"fetch.php?Id="+Id,cache:false,success:function(result)
{
$(".ShowData").html(result);
}});
});
</script>
fetch.php Code
$id=$_GET['Id'];
echo $id;

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?