I hope everything is good with you!
I have a problem that I can't solve really. I have the following script, and it works on a "blank" page with bootstrap:
index.php
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv" lang="sv">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Test</title>
<link rel="stylesheet" href="css/jquery.modal.css" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"> <!-- load bootstrap via CDN -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <!-- load jquery via CDN -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="js/jquery.modal.js"></script>
<script src="js/jquery-1.7.1.js"></script>
<script src="js/jquery.form.min.js"></script>
<script src="js/jquery.reveal.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var options = {
url: "include/form_process.php", // where to submit form to
type: "post", // submit method
dateType: "html", // returned dataType
success: showResponse // function to call on successful form submittion
};
// bind form using 'ajaxForm'
$('#createForm').ajaxForm(options);
});
function showResponse(responseText) {
console.log('success');
$('#main-wrapper').prepend(responseText); // prepend the modal to #wrapper dib
//$('#mailSetupForm')[0].reset();
// display modal
$('#modal').reveal({ // The item which will be opened with reveal
animation: 'fade', // fade, fadeAndPop, none
animationspeed: 600, // how fast animtions are
closeonbackgroundclick: false, // if you click background will modal close?
//dismissmodalclass: 'close' // the class of a button or element that will close an open modal
dismissmodalclass: 'modal-btn' // the class of a button or element that will close an open modal
});
}
</script>
</head>
<body>
<div class="col-sm-6 col-sm-offset-2" style="margin-left: 0%;">
<div id="main-wrapper" class="subpage">
<div class="container">
<div class="row">
<div class="12u skel-cell-important">
<!-- Content -->
<article class="first last">
<h1>Test</h1>
<p>
<form action="" method="POST" id="createForm">
<!-- NAME -->
<div id="name-group" class="form-group">
<label for="name">First input</label>
<input type="text" class="form-control" name="input1" placeholder="First input" style="width: 400px; max-width: 100%">
<!-- errors will go here -->
</div>
<!-- EMAIL -->
<div id="email-group" class="form-group">
<label for="email">Second input</label>
<input type="text" class="form-control" name="input2" placeholder="Second input" style="width: 400px; max-width: 100%">
<!-- errors will go here -->
</div>
<!-- SUPERHERO ALIAS -->
<div id="superhero-group" class="form-group">
<label for="superheroAlias">Third input</label>
<input type="text" class="form-control" name="input3" placeholder="Third input" style="width: 400px; max-width: 100%">
<!-- errors will go here -->
</div>
<br>
<button type="submit" class="btn btn-success">DO <span class="fa fa-arrow-right"></span></button>
</form>
</p>
</article>
</div>
</div>
</div>
</div>
</div>
</body>
form_process.php
<?php
$clientLimit = 10;
//$chanNameMin = 4;
if (!$_POST['input1'])
{
echo <<<HTML
<div id="modal">
<div style="position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 1050; overflow: auto;" id="modal-window">
<div style="top: 50%; margin-top: -121.5px; margin-left: -280px; position: absolute; left: 50%;" class="modal-box modal-type-error modal-size-normal">
<div class="modal-inner">
<div class="modal-title">
<h3>Error!</h3>
<a class="modal-close-btn"></a>
</div>
<div class="modal-text">
Input1 not entered
</div>
<div class="modal-buttons">
<a class="modal-btn btn-light-red" id="close">Close</a>
</div>
</div>
</div>
</div>
</div>
HTML;
}elseif (!$_POST['input2'])
{
echo <<<HTML
<div id="modal">
<div style="position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 1050; overflow: auto;" id="modal-window">
<div style="top: 50%; margin-top: -121.5px; margin-left: -280px; position: absolute; left: 50%;" class="modal-box modal-type-error modal-size-normal">
<div class="modal-inner">
<div class="modal-title">
<h3>Error!</h3>
<a class="modal-close-btn"></a>
</div>
<div class="modal-text">
input2 not entered
</div>
<div class="modal-buttons">
<a class="modal-btn btn-light-red" id="close">Close</a>
</div>
</div>
</div>
</div>
</div>
HTML;
}elseif (!$_POST['input3'])
{
echo <<<HTML
<div id="modal">
<div style="position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 1050; overflow: auto;" id="modal-window">
<div style="top: 50%; margin-top: -121.5px; margin-left: -280px; position: absolute; left: 50%;" class="modal-box modal-type-error modal-size-normal">
<div class="modal-inner">
<div class="modal-title">
<h3>Error!</h3>
<a class="modal-close-btn"></a>
</div>
<div class="modal-text">
input3 not entered
</div>
<div class="modal-buttons">
<a class="modal-btn btn-light-red" id="close">Close</a>
</div>
</div>
</div>
</div>
</div>
HTML;
}elseif ($_POST['input3'] > $clientLimit)
{
echo <<<HTML
<div id="modal">
<div style="position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 1050; overflow: auto;" id="modal-window">
<div style="top: 50%; margin-top: -121.5px; margin-left: -280px; position: absolute; left: 50%;" class="modal-box modal-type-error modal-size-normal">
<div class="modal-inner">
<div class="modal-title">
<h3>Error!</h3>
<a class="modal-close-btn"></a>
</div>
<div class="modal-text">
Max input3 is 10
</div>
<div class="modal-buttons">
<a class="modal-btn btn-light-red" id="close">Close</a>
</div>
</div>
</div>
</div>
</div>
HTML;
}else{
?>
<div id="modal">
<div style="position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 1050; overflow: auto;" id="modal-window">
<div style="top: 50%; margin-top: -121.5px; margin-left: -280px; position: absolute; left: 50%;" class="modal-box modal-type-success modal-size-normal">
<div class="modal-inner">
<div class="modal-title">
<h3>IT WORKS!</h3>
<a class="modal-close-btn"></a>
</div>
<div class="modal-text">
The form is submitted. YEY
</div>
<div class="modal-buttons">
<a class="modal-btn btn-light-green" id="close">Close</a>
</div>
</div>
</div>
</div>
</div>
<?php
}
?>
I've been using this script before with JQuery 1.7.1 and jq171 = jQuery.noConflict( true ); , but after I used bootstrap and JQuery 2.0.3 I didn't need the noConflict anymore.
Now to my problem... I have downloaded a test Admin Template, which is using Bootstrap v3.3.6 and jQuery v1.11.1. After this, the script does not work anymore. The page refresh, which it shouldn't do, and the modal does not show up..
Can someone tell me what's wrong? My head just spins right now. Can't find a solution...
UPDATE: I made a new script, so this case is closed!
