I'm developing website in php using codeigniter.I need to add pop window when in click "Book now" button in my view (profile.php) following code is working perfectly in HTML Page without any problem but when i mix php tags the pop up window come and disperser quickly.this is the code that i using i can't find the problem and heed quick help,Can some one explain the error in here?
this is the code that using
<button class="btn btn-danger" id="buy-btn">BOOK NOW</button>
<!-- Modal -->
<div class="modal fade" id="moreInfo" tabindex="-1" role="dialog" aria-labelledby="moreInfoLabel" aria-hidden="true">
<div class="modal-dialog">
<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="moreInfoLabel"><?php echo $package_data['PackageTitle']; ?></h4>
</div>
<div class="modal-body">
<p>Number of Peaple :<?php echo $tour_data['Visitors']?></p>
<p>Itenaries : Elephant Blues, Gallface, Brown Circus, Nelum Tower</p>
<p>Method of Travel : Taxi Service</p>
<p>Total Time Estimated : 6 Hours</p>
<hr>
<h4>Terms and Conditions</h4>
<p><?php echo $tour_data['TermsAndConditions']; ?></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary center-block">Book Now</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Try this:
<button class="btn btn-danger" id="buy-btn" onclick="$('#moreInfo').modal({show: true});">BOOK NOW</button>
Related
I was wondering if it is possible to catch a whole php page in a modal.
It is about this situation:
I have now an anchor which leads me to the page like this:
<?php echo $article['title']; ?>
How can i put the whole content of, lets say, the page post.php?id=1 in a modal like this:
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>HERE SHOULD COME THE CONTENT OP THE PHP FILE</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
in post.php; these are the lines which parse the content:
<h3> <?php echo $article['title']; ?> </h3>
<p class="content article-content"> <?php echo nl2br($article['content']); ?> </p>
Using jQuery you can do something like this:
$('#modal-body').load('/your/url/here', {var1: val1, var2: val2}, function(){
// show your modal here
});
See here for more info https://api.jquery.com/load/
I have a form that I submit using a bootstrap button, I have a modal that I link to in order to print using another button. I want the printer button to save the form like the submit button does, but instead of redirecting to another page, it should redirect to the print modal (So the print contents are up to date).
This is my code I have that submits/prints currently. If I make changes to a loaded form, the print button will only print the prior form.
<!-- Save Project -->
<div class='form-group text-center'>
<input data-loading-text="Saving Project..." type="submit" name="invoice_btn" value="Save Project" class="btn btn-success submit_btn invoice-save-btm" />
<!-- Print Project -->
<div style="position:absolute; left:500px; top:200px;"><a title="Print Invoice" class="print_class" role="menuitem" tabindex="-1" data-uuid="<?php echo isset($invoice['Invoice']['uuid']) ? nl2br( $invoice['Invoice']['uuid'] ): ''; ?>" href="javascript:;"> <i class="fa fa-print fa-4x"></i><br>Print</a></div>
</div>
</div>
Modal Print :
<!-- Modal Print -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" style="width:900px;height:auto">
<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" id="myModalLabel">Print Proposal</h4>
</div>
<div class="modal-body" id="print_content">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" id="printBtn" onclick="printInvoice('print_content')" class="btn btn-primary" data-loading-text="Printing...">Print</button>
</div>
</div>
</div>
</div>
Basically I'd like to do this:
a href=msgtest.php?the_id=$sender_id
but using this:
a href=''data-toggle='modal' data-target='#myModal30'
How can I pass data using the link that toggles the modal
HTML
<a data-toggle="modal" class="btn btn-info" href="msgtest.php?<?php the_id=$sender_id ?>" data-target="#myModal">Click me !</a>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<?php
echo $_GET["the_id"]
?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div> <!-- /.modal-content -->
</div> <!-- /.modal-dialog -->
</div> <!-- /.modal -->
First let me start by saying I know this is going to be a really basic question. I am new to PHP and struggling a little with this task.
Intro:
I am making a little app on a local WAMP server to manage a basic client database and also manage all my VHOST enntries for development. I know there are security issues with editing Windows Hosts file as I'm about to request but this will be strictly a local site.
I have the following PHP
<?php include 'template-parts/header.php' /** calling of header(to make it uniform in all template file) **/?>
<div class="container home">
<h3> Delete </h3>
<div class="btn-group">
<button data-toggle="modal" class="btn btn-primary btn-sm" name="hostsedit" data-target="#modalhost"><span class="glyphicon glyphicon-user"></span> Edit Windows Host File</button>
<button data-toggle="modal" class="btn btn-primary btn-sm" name="vhostsedit" data-target="#modalvhost"><span class="glyphicon glyphicon-trash"></span> Edit VHOST.conf</button>
</div>
<?php
// configuration
$url = 'delete.php';
$file = 'C:/Windows/System32/Drivers/etc/hosts';
// check if form has been submitted
if (isset($_POST['text']))
{
// save the text contents
file_put_contents($file, $_POST['text']);
// redirect to form again
header(sprintf('Location: %s', $url));
printf('Moved.', htmlspecialchars($url));
exit();
}
// read the textfile
$text = file_get_contents($file);
?>
<!-- Modal 1 -->
<div class="modal fade" id="modalhost" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Delete Host File Entry</h4>
</div><!-- /modal-header -->
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-md-12">
<!-- HTML form -->
<form action="" method="post">
<textarea name="text" class="form-control" rows="15"><?php echo htmlspecialchars($text) ?></textarea><br />
<p><strong>NOTE:</strong> Ensure only lines similar to <kbd>127.0.0.1 www.dev.xxxxx</kbd> are deleted</p>
</div>
</div>
</div>
</div><!-- /modal-body -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div> <!-- /.modal-content -->
</div> <!-- /.modal-dialog -->
</div> <!-- /.modal -->
<!-- Modal 2 -->
<div class="modal fade" id="modalvhost" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Delete VHOST File Entry</h4>
</div><!-- /modal-header -->
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-md-12">
<!-- HTML form -->
<form action="" method="post">
<textarea name="text" class="form-control" rows="15"><?php echo htmlspecialchars($text) ?></textarea><br />
</div>
</div>
</div>
</div><!-- /modal-body -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div> <!-- /.modal-content -->
</div> <!-- /.modal-dialog -->
</div> <!-- /.modal -->
</div>
</div>
</body>
</html>
The first modal works perfectly, I click the button <button data-toggle="modal" class="btn btn-primary btn-sm" name="hostsedit" data-target="#modalhost"><span class="glyphicon glyphicon-user"></span> Edit Windows Host File</button> and this opens up the Bootstrap Modal, presents the Windows Host file within the textarea and allows me to add and delete at will, I click the modal's save button and it works.
The question I need to acheive this same action with the second modal window however this one needs would need to edit C:/wamp/bin/apache/apache2.4.9/conf/extra/httpd-vhosts.conf'.
I simply don't know how to duplicate the first correctly working PHP to now also work with the VHOST editing requirement.
Any help or pointers would be greatly appreciated.
EDIT
Hi Neal, I tried putting your solution into place and got some errors that I'm not entirely sure how to get past...
I currently have this in my PHP file:
<div class="container home">
<h3> Delete </h3>
<div class="btn-group">
<button data-toggle="modal" class="btn btn-primary btn-sm" name="hostsedit" data-target="#modalhost"><span class="glyphicon glyphicon-user"></span> Edit Windows Host File</button>
<button data-toggle="modal" class="btn btn-primary btn-sm" name="vhostsedit" data-target="#modalvhost"><span class="glyphicon glyphicon-trash"></span> Edit VHOST.conf</button>
</div>
<?php
// check if form has been submitted
if (!empty($_POST['hostinput'])){ //i prefer to use empty rather than isset you can read about it
// configuration
$url = 'delete.php';
$file = 'C:/Windows/System32/Drivers/etc/hosts';
// check if form has been submitted
if (isset($_POST['hostinput']))
{
// save the text contents
file_put_contents($file, $_POST['hostinput']);
// redirect to form again
header(sprintf('Location: %s', $url));
printf('Moved.', htmlspecialchars($url));
exit();
}
// read the textfile
$text = file_get_contents($file);
}
else if(!empty($_POST['vhostinput'])){
// configuration
$url = 'delete.php';
$file = 'C:/wamp/bin/apache/apache2.4.9/conf/extra/httpd-vhosts.conf';
// check if form has been submitted
if (isset($_POST['vhostinput']))
{
// save the text contents
file_put_contents($file, $_POST['vhostinput']);
// redirect to form again
header(sprintf('Location: %s', $url));
printf('Moved.', htmlspecialchars($url));
exit();
}
// read the textfile
$text = file_get_contents($file);
}
?>
<!-- Modal 1 -->
<div class="modal fade" id="modalhost" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Delete Host File Entry</h4>
</div><!-- /modal-header -->
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-md-12">
<!-- HTML form -->
<form action="" method="post">
<textarea id="hostinput" name="hostinput" class="form-control" rows="15"><?php echo htmlspecialchars($text) ?></textarea><br />
<p><strong>NOTE:</strong> Ensure only lines similar to <kbd>127.0.0.1 www.dev.xxxxx</kbd> are deleted</p>
</div>
</div>
</div>
</div><!-- /modal-body -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div> <!-- /.modal-content -->
</div> <!-- /.modal-dialog -->
<!-- Modal 2 -->
<div class="modal fade" id="modalvhost" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Delete VHOST File Entry</h4>
</div><!-- /modal-header -->
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-md-12">
<!-- HTML form -->
<form action="" method="post">
<textarea id="vhostinput" name="vhostinput" class="form-control" rows="15"><?php echo htmlspecialchars($text) ?></textarea><br />
</div>
</div>
</div>
</div><!-- /modal-body -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div> <!-- /.modal-content -->
</div> <!-- /.modal-dialog -->
</div> <!-- /.modal -->
</div>
And the error I get on the second call is:
Notice: Undefined variable: text in C:\Users\xxx\xxx\xxx\devlogs\delete.php on line 116
<button class="btn btn-primary btn-sm" data-target="#myModal1" data-toggle="modal" type="button"> Edit</button> <!-- first button for the first modal-->
<button class="btn btn-primary btn-sm" data-target="#myModalA1" data-toggle="modal" type="button"> Comment</button> <!-- second button for the second modal-->
<div id="myModal1" class="modal fade bs-example-modal-lg" aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1">
<div id="myModalA1" class="modal" aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1">
This code seems similar to your code but im not too sure if there is some differences (this one i am 100% sure that its working perfectly fine).
Now for your question where you want to submit the form for the second modal. There are many ways to handle this ( like using ajax and saving everything without the need of forms or refreshing the page.) but since you said you are new to php and you already started in this way so... what i can suggest is that....
1) for every input you have you must give it an id and name. so your inputs should look like this (you can set the same name and id for the same field but every field must be unique):
<textarea class="form-control" rows="15" id="hostinput" name="hostinput"></textarea>
<textarea class="form-control" rows="15" id="vhostinput" name="vhostinput"></textarea>
2)Then in your php code you type:
// check if form has been submitted
if (!empty($_POST['hostinput'])){ //i prefer to use empty rather than isset you can read about it
// save the text contents
file_put_contents($file, $_POST['text']);
// redirect to form again
header(sprintf('Location: %s', $url));
printf('Moved.', htmlspecialchars($url));
exit();
}
esleif(!empty($_POST['vhostinput'])){
//SAVE THE VHOST
}
This way what you are doing is whenever a submit button pressed you try and check the two values and save them again both of them.
WARNING: this method is a bit dangerous.... lets say that the user edited the first text but then he clicked cancel.... then edited the second text then he clicked submit for the second text.... you will actually save both of them....
The way i usually do this is by using javascript and ajax so i dont have to refresh the page also...
Hope i helped....
I have my html code as:
<button class="btn btn-default" id="openForm">
New
</button>
<!-- Modal -->
<div class="modal fade hide" id="formModal">
<div class="modal-header">
<h4>
Form
</h4>
</div>
<div class="modal-body" id="formModalBody">
</div>
<div class="modal-footer">
Close
</div>
</div>
My Java script reads as:
$(document).on('click', '#openForm', function(e) {
e.preventDefault();
$("#formModalBody").html("");
$("#formModal").modal('show');
$.post('index.php/customers/view/-1/',
{id: -1},
function (html) {
$("#formModalBody").html(html);
}
);
});
I am using Twitter Bootstrap & Codeignitor. The post url above is index.php/Controller/function
When I am clicking on the button; I am not able to see the Bootstrap Modal. The page fades in, but there is no modal visible.
this is for bootstrap 3 and can be triggered by html alone without javascript it will run
Launch demo modal
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<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">Modal title</h4>
</div>
<div class="modal-body" id="formModalBody">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- For javascript -->
$.post('index.php/customers/view/-1/',
{id: -1},
function (html) {
$("#formModalBody").html(html);
}
);
You should use anchor link instead of button, it will work default settings
<a href="/model_link" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</a>
The href link response code will append in
<div class="modal-body" id="formModalBody">
<!-- modal body -->
</div>