I have a very simple jquery code that makes a button to fade in:
function showOne() {
console.log("SHOW");
$('.closebt').fadeIn('slow');
}
this code is called by HTML:
<a (click)="showOne()">SHOW</a>
and this is the element:
<div class="closebt">
<button type="button">Click Me!1</button>
<button type="button">Click Me!12</button>
</div>
the console.log("SHOW"); is executed immediately as seen in Chrome console, but the $('.btn1').fadeIn('slow'); makes the button appear after 8-10 seconds, how can I make the buttons appear immediately?
Related
EDIT FINAL:
Along with the accepted answer, I had to figure out how to close the modal which was not the same as just hiding a dialog in this case.
This bit of javascript helped me to get the modal closed, hide the backdrop, and close it to the point where it would let me reopen another different one on the page.
<script>
$(document).on("click", ".btnCloseDeviceActivityModal", function () {
var deviceActivityModal = $('.deviceActivityModal');
deviceActivityModal.hide();
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();
});
</script>
EDIT: Wanted to point out that when I debug it shows me that it is calling back into my partial view controller every time I close the modal. So it is loading it entirely including going back to the controller and querying the database. It is actually calling the javascript method every time I close the window.
Also wanted to add that I tried changing to an onclick="doModal()" way of clicking the button and named the method in javascript to doModal(). I still get the same behavior of the reopening when closing.
Some more observations is the button loses all text and is just a little square after it is clicked the first time. I can see this in the background of the modal. The other interesting thing is the background (outside) of the modal gets darker and darker each time I click the close button on the modal.
I have a modal window that is displaying a partial view. Every time I click the close button it is just opening right back up. I've tried setting it with 'hide' in javascript. I tried some completely boilerplate modal so I think it is how I am calling the modal that is the problem.
This is how the modal is being initiated off of this button click:
<button data-url="#Url.Action("DeviceActivity","Devices", new { #id = item.DeviceId })" class="btn btn-primary btnOpenDeviceActivityModal">Activity</button>
Here is the javascript that loads the modal window from the data retrieved in the controller. It displays the partial view in the modal successfully:
#* Display the device activity in a modal window. Data is loaded from the partial View *#
<script>
$('.btnOpenDeviceActivityModal').click(function () {
var url = $(this).data("url");
$(this).load(url, function () {
$("#deviceActivityModal").modal("show");
});
})
</script>
And just for fun even though it doesn't seem to matter, here is my modal partial view:
<div class="modal fade" id="deviceActivityModal" style="margin-left:100px; margin-top:80px">
<div class="modal-dialog-scrollable" style="top:180px; right:200px">
<div class="modal-content" style="width:1000px; max-height:800px;">
<div class="modal-header">
<button id="closeModal" type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
<div class="modal-body">
<h2 style="text-align:center">Device Activity Records</h2>
<table class="table table-striped table-bordered">
<thead class="thead-light">
<tr>
<th>
Activity Date
</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model.DeviceActivityRecords)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.ActivityDate)
</td>
</tr>
}
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
What is it that is causing my modal window to reopen each time it is closed. It also seems that anywhere I click on the modal will close (and reopen) it. I dunno if it is related so that's why I bring it up. How can I get it to close and stay closed? Other answers here on SO have some obvious problems with modal code, but I am not seeing what is wrong with how I am calling the modal (which seems to be the common problem because I replaced the modal code entirely to test).
$(this).load is injecting your modal markup inside the button - that's probably not what you want. I'm assuming you meant to use $.get, which does work a bit differently.
$('.btnOpenDeviceActivityModal').on('click', function () {
var url = $(this).data("url");
$.get(url)
.done(function (response) {
$(response).modal("show");
});
});
This will use the markup returned from the AJAX call as the target of the .modal() function - probably want to add some sanity checks around that.
For reference:
$(selector).load() : https://api.jquery.com/load/
$.get(): https://api.jquery.com/jQuery.get/
I'm trying to use the materialize modal in my laravel app, I've got a blade file called skeleton which I put all my "scripts" in and stylesheets etc. That yeilds the sections which I define in my single blade files. That works great, however I've had loads of issues with materialize lately.
When I try to use the modal, I use this code from the docs:
$(document).ready(function() {
$('.modal').modal();
});
That's at the bottom of my skeleton file and shows at the bottom of every file. I've tried putting it in my file itself and it didn't work.
My HTML looks like this:
#if($auth >= 5) <a href="#modal1" class="btn waves-effect waves-light green right modal-trigger"
href="#modal1"> Create</a>
#endif
at the bottom of the blade file:
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
Agree
</div>
My modal appears on screen, but it's automatically "shown" and when I click the open button it doesn't do anything. I'm just using the demo modal, I'll customize it when I can get it to work, thanks.
Here you go with a solution
For opening a modal please use the below code
$('.modal').modal('show');
For closing a modal please use the below code
$('.modal').modal('hide');
It's opening automatically because of
$(document).ready(function() {
$('.modal').modal();
});
Whenever the doument is ready then it's opens the modal.
On click
#if($auth >= 5) Create
#endif
Open the modal using $('.modal').modal('show');
Ok, first up, why two href's on the modal trigger?
#if($auth >= 5) <a href="#modal1" class="btn waves-effect waves-light green right modal-trigger"
href="#modal1"> Create</a>
#endif
Take one off, and let's take it from there.
The answer above incorrectly states that the init below opens the modal:
$(document).ready(function() {
$('.modal').modal();
});
This is just the initialisation, it plugs into the JS to allow it to work.
<!-- this is the initialisation -->
$('.modal').modal();
<!-- this is instruction to open -->
$('.modal').modal('open');
Check the pen here for the two commands, comment each out to see what happens.
Modals are closed by default, and are triggered by clicking the .modal-trigger or using the open command above..
I was being stupid, I had bootstrap js linked for some reason and they were conflicting. Sorry to waste anyone's time.
I have a View/View-Model pair that implements a popover custom attribute. My specific goals include dismissing the popover upon both button click within the popover itself, and from clicking anywhere else on the page.
I can get my doSomething() VM function to work on the element level in the view, but not within an attribute containing an element. I've explained the issue further in the code comments. I'd appreciate some guidance. Thanks!
blog.html
<template>
<require from="../popover/popover"></require>
...
<!-- doSomething() works here! -->
<button type='button' click.trigger='doSomething()'>ClickMe</button>
<!-- doSomething() does not work here! -->
<!-- `click.trigger`/`click.delegate` does not trigger anything, while `onclick` shows
"Uncaught ReferenceError: doSomething is not defined" -->
<span class="glyphicon glyphicon-star" popover="title.bind: blogpost.title; placement.bind: 'top'"
data-content='<button type="button" click.trigger="doSomething()">ClickMe</button>' ></span>
...
</template>
blog.ts
...
doSomething() {
console.log('doing something');
}
popover.ts
...
bind() {
$(this.element).popover({
title: this.title,
placement: this.placement,
content: this.content,
trigger: 'click',
html: true
});
}
I recently went through the same problem. I'm currently working on a Bootstrap port for Aurelia, it is not done yet, and I haven't written any documentation, but the popover is already implemented.
You are more than welcome to take a look:
https://github.com/tochoromero/aurelia-bootstrap/tree/master/src/popover
The way you are trying to implement the popover is going to be very complicated (if even possible), things are going to get messy with the scopes. If you only had text then it would be fine, but you basically want to be able to put anything in the popover and have it bound to the right View-Model.
The way I solved this was having a couple of Custom Elements that represent the popover, I have AubsCustomPopover, AubsPopoverTitle and AubsPopoverContent.
With this 3 custom elements you will create the bootstrap markup for the popover, and because you are adding them directly in the view they will have the right View-Model, and you can do whatever you want inside them.
And then, there is a custom attribute, this is AubsPopover, this is the one that will be in charge of showing and hiding the custom attribute depending on the trigger action you specify (hover, click, focus, outsideClick).
The code using it looks something like this:
<aubs-custom-popover model.bind="customPopover">
<aubs-popover-title>
This is my awesome title <i class="fa fa-star"></i>
</aubs-popover-title>
<aubs-popover-content>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" text.bind="password"
placeholder="Password">
</div>
<button class="btn btn-default" click.delegate="isOpen = false">
Close
</button>
</aubs-popover-content>
</aubs-custom-popover>
<button class="btn btn-primary"
aubs-popover="custom-model.bind: customPopover;
trigger: outsideClick;
position: bottom;
open.bind:isOpen">
Custom Popover
</button>
As I said the Popover is fully implemented but I haven't written any documentation, I want to have a couple of more components before I do that.
If you want to use it, I can give you some help setting it up.
How do I change or add any code in order to tap and hold to show the pop up, currently once I press the button the pop up window will appear, I want to change it to tap and hold.
<div id="ScenePop1">
1
<div class="popup1">
<h2>Scene 1</h2>
<button id="store1">Store</button>
<button id="del1">Delete</button>
<a class="close1" href="#close"></a>
</div>
</div>
my code here: http://jsfiddle.net/oajt5p28/
This link come to elegant solution with the combination of jquery, jmobile and simpledialog2: http://www.raymondcamden.com/2012/05/23/Context-Menu-Example-with-jQuery-Mobile.
Or use could use html5 dialog element, and catch taphold event following this way:
How to detect a long touch pressure with javascript for android and iphone?
I'm trying to add a BootStrap modal to an already-existing page and I'm running into the following problem:
The modal displays exactly as I would expect it to, content in place looking quite beautiful but I have two problems. If I specify only class="modal" the modal displays by default when the page loads and will not close. If I include class="modal hide" then the modal does not display at page load but also doesn't close when the appropriate buttons are clicked.
I'm not making any big departures from the modals sample code on the Bootstrap site, any ideas what's going wrong?
Here's the button that's supposed to launch the modal:
<a class="btn" data-toggle="modal" href="#testmodal" >About</a>
And here's the modal itself:
<div class="modal hide fade in" id="testmodal">
<div class="modal-header">
<button class="close" data-dismiss="modal">x</button>
<h3>Modal Header</h3>
</div>
<div class="modal-body">
<p>body</p>
</div>
<div class="modal-footer">
Close
</div>
</div>
And for the record, yes I did remember to include bootstrap-modal.js and bootstrap-transition.js
Glad your problem is resolved.
Also if you want the default bootstrap functionality without customizing anything just use the big download button on the main page. This zip file contains a default bootstrap.min.js file that includes all the plugins (like the modal dialogs etc). If you use that one instead of all the seperate javascript files your page has to make less requests and load faster.
your close link should be like this:
<a class="close" data-dismiss="modal">×</a>
since, data-dismiss is a custom HTML5 data attribute. Here it is used to close the modal window.