i've some problem that make make head feels so heavy... i've searched for the answer in this forum, but the problem still not solve.
my problem is i've a button that link to modals. when first time after the page refreshed the modal open while the button clicked. but not for the second time.
i've check the log and the log said
TypeError: $(...).modal is not a function[Learn More].
if i refreshed the page, it will only work once, and the second click of the button, the modals not open again...
this is my button HTML view code..
<button class="btn btn-info btn-sm btn-labeled" type="button" id="tambahUser" data-toggle = "modal" value="<?= Url::to(['/module/create'],true)?>">
this is my modal
<div id="modalSignUpSm" tabindex="-1" role="dialog" class="modal fade">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header bg-info">
<button type="button" class="close" data-dismiss="modal" id="tutupModal">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title">Colored Header Modal</h4>
</div>
<div class="modal-body">
<div id="modalContent"></div>
</div>
</div>
</div>
</div>
and this is my js code that responsible for handling click event of the button
$('#tambahUser').click(function(event){
$('#modalSignUpSm').modal({
backdrop: 'static',
keyboard: false,
})
.modal('show')
.find('#modalContent')
.load($(this).attr('value'));
});
$('#tutupModal').click(function(){
$('#modalSignUpSm').modal('close');
});
this is my controller (i'm using Yii2) of Module/create
public function actionCreate()
{
$model = new Module();
if ($model->load(Yii::$app->request->post()) && $model->save()) {
return $this->redirect(Url::to(['/paneladm/pengaturan/module',true]));
} else {
return $this->renderAjax('create', [
'model' => $model,
]);
}
}
My Question is why the modals only open once and after that, the button stuck..? how to resolve that...
Note: - i'm new on jQuery, and i will very thanks for every answer.
- i've search on this forum and try to resolve with create a button and every this button clicked will be firing the .modal('close') but still not work
You should either use Bootstraps data-attributes to trigger the modal on and off, or use trigger via javascript manually. Right now you are trying to do both. See this example.
So I would remove the bootstrap data-attributes and then make sure your bootstrap script is loaded before your own javascript.
Related
For my project, I want to implement a modal. I am using Bootstrap 4. The modal should work as following:
When I press the button in the first .html page, the button should redirect me to a second .html page, meanwhile open a modal in that second .html page as a welcoming.
So the modal in that case is like a welcoming message as a popup box.
To make things clear. The button "code" is in the first .html file, the modal "code" is in the second .html file.
Button:
<a href="index.html"><button class="btn btn-primary btn-lg btn-block text-uppercase" type="button"
data-toggle="modal" data-target="#modalLogin">Prijavi se</button></a>
Modal:
<div class="modal fade" id="modalLogin" tabindex="-1" role="dialog" aria-labelledby="modalLoginLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalLoginLabel">Pozdravljeni!</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Dobrodošli v digitalnem gradbenem delovnem listu.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Nadaljuj</button>
</div>
</div>
</div>
</div>
I tried everything. from id's, to trying to relocate the code, to trying to find another solution, with JavaScript, but no luck so far.
A click on your <a> cannot open a modal in another page that is about to be opened. Instead, what you do is you slightly modify the href of your <a>, for example: .
Then, in your JS (that is being loaded with index.html) you can check if there is a 'welcome' in your URL when the user navigates to the page. If there is, you trigger the modal to show. It would look something like this:
$(document).ready(function() {
if (window.location.href.indexOf("welcome") > -1) {
$("#modalLogin").modal("show");
}
});
This way, when the user navigates to index.html the modal doesn't show, but if the user clicks on your button, the modal will be displayed because the URL will contain welcome.
I'm using session storage to show and hide a modal when loading the page for the first time. I don't know how to use cookies so I just use session storage.
In the modal, I change the header and the close button when you close it for the first time, then is accessible as a "help modal" instead of "getting started".
I want to prevent to close the modal with esc if the session storage is not set up and is in "getting started" mode, but when you close the modal and you reopen it as a "help modal" enable the esc event.
At the moment I make it work at 50%, first time you can't use esc but if you open it as a "help" you still can't use esc, although, if you reload the page esc it works,
Here is the else part of my code, effective when the session storage is not setup:
} else {
// show the help modal
$('#help').modal({
keyboard: false
});
$('#help').modal('show');
$('#help').on('hidden.bs.modal', function (e) {
keyboard: true
})
}
The documentation (https://getbootstrap.com/docs/4.0/components/modal/#events)
said that the .on('hidden.bs.modal' event is fired when the modal has finished being hidden from the user.
Which event I have to use to make it works as I want?
As it seems, you cannot simply re-configure an already initialized modal by supplying new options object to it. Meaning that if you do the following:
$('#help').modal({
keyboard: false
});
$('#help').modal({
keyboard: true
});
…than the latter statement won't have any effect.
So, in order to overcome this, I would suggest to destroy the first modal –the one with keyboard: false– and create a new modal that listens to keyboard events too.
Check the working snippet below.
Note: the first modal is created at pageload from code using keyboard: false, while consecutive modals launched by the button are set with the defaults, so with keyboard: true.
// } else {
// show the help modal
$('#help').modal({
keyboard: false
});
// Note the `one` binding
$('#help').one('hidden.bs.modal', function (event) {
$('#help').modal('dispose');
});
// }
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#help">
Open Help
</button>
<div id="help" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">HELP</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>This is the Help modal</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
I am trying to create a form with two 'pages' using bootstrap modal,
when the user clicks "next" it suppose to hide the modal, load new content and show it again.
but when I close the modal with .modal("hide"), it doesn't close the modal but also shows another modal and make the screen even darker.
also when I click the close button that bootstrap gives us, it shows two modals and a second later hides them, and the second time i click to open the modal i have 3 modals!
whenever i click any button in the modal it adds another modal to the page.
what can i do??
here is some code, the simplest functions that still cause that problem.
function additionFormValidate() {
if ($('#form-modal').is(':visible')) {
secondPage();
} else {
console.log("modal didnt open");
}
}
function secondPage() {
$("#form-modal").modal("hide");
}
HTML
<div class="modal fade" id="form-modal" onclick="openModal()" tabindex="-1" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content"></div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" onclick="additionFormValidate()">Next</button>
</div>
</div>
</div>
does anyone familiar with this?
sometimes you need setTimeout() to prevent javascript to working too fast.
demo: http://jsbin.com/remevolemi/3/edit?html,output
$('.btn1').click(function(){
$('#modal1').find('.modal-body').text('first content');
$('#modal1').modal('show');
});
$('.btn-next').click(function(){
$("#modal1").modal('hide'); //hide modal
setTimeout(function(){
$("#modal1").find('.modal-body').text('second content'); //change modal content
$('#modal1').modal('show');//show modal again
}, 500); //wait 0.5 sec
});
here some example for another case: http://jsbin.com/edit?html,output
I am using modal from bootstrap
<div aria-hidden="hide" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="myModal" class="modal fade" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 id="myModalLabel" class="modal-title"></h4>
</div>
<div id="myModalBody" class="modal-body modalScroll"></div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-default" type="button">Close</button>
</div>
</div>
</div>
</div>
This is my main modal box and I send some information and show modal when I need to inform user at the moment. But my idea is using this modal to show images and when user choose one I will save as avatar. So I created function like below:
<script>
$('#avatar').click(function() {
showMessage();
});
$('#eee').on('click', function() {
alert('333');
});
function showMessage(){
var txto = '<div id="eee">test me test</div>';
$('#myModalLabel').append('Coose Your avatar');
$('#myModalBody').append(txto);
$('#myModal').modal('show');
}
</script>
Now when I go on page and click div id = avatar I will see modal window but when I click: test me I have no result. So is it some way to do this?
try adding:
$('#eee').on('click', function() {
alert('333');
});
inside showMessage() ... your problem is that you have to rebind events to dynamically added elements if they are added after (document).ready or in this case the page rendering...
whenever i do this i just make a big function called rebindEvents() that I can call into to let the page know about my new items... just a warning, its not great for performance if you wind up with a lot of jquery elems you have to deal with, knockout is a much better library for dealing with dynamic html then doing it this way.
also, i'm assuming you are going to present a list of avatars, so you may want to swap eee to a class instead of id...
I need to be able to open a Twitter bootstrap modal window using the onClick="" or similar function. Just need the code to go into the onClick="". I am trying to make a click-able div to open the modal.
Code Excerpts:
Div Code:
<div class="span4 proj-div" onClick="open('GSCCModal');">
Modal Div Code:
<div id="GSCCModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
Javascript:
function open(x){
$(x).modal('show');
}
You don't need an onclick. Assuming you're using Bootstrap 3 Bootstrap 3 Documentation
<div class="span4 proj-div" data-toggle="modal" data-target="#GSCCModal">Clickable content, graphics, whatever</div>
<div id="GSCCModal" class="modal fade" 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">
...
</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>
If you're using Bootstrap 2, you'd follow the markup here:
http://getbootstrap.com/2.3.2/javascript.html#modals
I was looking for the onClick option to set the title and body of the modal based on the item in a list. T145's answer helped a lot, so I wanted to share how I used it.
Make sure the tag containing the JavaScript function is of type text/javascript to avoid conflicts:
<script type="text/javascript"> function showMyModalSetTitle(myTitle, myBodyHtml) {
/*
* '#myModayTitle' and '#myModalBody' refer to the 'id' of the HTML tags in
* the modal HTML code that hold the title and body respectively. These id's
* can be named anything, just make sure they are added as necessary.
*
*/
$('#myModalTitle').html(myTitle);
$('#myModalBody').html(myBodyHtml);
$('#myModal').modal('show');
}</script>
This function can now be called in the onClick method from inside an element such as a button:
<button type="button" onClick="javascript:showMyModalSetTitle('Some Title', 'Some body txt')"> Click Me! </button>
A JavaScript function must first be made that holds what you want to be done:
function print() { console.log("Hello World!") }
and then that function must be called in the onClick method from inside an element:
<a onClick="print()"> ... </a>
You can learn more about modal interactions directly from the Bootstrap 3 documentation found here:
http://getbootstrap.com/javascript/#modals
Your modal bind is also incorrect. It should be something like this, where "myModal" = ID of element:
$('#myModal').modal(options)
In other words, if you truly want to keep what you already have, put a "#" in front GSCCModal and see if that works.
It is also not very wise to have an onClick bound to a div element; something like a button would be more suitable.
Hope this helps!
I had the same problem, after researching a lot, I finally built a js function to create modals dynamically based on my requirements. Using this function, you can create popups in one line such as:
puyModal({title:'Test Title',heading:'Heading',message:'This is sample message.'})
Or you can use other complex functionality such as iframes, video popups, etc.
Find it on https://github.com/aybhalala/puymodals For demo, go to http://pateladitya.com/puymodals/