I'm learning PHP and if I use java script I'll get a 0; hence the restriction.
So I need to pass a unique $row["userName"] from anchor tag to modal.
// I can use my $row["userName"] here to give each profile, an edit button unique to them.
echo '<span class="pull-right text-muted">
<a class="" href="#" data-toggle="modal" data-target="#adminEdit" onclick="" >
<i class="fa fa-edit"></i> Edit user
</a>
</span>';
And I need that $row[userName] displayed here in the username input:
echo '<div id="adminEdit" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<form role="form" method="post" action="profiles.php?from=pictureUpload" enctype="multipart/form-data">
<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">Admin editor</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label>Username</label>
<input class="form-control disabled" disabled value=" --- RIGHT HERE ---">
</div>
// More stuff below omited for sizing reasons.
Currently I'm looking into taking my modal OUT of echo; but then I stll have no idea how to pass the $row[] from tag to the modal
Any ideas, would be appreciated as I'm all out myself. ~Thanks :)
Related
I have content from a loop and I'm displaying title and image in a grid boxes.
In addition, in every box of content I have View more button and when a user clicks on, it shows the full content (title, image, body) in popup.
I have tested with Bootstrap modal and the popup functionality works but when I click the View more from the first box or the second, the popup always shows the content from the first box.
How can I fix this, so when a user clicks on the "View more" from the second box, to show the full content from the second box?
Every content has also ID parameter from the database, for example the first box has ID 1 and the second box has ID 2, so how can I filter that popup by the ID of the content?
Here's my code:
#foreach($drivings as $driving)
<div class="col-sm-3">
<div class="box-inner">
<div class="image">
<img class="img-fluid" src="{{ Storage::url($driving->image) }}" />
</div>
<div class="title">
{{ $driving->title }}
</div>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
View more
</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">{{ $driving->title }}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="image">
<img class="img-fluid" src="{{ Storage::url($driving->image) }}" />
</div>
<div class="modal-body">
{!! $driving->body !!}
</div>
</div>
</div>
</div>
</div>
</div>
#endforeach
You are targeting same id in each iteration #exampleModal. So, every button have same target with id #exampleModal.
So the solution is to append it with current driving id.
Assuming that you are using id for toggling modal, You can do something like this in button:
data-target="#exampleModal{{driving->id}}"
And in modal:
id="#exampleModal{{driving->id}}"
It's a pretty common problem when using foreach in blade
The problem is all your modal div have the same id so your code detects only the first one with it. You have to give different id to all your modal div and the button view more.
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal-{{ $driving->id }}">
View more
</button>
<div class="modal fade" id="exampleModal-{{ $driving->id }}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel-{{ $driving->id }}">{{ $driving->title }}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="image">
<img class="img-fluid" src="{{ Storage::url($driving->image) }}" />
</div>
<div class="modal-body">
{!! $driving->body !!}
</div>
</div>
</div>
I have included a button to open bootstrap modal form with dynamic heading. If i click the button from any of the item it always showing the first data title.
Ex MySQL table Name - item
Id title amount
1. abc 1245
2. xyz 3344
3. xxx 4455
4. zzz 5566
In the page i am displaying all the rows from the above table, its working as expected.
Now i need a button to open a bootstrap modal form with dynamic heading for each item, but its always showing the first row heading in the modal form.
Expected result
If i click a button for 'xyz' row, currently its showing the heading as 'abc' instead of 'xyz'
HTML/PHP code
<div class="detail">
<h1 class="project-title">
<?php echo $row['title]; ?>
</h1>
<button class="btn btn-success btn-xs small text-white mb-2 desktop-img"><i class="fa fa-envelope pr-2" aria-hidden="true"></i>Email</button>
</div>
Modal form code
<div class="modal fade" id="modalContactForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-sm modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header text-center">
<h6 class="modal-title w-100 font-weight-bold">Enquiry Form</h6>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body mx-3">
<h1 class="project-title"><?php echo $row['title']; ?></h1>
<div class="md-form mb-1">
<i class="mt-2 fa fa-user prefix grey-text"></i>
<input type="text" id="form34" class="ml-2 form-control validate" placeholder="Your Name">
<!-- <label data-error="wrong" data-success="right" for="form34">Your name</label> -->
</div>
</div>
<div class="modal-footer d-flex justify-content-center">
<button class="btn btn-info">Send <i class="fa fa-paper-plane-o ml-1"></i></button>
</div>
</div>
</div>
</div>
All your modals have the same id attribute. You'll need unique IDs for each modal and then specify this ID in the button as well.
HTML/PHP Code
<i class="fa fa-envelope pr-2" aria-hidden="true"></i>Email
Modal Form Code
<div class="modal fade" id="modalContactForm<?= $row['id'] ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<!--Rest of your modal code -->
</div>
This solution assumes that you have an id field on the rows. If you do not, replace that with whatever unique identifier you have for each row.
I am looping a dynamic PHP value and also a button that is linked with a modal form.
The problem is that im currently setting the data-target to one of the dynamic values being looped but it never gets to work.
This is the PHP+HTML code being looped:
while($row = mysqli_fetch_assoc($seleccionar_requerimientos)){
$req_id = $row['req_id'];
?>
<tr>
<td><?php echo "{$req_id}" ?></td>
<!-- Here we place the data-target to dynamic value -->
<td><p data-placement="top" data-toggle="tooltip" title="Editar"><button class="btn btn-primary btn-xs" data-title="Edit" data-toggle="modal" **data-target="#<?php echo $req_id; ?>" ><span class="fas fa-edit"></span></button></p></td>
<!-- Here we set the dynamic ID linked to previous trigger -->
<div class="modal fade" id="<?php echo $req_id; ?>" tabindex="-1" role="dialog" aria-labelledby="edit" 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"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
<h4 class="modal-title custom_align" id="Heading">Editar Requerimiento</h4>
</div>
<div class="modal-body">
<div class="form-group">
<textarea rows="2" class="form-control" placeholder="<?php echo $req_desc_corta; ?>"></textarea>
</div>
</div>
<div class="modal-footer ">
<button type="button" class="btn btn-warning btn-lg" style="width: 100%;"><span class="fas fa-wrench"></span> Actualizar</button>
</div>
</div>
</div>
</div>
<?php } ?>
Where am I wrong? I can see on the site source code that both values are currently properly set but modal still not showing.
If values on both data-target and ID are dynamic, they are properly displayed on site source code but the modal never triggers.
If values are manually writen, the modal pops up correctly which confirms modal code is working, however since its not a dynamic value it opens up the same form for every looped item, which is the reason to write a dynamic value on them.
This is the HTML output I get on the source code whiledisplaying dynamic values:
<!-- Echo en bucle de los botones de editar el requerimiento -->
<td><p data-placement="top" data-toggle="tooltip" title="Editar"><button class="btn btn-primary btn-xs" data-title="Edit" data-toggle="modal" data-target="#9" ><span class="fas fa-edit"></span></button></p></td>
<!-- Pop Up con el form de editar el requerimiento -->
<div class="modal fade" id="9" tabindex="-1" role="dialog" aria-labelledby="edit" 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"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
<h4 class="modal-title custom_align" id="Heading">Editar Requerimiento</h4>
</div>
<div class="modal-body">
<div class="form-group">
<textarea rows="2" class="form-control" placeholder="dsfgdfg"></textarea>
</div>
</div>
<div class="modal-footer ">
<button type="button" class="btn btn-warning btn-lg" style="width: 100%;"><span class="fas fa-wrench"></span> Actualizar</button>
</div>
</div>
</div>
</div>
Weirdly, if I change
data-target="#<?php echo $req_id; ?>"
To
data-target="#9"
And I also change
<div class="modal fade" id="<?php echo $req_id; ?>" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">
To
<div class="modal fade" id="9" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">
Then it works (with static values)
I think using only numbers for the id attribute is a bad idea. Please, use some string before the number. From https://www.w3schools.com/tags/att_global_id.asp :
Must contain at least one character
Is it possible that your code is generating duplicate values for $req_id?
If the code works when you manually put the IDs in place then the problem is likely the Ids and there aren't many ways this could be wrong. Either there are duplicate IDs or there's some other issue with the way they are being output. Can you add the source code of the whole page? Does you console warn you about duplicated IDs?
I have this link where i open modal:
<li><i class="fa fa-times"></i></li>
And i have modal in seperate page modals.blade.php
<div class="modal fade modal_form" id="deleteProperty{{$property->id}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel5" aria-hidden="true">
<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="exampleModalLabel5">Are you sure you want to delete this property?</h4>
</div>
<div class="modal-body">
<form method="POST" action="{{ route('user.property.delete',[$user->id,$property->id])}}">
<div class="form-group">
<div class="left-btn">
<button type="button" class="btn btn-primary" data-dismiss="modal">No</button>
</div>
<div class="right-btn">
<button type="submit" class="btn btn-primary">Yes</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
How can i pass this parameter ($property->id) to modal so when user click on specific property, to delete that property?
You need to pass the variables you want to use in the included views.
Example:
#include('standardUser.includes.modals', [ "property" => $property ])
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>