how to open a modal with id from this code
Scale Points
example modal
'''
<!-- 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>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
'''
If you want to open the modal on the current page, you can do something like this:
Open modal
and the modal should look like this:
<div class="modal-content" id="modal-<?php echo $row['id_user']; ?>">
<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>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
With the official bootstrap modal example:
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal-<?php echo $row['id_user']; ?>">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal-<?php echo $row['id_user']; ?>" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel-<?php echo $row['id_user']; ?>" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel-<?php echo $row['id_user']; ?>">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Related
I just want to ask why my reCAPTCHA is not working when my form is in the bootstrap's modal? Have you ever experienced it?
sign.php
if(empty($_POST['g-recaptcha-response']) === false){
echo "Set.";
} else {
echo "Not set.";
}
index.php
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Open form
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" 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" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<form action="sign.php" method="post">
<div class="form-group">
Name:
<input type="text" name="name" id="name">
</div>
<div class="form-group">
reCaptcha:
<div id="r1" class="g-recaptcha" data-sitekey="6Lc-xQUUAAAAAFc4apq1qbS_VI-ZTJHalsj5BGaa"></div>
</div>
</form>
</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>
..I have sign.php to check if the reCAPTCHA is working. Although it is working if I dont use modal, but when I used modal, the recaptcha validation(sign.php) is not working.
You are not submitting the value of the recaptcha to the backend i.e to php script. Your submit button should be inside </form> tag else your form will not get submitted.
check
your response to the backend---
if (isset($_POST['g-recaptcha-response'])) {
$response = $_POST['g-recaptcha-response'];
echo($response);
}
else {
echo"value is not passing to the php script";
}
Hope this helps!
<button id="showModal" type="button">Show Modal</button>
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<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">Modal title</h4>
</div>
<div class="modal-body">
<div id="captcha"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
JQUERY
$("#showModal").click(function() {
$("#myModal").modal("show");
setTimeout(function() {
createRecaptcha();
}, 100);
});
function createRecaptcha() {
grecaptcha.render("captcha", {sitekey: "6LcgSAMTAAAAACc2C7rc6HB9ZmEX4SyB0bbAJvTG", theme: "light"});
}
Example: http://fiddle.jshell.net/emilhem/Lgovn28f/4/
I would like that when clicking the button it presents the data-id in the modal.
<button data-id="$id" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">OPEN</button>
<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">
<?PHP echo $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>
I tried several tutorials and it did not work, will it be the jquery version?
How do I print the ID within the modal?
You can create an event on your button.
var myBtn = document.getElementByClassName("btn");
myBtn.addEventListener("click", function() {
var dataId = document.getElementByClassName("btn").dataset.id;
console.log(">>>>dataId: ", dataId);
document.getElementByClassName("modal-body").innerHTML = dataId;
});
I don't know what's wrong with the code, but i get the different result for the same query.
My select query (in the controller):
$this->db->select('*');
$this->db->from('vendor_location');
$query = $this->db->get();
$data['location'] = $query->result_array();
My partial view (modal bootstrap):
<div class="modal fade" id="add_driver_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" 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" id="myModalLabel">ADD DRIVER</h4>
</div>
<div class="modal-body" id='add'>
<div class="row" id="add_driver_form">
<?php var_dump($location);?>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-default" data-dismiss="modal">Close</button>
<button id="add" type="button" class="btn btn-primary btn-md" onclick=add_driver()>Add</button>
</div>
</div>
<div id="form_submit_result"></div>
</div>
</div>
<!-- Edit driver modal -->
<div class="modal fade" id="edit_driver_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" 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" id="myModalLabel">EDIT DRIVER</h4>
</div>
<form method="post" action="<?php echo base_url(); ?>portal/edit_driver">
<div class="modal-body" id='add'>
<div class="row" id="edit_driver_form">
<?php var_dump($location);?>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button id="save" type="submit" class="btn btn-primary btn-md">Save</button>
</div>
</div>
</div>
</div>
When I var_dump($location) in the add_driver_modal, I get the expected result (all records from vendor_location table). But I just get the last record (one row) in the edit_driver_modal. How could this happen?
How can I show modal with dynamic content from database in Laravel?
my view:
<li>{!! $test->test_name !!} </li>
my model:
public function show($slug)
{
$test = Test::whereSlug($slug)->firstOrFail();
return view('tests.show', compact('test'));
}
This modal I want to show on active page instead of creating new view. I guess it could be done with return view()->with but can not implement it.
You can do this trick if you want.
in your controller:
public function show($slug)
{
$test = Test::whereSlug($slug)->firstOrFail();
return view('tests.show', compact('test'));
}
and in your view:
<li><button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#yourModal"></li>
<div class="modal fade" id="yourModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" 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" id="myModalLabel">{{$test->someTitle}}</h4>
</div>
<div class="modal-body">
{{$test->someField}}
</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>
And then if you have multiple data to get, you just have to use a foreach. For example:
controller
public function show()
{
$test = Test::all();
return view('tests.show', compact('test'));
}
view:
#foreach ($test as $t)
<li><button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#yourModal{{$t->id}}"></li>
#endforeach
#foreach ($test as $t)
<div class="modal fade" id="yourModal{{$t->id}}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" 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" id="myModalLabel">{{$t->someTitle}}</h4>
</div>
<div class="modal-body">
{{$t->someField}}
</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>
#endforeach
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 -->