I'm simply trying to launch a Bootstrap 4 modal from my Javascript code in my Vue 3 app. Every time the execution reaches the modal launch line however, I get this error: $ is not defined at eval
The other common questions about this seem to reference not including jQuery into the project more than once, i'm not sure if that's the issue causing the problem i'm seeing.
Code below, what am I doing incorrectly to launch the Bootstrap modal?
Html
<!-- Modal -->
<div
class="modal fade"
id="errorModal"
tabindex="-1"
role="dialog"
aria-labelledby="exampleModalCenterTitle"
aria-hidden="true"
>
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">
{{ modalTitle }}}
</h5>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
{{ modalMessage }}
</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>
Javascript
<script>
export default {
methods: {
doNetworkedThings(requestHeader, profile) {
let that = this;
axios
.post(
"http://localhost:8080/endpoint",
profile,
requestHeader
)
.then(function(response) {
console.log("Success");
})
.catch(function(error) {
//show error modal
$('#errorModal').modal({ //TODO: fails on this line
keyboard: false,
backdrop: "static"
})
});
},
},
};
</script>
you can add this
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
its works for me
Related
I am trying to display a modal on a button click in an angular application. I installed bootstrap and wrote the code specified in the bootstrap tutorial. The modal is available on click as its available during inspecting the html of browser but not showing on the browser. However changing the modal elements display property from block to contents displays the modal. Please find the current code below.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<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">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>
The modal is being displayed in normal html and css not in angular
Try with below code
IN your HTML file
<button type="button" class="btn btn-info btn-lg" (click)="openModal()">click to open</button>
<div class="modal" tabindex="-1" role="dialog" [ngStyle]="{'display':display}">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Model Title</h4>
<button type="button" class="close" aria-label="Close" (click)="onCloseHandled()"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<p>Model body text</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" (click)="onCloseHandled()" >Close</button>
</div>
</div>
</div>
</div>
In your TS(component) file
create 2 method
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styles:[
`.modal{background: rgba(0,0,0, .5);`
]
})
export class AppComponent implements OnInit {
display = "none";
ngOnInit() {
}
openModal() {
this.display = "block";
}
onCloseHandled() {
this.display = "none";
}
}
Hope this will help you
let me know if you have any query
thanks
Add the code below in your index.html file -> within the body section.
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"></script>
Not sure whats going on here but when I click the button calling a function it won't show my modal.
The function call itself works because the commented out alert will show if I uncomment it. How do I need to be showing the modal within this method?
No errors in the console either
<button #click="eventClick"></button>
<div id="example-modal">
<!-- Modal -->
<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">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">
hihi
</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>
</div>
eventClick: function(e) {
var eventObj = e.event;
//alert('Clicked ' + eventObj.title);
let element = this.$refs.modal.$el;
$(element).modal('show');
It's hard to tell based on the code presented. The modal ref isn't defined.
In general, you really don't want to mix JQuery into Vue - especially when JQuery is modifying the state of a component (in this case the visual state: shown/not shown).
The preferred way to render a modal is with a standard v-if, as shown in this example.
on my website after clicking button I want to display new form which will allow users to add opinion. Im not sure in which way I should add jquery script to my project. I tried to it on simple html site and it works, but I couldnt do the same with flask app. Here is my code:
% extends "bootstrap/base.html" %}
{% block content %}
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css">
<script src="http://ajax.googleapis.com ajax/libs/jquery/1/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.js"></script>
<script type="text/javascript">
$(function () {
$("#btnclick").click(function () {
$("#divpopup").dialog({
title:"Dodaj opinie",
width: 430,
height: 200,
modal:true,
buttons: {
Close:
function(){
$(this).dialog('close');
}
}
});
});
})
<div id="divpopup" style="display: none">
Here will be form
</div>
<button type="button" id="btnclick">Add opinion</button>
{% endblock %}
And after clicking on the button nothing happend. I use bootstrap and jinja2, so should I use other contents to add scripts?
You might consider using a Bootstrap Modal for this as you said you're using Bootstrap in the project.
This is a very simple example copied from their website:
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<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">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">
INSERT FORM HERE
</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 you're using Bootstrap 4 you should be able to copy this right in and change the IDs to match what you want.
Link to documentation: https://getbootstrap.com/docs/4.0/components/modal/
I am displaying a dialog by using HTML directly
<!-- Dialog -->
<div class="modal fade" id="exampleModalCenter" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="exampleModalLongTitle">Something went wrong</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h5 class="modal-title" id="exampleModalLongTitle">Maximum 10 messages selected</h5>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Ok</button>
</div>
</div>
</div>
</div>
<button data-toggle="modal" data-target="#exampleModalCenter">RunIt</button>
but I would like to do something previously so I would like to execute data-toggle="modal" data-target="#exampleModalCenter" by javascript using (click)
So basically this would be the steps:
1- (click)="test()"
2- execute data-toggle="modal" data-target="#exampleModalCenter" by javascript in test()
to get the DIV that contains it, I have tried:
test(){
var dialog= <HTMLDivElement>document.getElementById(exampleModalCenter);
}
but I can not find the exampleModalCenter
you should be using attr.data-target
<button data-toggle="collapse"
[attr.data-target]="'#exampleModalCenter">RunIt
</button>
Firstly, you must add click method 'test' to button. Change your modal's class name as 'modal fade'. And after, your ts file must be like this:
#ViewChild('exampleModalCenter') exampleModalCenter;
test() {
this.exampleModalCenter.nativeElement.className = 'modal fade show';
}
I am trying to use ckeditor inline with knockoutjs in a modal dialog. But it is not working. Ckeditor all buttons are diasbled. It is not working only chrome browser. It is working on firefox and ie. I found a solution but it is not great for me. Problem is about modal showing status.
<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"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" contenteditable="true" id="myModalLabel">Modal title</h4>
</div>
<div id="bodyModal" contenteditable="true" class="modal-body">
...
</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>
<button type="button" class="btn btn-default navbar-btn margin-right-button-nav" data-toggle="modal" data-target="#myModal"><span class="glyphicon glyphicon-new-window"></span> Edit Modal</button>
CKEDITOR.disableAutoInline = true;
CKEDITOR.inline('myModalLabel');
CKEDITOR.inline('bodyModal');
Here is a Fiddle
You have to use bootstrap modal events like shown.bs.modal
CKEDITOR.disableAutoInline = true;
$(document).ready(function() {
$('#myModal').on('shown.bs.modal', function () {
CKEDITOR.inline('myModalLabel');
CKEDITOR.inline('bodyModal');
})
});
Here is the updated jsFiddle : http://jsfiddle.net/8t882a2s/3/
And an other answer with more information : https://stackoverflow.com/a/25786444/4682796
// My problem was chkeditor drop down was not working propely ON IE.
this worked for me.follow below step to implement.
1. this below line of code will execute after jquery and bootstrap javascript load.
i.e
1. register the jquery version file
2. bootstrap java script load
3. then execute this code
$.fn.modal.Constructor.prototype.enforceFocus = function () {
modal_this = this
$(document).on('focusin.modal', function (e) {
if (modal_this.$element[0] !== e.target && !modal_this.$element.has(e.target).length
&& $(e.target.parentNode).hasClass('cke_contents cke_reset')) {
modal_this.$element.focus()
}
})
};