So this is the method that I am using and it's kinda working, but I don't think that it's best practice and just seems kinda off, so I wanted to see if someone knew a much better and/or cleaner method on importing HTML markup that will be located in two locations.
So let's say that I have my main index.php file:
$mode = get_field('mode');
<?php if ($mode == 'page'): ?>
<div class="container my-4 <?= $class_name?>">
<div class="row justify-content-md-center pardot-form">
<div class="col-md-6 col-lg-6">
<h3>Pardot Form</h3>
<?php include_once 'pardot-form.php'?>
</div>
</div>
</div>
<?php else: ?>
<div class="modal_element" data-toggle="modal" data-target="#modal-<?= $id ?>" data-cookie="<?= get_field('cookie'); ?>"></div>
<div class="modal fade" id="modal-<?= $id ?>" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Pardot Form</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">✕</span>
</button>
</div>
<div class="modal-body">
<?php include_once 'pardot-form.php'?>
</div>
</div>
</div>
</div>
<?php endif; ?>
Then I am calling <?php include_once 'pardot-form.php'?> in two locations because I don't want to repeat the same HTML output twice, so the pardot-form.php file contains the following:
<form class="form">
<div class="form-group">
<label for="formGroupExampleInput">First Name:</label>
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input placeholder">
</div>
<div class="form-group">
<label for="formGroupExampleInput2">Last Name:</label>
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input placeholder">
</div>
<div class="my-3">
<button type="submit" class="btn btn-primary" disabled>Submit</button>
</div>
</form>
Is there a cleaner way to "Grab HTML markup and append it in two locations", the only difference is the outer layer where one conditional is a container block and another is a modal.
I can even delete the pardot-form.php file and add in the HTML markup in the same index.php file if you know of a cleaner way.
All help is appreciated!
You could save include_once 'pardot-form.php' to a variable under the $mode = get_field('mode'); declaration and then use it wherever you want.
Related
So, i want to make a login form using modal. i have been searching a solution of this, and i still confusing(because all the solutions in english and i'm not really good in english). and didn't know how the code of solution works. So, maybe someone can help me by fix some line of my code and explain me how it works? please?
This is my file that contain the modal
<!-- Modal Login-->
<div class="modal fade" id="loginForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<!--Content-->
<div class="modal-content form-elegant">
<!--Header-->
<div class="text-center">
<h3 class="modal-title w-100 dark-grey-text font-weight-bold mt-5" id="myModalLabel"><strong>Login</strong></h3>
</div>
<!--Body-->
<div class="modal-body mx-4">
<!--Body-->
<form class="form" method="POST" action="#">
{{ csrf_field() }}
<div class="md-form">
<input type="email" name="email" id="inputEmail" placeholder="Email" required="#" autofocus>
</div>
<div class="md-form">
<input type="password" name="pass" id="inputPass" placeholder="Password" required>
</div>
<input type="submit" class="logbtn" value="Login">
<input type="button" data-dismiss="modal" class="cancelbtn" value="Cancel">
</form>
</div>
<!--Footer-->
<div class="modal-footer mx-5 pt-3 mb-1">
<p class="font-small grey-text d-flex justify-content-end">
Don't have an account? Sign Up
</p>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!-- Modal Login-->
<!-- Modal Register-->
<div class="modal fade" id="registerForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<!--Content-->
<div class="modal-content form-elegant">
<!--Header-->
<div class="text-center">
<h3 class="modal-title w-100 dark-grey-text font-weight-bold mt-5" id="myModalLabel"><strong>Register</strong></h3>
</div>
<!--Body-->
<div class="modal-body mx-4">
<!--Body-->
<form class="form" method="POST" action="#">
{{ csrf_field() }}
<div class="md-form">
<input type="text" name="name" id="inputName" placeholder="Name" required autofocus>
</div>
<div class="md-form">
<input type="email" name="email" id="inputEmail" placeholder="Email" required="#">
</div>
<div class="md-form">
<input type="password" name="pass" id="inputPass" placeholder="Password" required>
</div>
<div class="md-form">
<input type="password" name="pass_conf" id="inputPassConf" placeholder="Password Confirmation" required>
</div>
<input type="submit" class="logbtn" value="Register">
<input type="button" data-dismiss="modal" class="cancelbtn" value="Cancel">
</form>
</div>
<!--Footer-->
<div class="modal-footer mx-5 pt-3 mb-1">
<p class="font-small grey-text d-flex justify-content-end">
Already have an account? Login
</p>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!-- Modal Register-->
This is my controller (i don't know what i have to do)
class AuthController extends Controller
{
public function login() {
//
}
public function postLogin(Request $request) {
//
}
public function postRegister(Request $request) {
//
}
}
and this is my route (this route is still wrong)
Route::get('/login' , 'AuthController#login');
Route::post('/', 'AuthController#postLogin');
Route::post('/', 'AuthController#postRegister');
Thanks for your time!!
You could use Laravel's built-in authentication system
In Laraval 5.8:
php artisan make:auth
With 6.0 see https://stackoverflow.com/a/57790856/10558454
You need to investigate Blade.
Start by creating your front-end html in a file in your views folder. Perhaps login.blade.php
In this file you can have your login page, perhaps with a modal, if you want this modal to launch on page load, take a look here: Launch Bootstrap Modal on page load
Then, to display this blade file from your route, in your controller use:
return view(“login”)
This will display your login.blade.php file.
Further from this, you can use blade to do templating and streamline your front-end design immensely.
A very good boilerplate for a login system is Laravel’s built in auth system, to implement this system on a new project, run from your project folder:
php artisan make:auth
Investigate the code and change to your liking, once you understand how it works, you can tap into it through your own front-end.
Good luck
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
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.
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">×</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>
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.