Twitter Bootstrap Modal not working in both tabs - php

I am using Twitter Bootstrap for both tabs and modals. I have two tabs that use identical code. In the first tab the modals work perfectly, but in the second tab the screen will darken but the modal does not appear.
here is my code for calling the modal (same code used in both tabs) in list.php:
<a type="button" href="edit.php?id='.$id.'" data-target="#edit_modal" data-toggle="modal">Edit</a>
here is my modal in list.php
<div class="modal hide fade" id="edit_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times</button>
<h3>Edit Testimonials</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
</div>
and here is edit.php where the true body of the modal is
<div id="edit_modal">
<div class="modal-body">
<?php echo ($name_error != "") ? $name_error : ""; ?>
<form class="form-horizontal" action="edit.php?id=<?php echo $id; ?>" method="post">
<div class="control-group">
<label class="control-label">Testimonial</label>
<div class="controls">
<textarea class="input-xlarge" name="body" cols=100 rows=5><?php echo $testimonial['body']?></textarea>
</div>
</div>
<div class="control-group">
<label class="control-label">Author</label>
<div class="controls">
<textarea class="input-xlarge" name="author" cols=100 rows=5><?php echo $testimonial['author']?></textarea>
</div>
</div>
</div>
<div class="modal-footer">
<input type="submit" class="btn btn-primary" value="Update Testimonial" name="submit-form" />
Close
</div>
</form>
</div>

Related

My browser keeps sending me to the raw PHP file when I try to send form data to a raw text file?

sorry if the answer is really simple but I wanted to send data from a form on a modal to a raw text file using PHP but I can't seem to get it to work. It just redirects me to a PHP file and doesn't generate the text file.
HTML form:
<!-- The Modal -->
<div class="modal fade" id="myModal">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<form action="action.php" method="POST">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title"#>Input your details</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<div class="form-group">
<label for="username">Username:</label>
<input type="text" class="form-control" required value="Enter Username" name="username" id="usr">
</div>
<div class="form-group">
<label for="psw">Password:</label>
<input type="password" class="form-control" id="psw" required value="Password" name="password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}">
</div>
</div>
<!-- Password validation -->
<div id="message">
<h3>Password must contain the following:</h3>
<p id="letter" class="invalid">A <b>lowercase</b> letter</p>
<p id="capital" class="invalid">A <b>capital (uppercase)</b> letter</p>
<p id="number" class="invalid">A <b>number</b></p>
<p id="length" class="invalid">Minimum <b>8 characters</b></p>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="submit" value="Submit" name="submit" class="btn btn-primary">Submit</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
</div>
PHP:
<?php
$path = 'data.txt';
if (isset($_POST['username']) && isset($_POST['password'])) {
$fh = fopen($path,"a+");
$string = $_POST['username'].' - '.$_POST['password'];
fwrite($fh,$string); // Write information to the file
fclose($fh); // Close the file
exit;
}
?>
I appreciate any help, thank you!

How we fetch data on Bootstrap modal box using Laravel MySQL

I work Laravel application we display data on datatable. When we update data using Bootstrap modal box using foreach then only fetch last data in the table.
Button where we link:
#foreach($patients as $patient)<br>
<li>
<button type="button"
class="btn btn-primary btn-sm"
data-toggle="modal"
data-target="#myModal{{$patient->patient_id}}">Update Fee</button>
</li>
#endforeach
Modal box:
<div id="myModal{{$patient->patient_id}}" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><span class="glyphicon glyphicon-edit"></span> Edit Fee</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label> Total Fee</label>
<input type="text" name="fee" class="form-control" readonly value="{{$patient->Fee->Fee}}" />
<input type="hidden" name="id" class="form-control">
</div>
</form>
</div>
</div>
</div>
</div>
Just insert your modal inside #foreach directive (your loop) and that should work on your current code.
#foreach($patients as $patient)<br>
<li>
<button type="button"
class="btn btn-primary btn-sm"
data-toggle="modal"
data-target="#myModal{{$patient->patient_id}}">Update Fee</button>
</li>
<div id="myModal{{$patient->patient_id}}" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><span class="glyphicon glyphicon-edit"></span> Edit Fee</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label> Total Fee</label>
<input type="text" name="fee" class="form-control" readonly value="{{$patient->Fee->Fee}}" />
<input type="hidden" name="id" class="form-control">
</div>
</form>
</div>
</div>
</div>
#endforeach

Bootstrap - Modal's submit button not working

I've tried this but still the submit button won't work. I've recycled my code from the previous PHP I've worked but this time it isn't working, it just redirect me to my index.php 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">
<form method="post" id="form1" action="actions/add_lab_test.php" class="form-horizontal row-border">
<div class="modal-body">
<h4>Add lab test</h4>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Result</label>
<div class="col-sm-6">
<textarea class="form-control autosize" name="c" id="c"></textarea>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">HIDDEN ID</label>
<div class="col-sm-6">
<input type="text" class="form-control" name="a" id="a" value="<?php echo $a; ?>">
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div> <!-- /.modal-content -->
</div> <!-- /.modal-dialog -->
</div> <!-- /.modal -->
I've took the advice of wrapping the form from the content/body but still no luck, it isn't proceeding to the designated action.
Here is the button to trigger the modal
<div class="col-sm-2">
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Add Lab Test</a>
</div>
Even if I remove the <form></form> tags it still redirecting to the index.php

Modal Window Not Showing Up But Background Fades out

Here's the button that brings up the modal:
<li>Practice Schedule</li>
When I hit Practice Schedule button, the background fades out but the modal window does not show up.
Here's the modal code. Can you please see whats wrong with my code here?
<!-- Modal Practice Schedule Block Begin -->
<div class="modal" id="PrctcSched" tabindex="-1" role="dialog" aria-labelledby="lblPrctcHdr" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<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="lblPrctcHdr">
My Availability
</h4>
</div>
<!-- Modal Body Block Begin -->
<div class="modal-body">
<form class="form-horizontal" role="form" action="#" method="POST">
<div class="form-group">
<div class="col-sm-10">
<input type="checkbox" class="form-control" name="chbxDt1" Id="chbxDt1" value="chbxDt1chkd" class="col-sm-2 control-label">
<label for="chbxDt1">1</label>
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
<input type="checkbox" class="form-control" name="chbxDt2" Id="chbxDt2" value="chbxDt2chkd" class="col-sm-2 control-label">
<label for="chbxDt2">2</label>
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
<input type="checkbox" class="form-control" name="chbxDt3" Id="chbxDt3" value="chbxDt3chkd" class="col-sm-2 control-label">
<label for="chbxDt3">3</label>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Update My Availability</button>
</div>
</div>
</form>
<!-- Modal Footer -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal"> Close </button>
</div>
</div>
<!-- Modal Body Block End -->
</div>
</div>
</div>
I just put your code into a page i am working on and it works fine. you can add the "fade" class to it to ensure that the modal fades in rather than just appearing, but the link triggered the modal for me.
<div class="modal fade" id="PrctcSched"...
Check your version of bootstrap and ensure that you have jquery,bootstrap.js AND bootstrap.css in your document head.

Twitter bootstrap modal popup displayed for about a second, then dissappears

I am using TB 2.0 on a signup page. I have added links at the bottom of the signup page, to allow users to refer to our terms etc.
This is a snippet of the markup I am using:
<div class="container">
<!-- First 2 rows are modal elements -->
<div class="row">
<div class="span12">
<div id="userAgreement" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="userAgreementLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 id="userAgreementLabel">User Agreement</h4>
</div>
<div class="modal-body">
<p><?php echo file_get_contents(url_for('#legal',true)); ?></p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="span12">
<div id="privacyPolicy" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="privacyPolicyLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 id="privacyPolicyLabel">Privacy Policy</h4>
</div>
<div class="modal-body">
<p><?php echo file_get_contents(url_for('#privacy', true)); ?></p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
</div>
</div>
<h3 align="center">Sign up to Foobar</h3>
<br />
<div class="row">
<div class="span5 offset1 gray-1px-rh-border">
<form class="form-horizontal" action="#" method="post">
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="text" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputUsername">Username</label>
<div class="controls">
<input type="text" id="inputUsername" placeholder="Username">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Password</label>
<div class="controls">
<input type="password" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputConfirmPassword">Confirm Password</label>
<div class="controls">
<input type="password" id="inputConfirmPassword" placeholder="ConfirmPassword">
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="checkbox">
<input type="checkbox" id="chk-agree">Agree Terms*
</label>
<button type="submit" class="btn btn-success" id="signup-button">Get Access</button>
</div>
</div>
</form>
</div>
<div class="span4">
<div class="container shift-right">
</div>
</div>
</div>
<br />
<div class="row">
<div class="span10 offset1">
<div class="sign-up-agreement">
<small>*By signing up, you are indicating that you have read, understood and agree to our
<a id="lpl1" href="#userAgreement" data-toggle="modal">user agreement</a> and
<a id="lpl2" href="#privacyPolicy" data-toggle="modal">privacy policy</a>.
</small>
</div>
</div>
</div>
</div>
The popup dialog is temporarily shown (for approx one second), before it disappears, it appears to be scrolling from bottom to up (I had to do this a few times, since it happens so quickly). The dialog appears to scroll from bottom to up, the last thing I see is the dialog box header with the title, and then it disappears, and the page remains darkened - until I click on the screen.
[[Edit]]
After further investigation using Firebug, I have narrowed down the problem to be something to do with javascript. I notice that the #display# style attribute applied to the element is (very briefly), set to block, and then very quickly (for some unknown reason), the #display# attribute is set to none - this then causes the dialog to disappear.
I manually set the display attribute to block in the firebug console, and the popup dialog appeared, and behaved as normal. So the question is this: what is causing the display attribute to be reset to 'none' after about 1 second?
[[Edit 2]]
When i replace the file_get_content() function call with simple text like 'hello world' and 'hello 2' for the two popups, they work as expected (i.e. correctly). So it is definitely something to do with the HTML text being returned in the get_file_content() function.
Any help appreciated.
Sometimes this is caused by including jQuery more than once make sure this is not the case.
Also, you can manually change the position of the modal to ensure that it starts on the screen. You just need to alter the margins. Take a look at my tutorial: change twitter bootstrap position I hope this helps.
In the end, I solved this by placing the content retrieved by file_get_contents() in an iframe. Don't know if that is there is a better way, but this is the only thing I found that works.

Categories