The Bootstrap button and modal code below fails when the code is placed inside ColdFusion CFOUTPUT QUERY tags.
If I move the code outside of the cfoutput query then it works well.
Obviously, the problem is with the BootStrap modal single hashtag requirement: target="#staticBackdrop" for the button.
Inside the cfoutput, coldfusion expects two hashtags. The modal does not function without the single hashtag.
Is there a work-around?
<cfoutput query="q_GetPrinters">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
DELETE
</button>
<!-- Modal -->
<div class="modal fade" name="staticBackdrop" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Delete Printer?</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<!--- <div class="modal-body">
...
</div>--->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Confirm</button>
</div>
</div>
</div>
</div>
</cfoutput>
You have to use double hashes for mentioning ids in ColdFusion like,
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="##staticBackdrop">
Reason for this double hash is, in CF hash is used for outputting as it can be enclosed with variable name. While you writing target as #staticBackDrop, it will consider it as a variable name & hashes are not enclosed properly. So you re getting error like this.
Related
I have Problem when trying to make Bootstrap Modals to show PDF Document using <embed src="./pdfFiles.pdf"></embed> Tag. I am using Bootstrap Version 4.5
When user click the button to trigger the modals, Bootstrap modals normally displays PDF document. But, The problem appear when user close the modals and show it again. instead of displaying PDF Document, modals displays blank document.
EDITED
My Code Shown below.
Bootstrap CDN
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<title>PDF Show</title>
Show the modal
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">PDF Modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<embed src="http://localhost/pdfFile.pdf"></embed>
<embed src="http://192.168.0.13/pdfFile.pdf"></embed>
</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>
I already contained the issue, The PDF Failed to display only when I use the IP address (or base_url() in Codeigniter) to fill pdf link in src="http://192.168.0.1/pdfFile.pdf"
No problem appear when I use http://localhost/pdfFile.pdf
<embed src="http://localhost/pdfFile.pdf"></embed>
<embed src="http://192.168.0.1/pdfFile.pdf"></embed>
I am building a livewire-based application which I came to a point where I need wire:click event to fire a function in the livewire component class as well as open a Bootstrap Modal.
Without the wire:click event, the Bootstrap Modal opens.
Without the Bootstrap Modal id, the wire:click event works just fine.
With both the two, the Modal opens but hides (not dismissed) forever, until I reload the page before I could do anything.
By default when you create livewire using php artisan make:livewire --name, the view part comes with <div> //comment </div> tag. So, whenever the place the Modal inside the div tag the above problem occurs.
However, if the place the Modal in outside the div tag it works fine BUT NOT RECOGNIZING THE LIVEWIRE VARIABLES
I want to know;
If the livewire doesn't support Bootstrap Modal or having conflicts with the Modal scripts.
If one event can not be fired twice at the same time (wire:click and default click event).
Why except tags are enclosed inside the <div> </div> before livewire recognizes it.
<a href="#" wire:click="edit({{ $file->id }})" class="mr-1 edit" data-toggle="modal" data-target="#editFileModal">
<i class="align-middle fa fa-edit"></i>
</a>
By adding wire:ignore.self to the root element of my modal fixed it for me.
Modal trigger button.
<button wire:click="updateModal({{ $item->id }})" type="button" class="btn btn-sm btn-label-brand btn-bold" data-toggle="modal" data-target="#updateModal"> Update</button>
Example modal dialog.
<div wire:ignore.self class="modal fade" id="kt_modal_1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New message</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient" class="form-control-label">Recipient:</label>
<input type="text" class="form-control" id="recipient" wire:model="recipient">
</div>
<div class="form-group">
<label for="message" class="form-control-label">Message:</label>
<textarea class="form-control" id="message" wire:model="message"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
You could use Alpine.js (that comes with Livewire) to fire both the wire:click and the toggle of the modal. By doing this you could even listen for the wire:click call to complete before you open the modal, if that suits you better.
<a href="#" x-on:click="$wire.edit({{ $file->id }}); $('#editFileModal').modal('show');" class="mr-1 edit">
<i class="align-middle fa fa-edit"></i>
</a>
I was having the exact same issue, here is my solution:
Instead of using the attribute data-target="#myModal" to show myModal when the button is clicked, I just use wire:click function to do that. ie:
<button class="btn btn-sm btn-danger" wire:click.prevent="myFunction({{$some_id}})">...</button>
In myFunction, do whatever you want, after that, add:
$this->dispatchBrowserEvent('openModal', ['someParameter' => 'some value']);
In the view file, add:
<script>
window.addEventListener('openModal', event => {
$('#myModl').modal('show');
//alert('parameter: ' + event.detail.someParameter);
})
</script>
See https://laravel-livewire.com/docs/2.x/events#browser for more info
<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">Order Completed</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>
{% if accepted_order %}
<div class="collapse" id="collapseAcceptedCreatorOrders">
<div class="card card-body">
<h1>Buyer: {{ accepted_order }}</h1>
<a href="{% url 'dashboard' %}">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Mark As Bought
</button>
</a>
<button>Withdraw</button>
</div>
</div>
{% endif %}
I am trying to show a modal when a user clicks a button, inside this if statement. The only issue is when the button is clicked, the modal pops up for a split second and then disappears. When I use the button outside of the if statement it works fine, but I need to use it in the if statement. How can I do this?
After some trial and error, I figured it out. When the {% url ... %} command in the template is run, apparently, that refreshes the page, which I didn't know. So, all I did was add that portion in the modal. Basically, instead of encasing the button that opens the modal (that says "Mark as Bought") in a link that runs the logic. I just put a button in the if statement that then opens the modal, and inside the modal is where the logic is run.
The following code seems ok at first but if examined in chrome debugger I see some error message "outside root element will be ignored"
The complete code is here:
JS fiddle
the template value of the Vue component certainly has only one top root containing div element, but strangely the debugger reports that it is not.
The following is the template definition part of the component:
template:
`<div class="modal fade" v-show:"visible">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<slot name="header"></slot>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<slot></slot>
</div>
<div class="modal-footer">
<slot name="footer"></slot>
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>`,
The error message disappear if I enclose the whole template with additional redundant div.
You have an error in using v-show
<div class="modal fade" v-show:"visible">
It should be:
<div class="modal fade" v-show="this.visible">
Most likely the extra : breaks the vuejs parser and ends up splitting your div declaration in two.
This is my problem:
What I'm trying to do is when I click on a model's name, I get a modal window that shows all it's attributes, like so:
However, when I click on another one, it doesn't work, no modals show up, like so:
This is my index.hbs:
<div class="row" style="text-align:center;">
{{#each model as |event|}}
<div class="col-xs-3 col-md-3">
<div class="centerBlock">
</div>
<button type="button" class="btn btn-link" data-toggle="modal" data-target="#{{event.name}}">{{event.name}}</button>
</div>
<!-- Modal -->
<div class="modal fade" id="{{event.name}}" 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">{{event.name}}</h4>
</div>
<div class="modal-body">
<p>{{event.location}}</p>
<p>{{event.roomNumber}}</p>
<p>{{event.eventDay}}</p>
<p>{{event.eventTime}}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- End Modal-->
{{/each}}
</div>
And this is my index.js:
import Ember from 'ember';
export default Ember.Route.extend({
model() {
return this.store.findAll('event');
}
});
I suppose that I'm doing my {{#each}} wrong, but I've spent about an hour on it and I can't figure it out.
Sorry this is such a dumb problem, and thanks for any direction!
The problem is your event name. You have spaces in Yoga Drop-In and later you use that as modal id attribute. You can't target model by id with spaces. You have to use another property as modal target. For example you could take model name and remove all spaces from that, or replace with dashes. It will work after you do so.