Boostrap modal update with ajax

Boostrap modal update with ajax - javascript

I have a page where a generate buttons that have data-id in them. When i click on the button a send the data-id through ajax to my php code, open modal window and generate content with recieved id. But the problem is that i need to refresh the page first to even get some value inside $_POST variable, and after i open and close my modal, i need to refresh page again so my variables update and doesnt open same window.
$(document).ready(function(){
// Otevre modal
$('.show-modal').click(function(){
var product_id = $(this).attr('data-id');
$.ajax({
type: 'POST',
cache: false,
data: {modalID : product_id},
url: 'includes/getID.php', // tomuto souboru predas idecko produktu, zapises do kosiku atd.
success: function(data) {
$("#itemBox").modal('show');
// treba nejaka hlaska, ze byl pridan do kosiku
}
});
// kod co otevre modal, mkrni na bootstrap manual jak je otevira nebo si otevreni nadefinuj sa
//$('.product_id').val(productID);
});
});
Here is JS code,
<?php
if(!isset($_SESSION)){
session_start();
}
if(isset($_REQUEST['modalID'])){
$_SESSION['modalBoxID'] = $_REQUEST['modalID'];
}
?>
Here is how i am saving the requested ID from ajax.
and here is how i generate my modal boxes, the problem is that without refreshing page, every box that i open have same content in it.
<?php
if(!isset($_SESSION)){
session_start();
}
if(!isset($_SESSION['sessName'])){
$_SESSION['sessName'] = 'visitor';
}
if(!empty($_SESSION['modalBoxID'])){
$sql = "SELECT * FROM vehicle WHERE vehicle.id='{$_SESSION['modalBoxID']}'";
$sqlquery = $db->query($sql);
$_SESSION['modalBoxID'] = NULL;
}
?>
<div class="container">
<!-- Modal -->
<div class="modal fade" id="itemBox" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body display-content">
<div class="container-fluid">
<?php while($details = mysqli_fetch_assoc($sqlquery)) : ?>
<div class="col-md-4"><img src=<?php echo $details['image'];?> class="image-responsive">
<div class="col-sm-6">
<form action="add_cart.php" method="post">
<div class="form-group">
<label for="quantity">Quantity:</label>
<input type="text" class="form-control" id="quantity" name="quantity">
</div>
</form>
</div>
<div class="col-sm-6">
<br/>
<button type="button" class="add-to-basket btn btn-success" >ADD TO CART</button>
</div>
</div>
<div class="col-md-1"></div>
<div class="col-md-7" id="desc">
<p><b>Model:</b> <?php echo $details['model'];?></p>
<p><b>Engine:</b> <?php echo $details['engine'];?></p>
<h4>Description</h4>
<p><?php echo $details['description'];?></p>
<hr>
<hr>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<?php endwhile; ?>
Is this even possible with solution that i have ? I dont even get any content on first page load, i need to refresh it so my ID saves to variable and then it will show some content.

Add below to your javascript. It removes the previous data from modal body. You might experience few some delay before the new content is loaded.
$(document.body).on('hidden.bs.modal', function () {
$("#itemBox").removeData('bs.modal');
});

Related

Display submitted form data in Java Spring MVC bootstrap modal

What I am trying to do: Display a value entered into a form in the modal that is shown by submitting the form.
What I tried first: To simply reference the "id" element in the modal. Realized this probably would not work because the modal is generated during page load and before the form has any values. So the value will be empty.
What I am currently trying: To return the form value after submission from my controller. Use boostrap Table('load', data) to load the table after form return and display in the modal.
I am very new to Java and feel like I may be making this a lot more complicated than it needs to be. Here is the current code:
If any additional code snippets needed, let me know...
javascript - I know I am making it into submit.done because the table is displaying, just no data.
$table = $("#notesTable").bootstrapTable({
data: []
});
$("#notesTable").hide();
$("#btnSubmit").click(function() {
var dataString = $("#extractForm").serialize();
var submit = $.ajax({
url: "${pageContext.request.contextPath}/doc/validateAuditId",
type: "POST",
cache: false,
data: dataString
});
submit.done(function(data) {
if (data.length && data.length > 0) {
$("#notesTable").show();
$("#notesTable").bootstrapTable('load', data);
$("#dlgUpload").modal('show');
}else{
$("#notesTable").hide();
$("#dlgUpload").modal('show');
}
});
Return from controller
Modal:
<html>
<body>
<div id="dlgUpload" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<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="noteTitle">Upload File</h4>
</div>
<div class="modal-body">
<div class="tabs-div">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Upload Document</li>
<li role="presentation">Select Doc Type</li>
<li role="presentation">Perceptive Content</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="tabUploadDoc">
<br>
<form:form method="POST" action="${pageContext.request.contextPath}/doc/uploadFile" enctype="multipart/form-data">
<div class="row">
<div class="col-xs-3 form-group">
<form:label path="fileName">Select a file to upload:</form:label>
</div>
<div class="col-xs-2 form-group">
<input type="file" name="fileName" />
</div>
</div>
<table id="notesTable" data-classes="table table-striped table-no-bordered" data-undefined-text="" data-toggle="table">
<thead>
<tr>
<th data-field="retAuditId" data-visible="true" data-align="left" data-sortable="false">Audit ID</th>
</tr>
</th>
Output: Nada

Need to return a list from the controller. Was returning a String.

Display while loop data based on userId inside the modal PHP, Javascript

This picture shows the list of instructors from my database. Whenever the user clicks on the instructor's images.
A modal will appear and will display the broad details about the instructor.The modal displays the name, bio, descriptions and playlist. I'm having a problem when fetching the details about their favorite playlist.
In my database i have the table of playlist(tb: ch_music) where all of the registered favorite playlist of the instructor will be save there.
My conclusion in here is to get the unique id of the instructor and do the query for playlist inside the modal but i dont know how to do that.
Here's my code for fetching the instructor's list(instructor.php)
Whole codes not shown just the important part only
<?php
$instructor_fetch = mysqli_query($link,"SELECT * FROM ch_users AS U LEFT JOIN ch_socialmedia as SM ON U.userId = SM.userId LEFT JOIN ch_music as M ON M.userIdM = U.userId GROUP BY U.userId ORDER BY COUNT(U.userId) DESC");
while($instructor_row=mysqli_fetch_array($instructor_fetch)){
?>
<span id="desc<?php echo $instructor_row['userId']; ?>"><?php echo $instructor_row['description']; ?></span>
<span id="bio<?php echo $instructor_row['userId']; ?>"><?php echo $instructor_row['bio']; ?></span>
<img class="instructorpic" id="imageresource<?php echo $instructor_row['userId']; ?>" src="img/instructor/<?php echo $instructor_row['profile']; ?>">
<?php
}
?>
and here's my modalcustom.js(this js performs the passing of data into modal)
$(document).ready(function(){
$(document).on('click', '.edit', function(){
var id=$(this).val();
var insModal = $('#instructorname'+id).html();
var descModal = $('#desc'+id).html();
var bioModal = $('#bio'+id).html();
$('#imagepreview').attr('src', $('#imageresource'+id).attr('src'));
$('#eIns').html(insModal);
$('#eDesc').html(descModal);
$('#eBio').html(bioModal);
$('#edit').modal('show');
});
});
and here's my codes for the modal(shown the whole codes)
i'm not using data-id this code is from (modal.php) i used include script to my instructor.php
<div class="modal fade bd-example-modal-lg" id="edit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<br>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="containermodal flex-direction">
<div class="col-md-5">
<img src="" id="imagepreview" class="instructorpic imageModal">
</div>
<div class="col-md-6">
<h1 id="eIns"></h1>
<span style="color:#ffde03;">CYCLEHOUSE HEAD COACH</span><BR>
"<span id="eBio"></span>"
<BR><BR>
<p id="eDesc"></p>
<BR>
<button class="cycle-button">BOOK NOW</button>
<br><br>
<span style="color:#ffde03;">LISTEN TO MY SPOTIFY PLAYLIST:</span><BR><BR>
<?php
$instructor_music = mysqli_query($link,"SELECT * FROM ch_music WHERE userIdM = '$idkhowtodo'");
while($music_row=mysqli_fetch_array($instructor_music)){
?>
<div class="col-xs-6 col-sm-4">
<img src="img/playlist/<?php echo $music_row['music_img']; ?>" style="height:100px; width:100px;">
</div>
<?php
}
?>
<!--</div>-->
</div>
</div>
</div>
</div>
<div class="modal-footer">
<br>
</div>
</div>
</div>
</div>
What i am trying to do is to allocate the unique id of the instructors to the modal($idkhowtodo) so that the query statement will run properly.

javascript displaying error function is not defined.

Javascript code:
<script>
$(document).ready(function(){
$("#verify").click(function(){
if ($("#cval").val()==$("#captcha").text()){
$("#pop").modal("hide");
var id=$("#captcha").attr("data-id");
if (_ths.hasClass("red")){
$.post(base_url+"index.php/myad/removethumbs",{uniqueid:id},function(){
_ths.removeClass("red");
});
}
else{
$.post(base_url+"index.php/myad/addthumbs",{uniqueid:id},function(){
_ths.addClass("red");
});
}
$("#captcha").val("");
}
else{
$("#cval").val("");
$("#cval").attr("placeholder","invalid captcha");
}
});
function thumb(id,ths){
if (<?=$loggedin?>){
$.post(base_url+"index.php/myad/addthumbs",{uniqueid:id});
$(ths).addClass("red");
}
else{
_ths=$(ths);
var number = Math.floor(Math.random()*90000) + 10000;
$("#captcha").attr("data-id",id);
$("#captcha").text(number);
$("#pop").modal("show");
}
};
function staticthumb(id,ths){
if (<?=$loggedin?>){
if ($(ths).hasClass("red")){
$.post(base_url+"index.php/myad/removethumbs",{uniqueid:id},function(){
$(ths).removeClass("red");
});
}
else{
$.post(base_url+"index.php/myad/addthumbs",{uniqueid:id},function(){
$(ths).addClass("red");
});
}
}
else{
_ths=$(ths);
var number = Math.floor(Math.random()*90000) + 10000;
$("#captcha").attr("data-id",id);
$("#captcha").text(number);
$("#pop").modal("show");
}
};
});
</script>
HTML code:
<div class="col-sm-8" id="lists">
<?php if(isset($products)):?>
<?php foreach($products as $p):?>
<div class="col-md-12">
<div class="product-view row" style="border-bottom:1px solid #eee;margin-bottom:20px;padding:20px 0px 20px 0px;background:#f1f1f1">
<div class="col-sm-3 col-md-3 col-lg-3">
<?php $j = 0;?>
<?php foreach($p['checkbox'] as $checkbox):?>
<?php if($j == 0):?>
<div class="large-image">
<img alt="#" src="<?php echo base_url();?>/uploads/<?php echo $checkbox['Image']?>" />
<div class="image-title"><span class="icon-thumbs-up" onclick="staticthumb(<?php echo $checkbox['UniqueID']?>,this);" id="thumb<?php echo $checkbox['UniqueID']?>" style="font-size:24px;"></span></div>
</div>
<?php endif;?>
<?php $j++;?>
<?php endforeach;?>
</div>
<div class="col-sm-6 col-md-6 col-lg-6">
<div class="product-label">
<h4><?php echo $p["FullName"];?>, <?php echo $p["Area"];?></h4>
<h5 style="font-size:14px"><span class="icon-calendar"></span> <?php echo $p["SaleDate"];?></h5>
<h5 style="font-size:14px"><span class="icon-clock"></span>
<?php for($i = 0; $i < count($p['StartTime']); $i++):?>
<?php echo $p['StartTime'][$i].'-'.$p['EndTime'][$i]?>
<?php endfor;?>
</h5>
<div data-balloon-length="fit" data-balloon=" <?php echo $p["Address1"].'-'.$p["Postal"];?>" data-balloon-pos="up" ><h5 style="font-size:14px;width: 100%;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;"><span class="icon-home"></span> <?php echo $p["Address1"].'-'.$p["Postal"];?></h5></div>
<div data-balloon-length="fit" data-balloon=" <?php echo $p["description"];?>" data-balloon-pos="up" ><h5 style="font-size:14px;width: 100%;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;"><span class="icon-file"></span> <?php echo $p["description"];?></h5></div>
<!--<div class="panel-group accordion-simple" id="product-accordion">
<div class="panel" style="background:#f1f1f1;">
<div class="panel-heading"> <a data-toggle="collapse" data-parent="#product-accordion" href="#product-address" class="collapsed"> <span class="arrow-down icon-arrow-down-4"></span> <span class="arrow-up icon-arrow-up-4"></span> Address </a> </div>
<div id="product-address" class="panel-collapse collapse">
<div class="panel-body"><h5 style="font-size:14px"><?php echo $p["Address1"];?></h5></div>
</div>
</div>
<div class="panel" style="background:#f1f1f1;">
<div class="panel-heading"> <a data-toggle="collapse" data-parent="#product-accordion" href="#product-size" class="collapsed"> <span class="arrow-down icon-arrow-down-4"></span> <span class="arrow-up icon-arrow-up-4"></span> Description </a> </div>
<div id="product-size" class="panel-collapse collapse">
<div class="panel-body"><h5 style="font-size:14px"><?php echo $p["description"];?></h5></div>
</div>
</div>
</div>-->
</div>
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<div class="product-label">
<h4>CATEGORY</h4>
<?php foreach($p['checkbox'] as $checkbox):?>
<h5 style="font-size:14px"><?php echo $checkbox['Product']?></h5>
<?php endforeach;?>
</div>
</div>
</div>
</div>
<?php endforeach;?>
<?php else:?>
<h3 style="text-align:center">SORRY THERE IS NO ANY DATA IS AVAILABLE.</h3>
<?php endif;?>
HTML code for captcha validation:
<div class="modal fade bs-example-modal-sm" id="pop" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog modal-sm" 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">Please verify captcha</h4>
</div>
<div class="modal-body">
<h4 id="captcha" class="text-center"></h4>
<hr>
<div class="form-group">
<input type="text" class="form-control" name="captcha" id="cval" placeholder="enter captcha">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="verify">Verify</button>
</div>
</div>
</div>
</div>
when I am a clicking on thumb it displaying me function staticthumb is not defined. but in reality you can see that I wrote function staticthumb I declared staticthumb function but still it displaying error so please help me. right now I am helpless so please help me and try to resolve my issue and thanks in advance.

A Function declaration in JavaScript has Functional Scope, meaning it is only accessible from within the function in which it is declared. If it is not declared in a function, it is in global scope.
You are declaring your staticthumb function within an anonymous function so it will only be available within that scope. The easiest fix is to move the function declaration out of the anonymous function, which will pollute your global variable space ( which you would want to generally avoid, but that is a topic on its own)
TL;DR; Move your staticthumb function to the first line right after your <script> tag before your $(document).ready.

PHP passing value via button best practice

Below is my code, basically it pulls information from the database and displays the stock associated, from here I have a details button which I want to use to send data to another html page to display more information on the product, add to cart etc.
My question is what is considered "Best practice" to send this information, should I simply make a form that gets the ID from the array and sends it on click? Or is there a more efficient way say using jquery?
I assume best practice would be to have a function which the value is passed to from the button form?
<section>
<div class="row">
<div class="col-md-12">
<div class="heading">
<h1>New Mag Wheel Arrivals</h1>
</div>
</div>
</div>
<div class="row products">
<?php while ($product = mysqli_fetch_assoc($wheelResult)) : ?>
<div class="col-md-3 col-sm-6">
<div class="product border">
<div class="image">
<a href="#"><img src=" <?= "images/wheels/wheelphotos/" . $product["bigpic"]; ?>"
alt="<?= $product["manufacturer"]; ?>" class="img-responsive img-demo"></a>
</div>
<div class="ribbon ribbon-quick-view sale">
<div class="theribbon">NEW</div>
<div class="ribbon-background"></div>
</div>
<div class="ribbon ribbon-quick-view logo">
<div class="theribbon"><img src="images/wheels/logos_small/Vs2.png"></div>
<div class="ribbon-background"></div>
</div>
<div class="text text-background">
<h4><?= $product["diam"] . "\" " . $product['manufacturer'] ?></h4>
<p class="brand"><?= "Model " . $product["part_no"]; ?></p>
<button class="btn btn-default btn-sm btn-primary" href="detail.php">Details</button>
</div>
</div>
</div>
<?php endwhile; ?>
</div>
</section>
Sudo code form example
EG
<form action=details.php method="GET">
<button class="btn btn-default btn-sm btn-primary" href="detail.php">Details</button>
hidden-value = $product["recid"]
</form>

As you need to load an entirely new page, so Ajax isn't going to bring any big improvements in terms of user friendliness. I'd suggest you to do this simply like below:
On product listing page (in while loop), place your button like this:
<button class="btn btn-default btn-sm btn-primary" >Details</button>
On detail.php page, simply take the id from $_GET request and then fetch detail for the product from database:
i.e. "SELECT * FROM `products` WHERE `product_id` = ?"
Hint: Use $_GET['id'] for ? as it will contain id of product passed from previous page.

bootstrap modal contact form issues

I'm having issues with a bootstrap modal contact form, everything seems to work as planned in all browsers except on iPad/safari, can anyone please shed any light on where I'm going wrong?
When viewing on iPad the modal is offset to the right and moved down
the page, not sitting in the middle where it should be.
When user selects a field in the form the cursor is not in the field
itself, it is located outside of the modal window flashing in the
greyed out background.
When user types in a field the text is not shown within the field
until the next field is selected, then the text appears.
As I said everything is working fine in I.E. and Chrome these issues only occur with safari. Something is breaking my layout when viewed with Apple device.
Page can be viewed at http://odds-uk.co.uk/abbeystone/contact.php
There's quite a lot going on in the page with validation, modals, maps and tabs etc. so I wonder if I have a conflict somewhere I'm fairly new to web programming (year 2 degree student) so please forgive any stupid errors, I do hope someone can help as I'm stumped for ideas at present. Thankyou in advance.
Roy
<!DOCTYPE HTML>
<html>
<head>
<!-- Include Google map API link -->
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDe94CcWCoY8mk1niRhZLBNc5bxst5CZNg"></script>
<!--<meta name="description" http-equiv="Content-Type" content="text/html;">-->
<!-- Website Title & Description for Search Engine purposes -->
<title>Contact Property Management</title>
<!-- Mobile viewport optimized -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- Bootstrap CSS -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!--<link href="includes/css/bootstrap-glyphicons.css" rel="stylesheet">-->
<!-- Custom CSS -->
<link href="includes/css/styles.css" rel="stylesheet">
<!-- Include Modernizr in the head, before any other Javascript -->
<script src="includes/js/modernizr-2.6.2.min.js"></script>
<script>
var Maldon = new google.maps.LatLng(51.731897, 0.677035);
function initializeMaldon()
{
var mapProp1 = {
center:Maldon,
zoom:15,
scrollwheel: false,
draggable: false,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map1=new google.maps.Map(document.getElementById("googleMap1"),mapProp1);
var marker1=new google.maps.Marker({
position:Maldon,
animation:google.maps.Animation.BOUNCE
});
marker1.setMap(map1);
var infowindow1 = new google.maps.InfoWindow({
content:"<img class='logopad' src='images/logo.png' width='140px' alt='Abbeystone Property Management Logo'>",
maxWidth: 140
});
infowindow1.open(map1,marker1);
}
google.maps.event.addDomListener(window, 'load', initializeMaldon);
/*The following map wouldnt show properly within hidden Tab so set a timer on it
www.w3schools.com/js/js_timing.asp
www.stackoverflow.com/questions/4064275/how-to-deal-with-google-map-inside-of-a-hidden-div-updated-picture*/
var refreshIntervalId;
function showMap() {
document.getElementById('googleMap2').style.display = '';
refreshIntervalId = setInterval(function () { updateMapTimer() }, 10);
}
function updateMapTimer() {
clearInterval(refreshIntervalId);
var Norwich = new google.maps.LatLng(52.627970, 1.298478);
var mapProp2 = {
center:Norwich,
zoom:15,
scrollwheel: false,
draggable: false,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map2=new google.maps.Map(document.getElementById("googleMap2"),mapProp2);
var marker2=new google.maps.Marker({
position:Norwich,
animation:google.maps.Animation.BOUNCE
});
marker2.setMap(map2);
var infowindow2 = new google.maps.InfoWindow({
content:"<img class='logopad' src='images/logo.png' width='140px' alt='Abbeystone Property Management Logo'>",
maxWidth: 140
});
infowindow2.open(map2,marker2);
}
</script>
</head>
<body>
<div class="container fill">
<?php include 'header.php';?>
<div class="carousel slide" id="myCarousel">
<div class='LogoOverlay'>
<div class="">
<div class="LogoImage"><img src="images/homepage/OmbudsmanLogo.png" alt="Ombudsman Service Logo"></div>
<div class="LogoImage"><img src="images/homepage/ARMA-logo.jpg" alt="ARMA Logo"></div>
<div class="LogoImage"><img src="images/homepage/FedOfMastBuildLogo.gif" alt="Fed. of Master Builders Logo"></div>
</div>
</div>
<div class="carousel-inner">
<div class="active item">
<div class="fill" style='background-image: url("images/homepage/home2.jpg");'>
<div class="container">
<div class="row nomargin">
<div class="col-xs-10 col-xs-offset-1 col-md-10 col-md-offset-1 contFrame">
<div class="row " id="ContactDiv">
<ul class="nav nav-tabs " id="myTab">
<li class="active">Head Office</li>
<li>Norwich Branch</li>
</ul>
<div class="tab-content my-tab">
<div class="tab-pane active" id="tab1">
<div class="col-sm-4">
<h3 class="moveDown10">Contact </h3>
<hr />
<p>
</p>
<hr />
<h4><span class="glyphicon glyphicon-earphone"></span> <b>01621 842711</b></h4>
<hr />
<div class="container">
<a href="#myModal" role="button" class="btn btn-info " data-toggle="modal">
<span class="glyphicon glyphicon-envelope"> </span> Send us a message</a>
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Messaging</h4>
</div> <!--end modal-header-->
<div class="modal-body">
<hr>
<form id="messageMaldon" class="form-horizontal"method="POST" action="send_form_email.php">
<div class="form-group">
<label class="col-lg-2 control-label" for="inputName">Name</label>
<div class="col-lg-10">
<input class="form-control required" name="inputName" id="inputName" placeholder="Name" value="" type="text" title="Please enter your Name">
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label" for="inputEmail">Email</label>
<div class="col-lg-10">
<input class="form-control required email" name="inputEmail" id="inputEmail" placeholder="Email" value="" type="text" title="Please enter a valid Email address">
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label" for="inputPhone">Phone</label>
<div class="col-lg-10">
<input class="form-control required number" name="inputPhone" id="inputPhone" placeholder="Phone" value="" type="text" title="Please enter your Phone Number using numbers only">
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label" for="inputMessage">Message</label>
<div class="col-lg-10">
<textarea class="form-control required" name="inputMessage" id="inputMessage" placeholder="Message" rows="6"></textarea>
<!--<button class="btn btn-success pull-right" type="submit" value="submit">Send!</button>-->
</div>
</div>
<div class="form-group">
<div class="col-md-6">
<button type="submit" value="Submit" class="btn btn-success pull-right" >Send</button>
</div>
</div>
</form>
</div> <!--end modal-body-->
</div> <!--end modal-content-->
</div> <!--end modal-dialog-->
</div><!-- end myModal-->
</div>
</div><!-- end col-sm-4-->
<div class="col-sm-8 map ">
<h4><span class="glyphicon glyphicon-map-marker"></span> Our Location</h4>
<div id="googleMap1"></div>
</div>
</div><!-- end tab-pane -->
<div class="tab-pane" id="tab2">
<div class="col-sm-4">
<h3 class="moveDown10">Contact </h3>
<hr>
<p>
</p>
<hr />
<h4><span class="glyphicon glyphicon-earphone"></span> <b></b></h4>
<hr>
<div class="container">
<a href="#myModal" role="button" class="btn btn-custom " data-toggle="modal">
<span class="glyphicon glyphicon-envelope"> </span> Send us a message</a>
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Messaging</h4>
</div> <!--end modal-header-->
<div class="modal-body">
<hr>
<!-- <form class="form-horizontal">
<div class="form-group">
<label class="col-lg-2 control-label" for="inputName">Name</label>
<div class="col-lg-10">
<input class="form-control" id="inputName" placeholder="Name" type="text">
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label" for="inputEmail">Email</label>
<div class="col-lg-10">
<input class="form-control" id="inputEmail" placeholder="Email" type="email">
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label" for="inputPhone">Phone</label>
<div class="col-lg-10">
<input class="form-control" id="inputPhone" placeholder="Phone" type="phone">
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label" for="inputMessage">Message</label>
<div class="col-lg-10">
<textarea class="form-control" id="inputMessage" placeholder="Message" rows="6"></textarea>
<button class="btn btn-success pull-right" type="submit">Send!</button>
</div>
</div>
</form>-->
</div> <!--end modal-body-->
</div> <!--end modal-content-->
</div> <!--end modal-dialog-->
</div><!-- end myModal-->
</div>
</div><!-- end col-sm-4-->
<div class="col-sm-8 map ">
<h4><span class="glyphicon glyphicon-map-marker"></span> Our Location</h4>
<div id="googleMap2"></div>
</div>
</div><!-- end tab-pane -->
</div><!-- end tab-content -->
</div><!--end ContactDiv-->
</div>
<!--end col-xs-10 col-xs-offset-1-->
</div><!--end row-->
</div>
</div>
</div>
</div>
</div>
</div>
<?php include 'footer.php';?>
<!-- All Javascript at the bottom of the page for faster page loading -->
<!-- First try for the online version of jQuery-->
<script src="includes/js/jquery-2.1.1.min.js"></script>
<!-- If no online access, fallback to our hardcoded version of jQuery -->
<script>window.jQuery || document.write('<script src="includes/js/jquery-2.1.1.min.js"><\/script>')</script>
<!-- Bootstrap JS -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<!-- Custom JS -->
<script src="includes/js/script.js"></script>
<!-- jQuery validation -->
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js"></script>
<script>
$(document).ready(function() {
$('#messageMaldon').validate();
}); // end ready
</script>
</body>
</html>
PHP:
<?php
if(isset($_POST['inputEmail'])) {
// EDIT THE 2 LINES BELOW AS REQUIRED
$email_to = "blah#blahblahblah.net";
$email_subject = "Customer Enquiry";
function died($error) {
// your error code can go here
echo "We are very sorry, but there were error(s) found with the form you submitted. ";
echo "These errors appear below.<br /><br />";
echo $error."<br /><br />";
echo "Please go back and fix these errors.<br /><br />";
die();
}
// validation expected data exists
if(!isset($_POST['inputName']) ||
!isset($_POST['inputPhone']) ||
!isset($_POST['inputEmail']) ||
!isset($_POST['inputMessage'])) {
died('We are sorry, but there appears to be a problem with the form you submitted.');
}
$inputName = $_POST['inputName']; // required
$inputPhone = $_POST['inputPhone']; // required
$inputEmail = $_POST['inputEmail']; // required
$inputMessage = $_POST['inputMessage']; // required
$error_message = "";
$string_exp = "/^[A-Za-z\s.'-]+$/";
if(!preg_match($string_exp,$inputName)) {
$error_message .= 'The Name you entered does not appear to be valid.<br />';
}
$num_exp = "/^[0-9\s.'-]+$/";
if(!preg_match($num_exp,$inputPhone)) {
$error_message .= 'The Number you entered does not appear to be valid.<br />';
}
$email_exp = '/^[A-Za-z0-9._%-]+#[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/';
if(!preg_match($email_exp,$inputEmail)) {
$error_message .= 'The Email Address you entered does not appear to be valid.<br />';
}
if(strlen($inputMessage) < 2) {
$error_message .= 'The Message you entered do not appear to be valid.<br />';
}
if(strlen($error_message) > 0) {
died($error_message);
}
$email_message = "Message sent via Contact page on Abbeystone Website.\n\n";
function clean_string($string) {
$bad = array("content-type","bcc:","to:","cc:","href");
return str_replace($bad,"",$string);
}
$email_message .= "Name: ".clean_string($inputName)."\n";
$email_message .= "Phone: ".clean_string($inputPhone)."\n";
$email_message .= "Email: ".clean_string($inputEmail)."\n";
$email_message .= "Message: ".clean_string($inputMessage)."\n";
// create email headers
$headers = 'From: '.$inputEmail."\r\n".
'Reply-To: '.$inputEmail."\r\n" .
'X-Mailer: PHP/' . phpversion();
#mail($email_to, $email_subject, $email_message, $headers);
//sleep(3);
echo "<meta http-equiv='refresh' content=\"0; url=http://www.abbeystone.net/contact.php\">";
echo "<script>alert('Thankyou your message was sent successfully.'); </script> ";
}
?>

It seems to me to be the positioning within the html markup of the #myModal element that is causing safari to render the modal as if it was a child element (as indeed that is how you have positioned it).
From the Bootstrap documentation:
Modal markup placement
Always try to place a modal's HTML code in a top-level position in your document to avoid other components affecting the modal's appearance and/or functionality.
Also the way in which the modal renders in chrome doesn't seem to be ideal either as it renders under the header and footer elements - rather that being on-top of all page elements (but as it is centred this is less noticeable).
To fix the issue reposition the modal div and its contents from after the trigger button to before the </body> close tag:
Broken Markup (current)
<a href="#myModal" role="button" class="btn btn-info " data-toggle="modal">
<span class="glyphicon glyphicon-envelope"> </span> Send us a message
</a>
//reposition as below to fix
<div class="modal fade in" id="myModal" aria-hidden="false" style="display: block; padding-left: 0px;">
//form and stuff...
</div>
Fixed Markup
<div class="modal fade in" id="myModal" aria-hidden="false" style="display: block; padding-left: 0px;">
//form and stuff...
</div>
</body>

Modal markup placement
Always try to place a modal's HTML code in a top-level position in your document to avoid other components affecting the modal's appearance and/or functionality.

Develop Reference

JavaScript is the programming language of the Web.

Boostrap modal update with ajax - javascript

Add below to your javascript. It removes the previous data from modal body. You might experience few some delay before the new content is loaded. $(document.body).on('hidden.bs.modal', function () { $("#itemBox").removeData('bs.modal'); });

Related

Display submitted form data in Java Spring MVC bootstrap modal

Display while loop data based on userId inside the modal PHP, Javascript

javascript displaying error function is not defined.

PHP passing value via button best practice

bootstrap modal contact form issues

Categories

Resources