Materialize - Autocomplete does not show options instantly - javascript

I have a problem with Materialize's autocomplete form.
I'am using it within a card. But the options are not shown instantly.
For example, while typing a 'G' the autocomplete form should suggest 'Google'. But it doesn't. Only by mouseclicking on the form the autocomplete options are shown. But I can not locate a mistake.
HTML (there is just one autocomplete form on this page):
<div id="referenceSetCard" class="row">>
<div class="col s12 m4 l4 offset-m4 offset-l4">
<div class="card over-all">
<!-- Title -->
<div class="card-action red darken-4 white-text">
<h4>Header</h4>
</div>
<!-- Content -->
<div class="card-content">
<p>Text</p>
<!-- Input field -->
<div class="form-field">
<div class="input-field">
<input id="referenceDataInput" type="text" class="autocomplete">
<label for="referenceDataInput">Autocomplete</label>
</div>
</div>
<!-- Buttons -->
<div class="card-action">
<a id="buttonConfirm" class="waves-effect waves-light btn red hide-on-med-and-down">
Confirm
</a>
<a id="buttonCancel" class="waves-effect waves-light btn red hide-on-med-and-down">
Cancel
</a>
</div>
</div>
</div>
</div>
</div>
JS:
$(document).ready(function () {
$('input.autocomplete').autocomplete({
data: {
"Apple": null,
"Microsoft": null,
"Google": 'https://placehold.it/250x250'
},
});
});
Just have a look:
https://codepen.io/michaelkonstreu/pen/zLoaJE

Please use these new versions of cdnjs or minified scripts.
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
You can also change the value of minLength like when you want autocomplete dropdown to popup.
Codepen of Autocomplete with V 1.0.0-rc.2
Codepen of your code with V 1.0.0-rc.2

I have forked and updated the Pen you made and here's the link for the codepen:
codepen.io/immad-hamid/pen/ajBjXx
I have change the version of the scripts and it's working now. May be there's an issue of jQuery version. Now you have a working demo so you can try out with changing the versions.

Related

When trying to use semantic ui I keep getting this error Uncaught TypeError: $(...).modal is not a function

Here is the the code. Below I have shown the js and html and when it runs I need to be able to click the "log in button" and open a semantic ui modal
$('.ui.basic.modal').modal('show');
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<div id="modaldiv" class="ui modal">
<i class="close icon"></i>
<div class="header">
Profile Picture
</div>
<div class="content">
<div class="description">
<div class="ui header">We've auto-chosen a profile image for you.</div>
<p>We've grabbed the following image from the gravatar image associated with your registered e-mail address.</p>
<p>Is it okay to use this photo?</p>
</div>
</div>
<div class="actions">
<div class="ui black button">
Nope
</div>
<div class="ui positive right labeled icon button">
Yep, that's me
<i class="checkmark icon"></i>
</div>
</div>
</div>
<a class="item" id="logIn">
<i class="user icon"></i> Log In
</a>
I need it so that a semantic modal opens when i click login
It does not look like you have included the required scripts for jQuery Modal.. (which I'm just guessing you're using..)
Adding the following to your HTML should fix this for you...
Note, that if you are not using jQuery Modal - you will need to include the appropriate scripts for the modal you are using...
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
Demo:
$("#btn").on('click', event => {
$('#modaldiv').modal('show');
})
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
<div id="modaldiv" class="ui modal">
<i class="close icon"></i>
<div class="header">
Profile Picture
</div>
<div class="content">
<div class="description">
<div class="ui header">We've auto-chosen a profile image for you.</div>
<p>We've grabbed the following image from the gravatar image associated with your registered e-mail address.</p>
<p>Is it okay to use this photo?</p>
</div>
</div>
<div class="actions">
<div class="ui black button">
Nope
</div>
<div class="ui positive right labeled icon button">
Yep, that's me
<i class="checkmark icon"></i>
</div>
</div>
</div>
<button id="btn">Open Modal</button>

How can I use javascript for opening a new html after a materialize modal has opened for 3 seconds

I am creating a 'login' page, and I have it so that once the user presses the login button, a modal appears that says "Login Successful". What I want it to do, is after the modal appears for 3 seconds, it automatically opens up my profile.html page.
I'm using the Materialize Modals.
Here is the code I have so far:
<div class='row'>
<div class='input-field col s12'>
<input class='validate' type='email' name='email' id='txtEmail' />
<label for='email'>Enter your email</label>
</div>
</div>
<div class='row'>
<div class='input-field col s12'>
<input class='validate' type='password' name='password' id='txtPassword' />
<label for='password'>Enter your password</label>
</div>
</div>
<div class='row'>
<div class="col s12">
<button data-target="modal2" id="btnLogin" type='submit' class='col s12 btn startup modal-trigger'>Login</button>
</div>
<!-- Login SUCCESS Modal Structure -->
<div id="modal2" class="modal">
<div class="modal-content" id="modal2content">
<div class="row">
<div class="col s5 offset-s4">
<i class="success large material-icons">check</i>
</div>
</div>
<p class="success">Login Successful!</p>
</div>
I already have the Materialize javascript to run the modal:
$(document).ready(function(){
$('.modal').modal();
});
But I need to be able to open profile.html after the modal has run.
Any ideas or links or other ways to set it up would be appreciated.
Bootstrap modal has events. You can use the shown_bs_modal event.
$('.modal').on('shown.bs.modal', function(e) {
// Wait 3 seconds
setTimeout(function() {
window.location.href = 'url_of_your_profile_page';
}, 3000);
});
Once the modal is shown, wait 3 seconds then navigate to your profile page url.
Edit: As it seems you are using materialize modals and not bootstrap modals, here is a new version. Materialize modals have a onOpenEnd event.
$('.modal').modal({
onOpenEnd: function() {
// Wait 3 seconds
setTimeout(function() {
window.location.href = 'url_of_your_profile_page';
}, 3000);
}
});
Earlier versions of the library were apparently using ready instead of onOpenEnd. See the documentation for the latest version.
Proof of concept example: fire an alert once the modal has been shown.
$(document).ready(function() {
$('.modal').modal({
onOpenEnd: function() {
alert('modal has opened');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
<!-- Modal Trigger -->
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
<!-- Modal Structure -->
<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>
</div>

baguetteBox.js doesn't work and shows controls at bottom of page

I am using baguetteBox.js in a website in two different pages:
homepage
gallery
In the gallery it works well but in the homepage I can't find why the lightbox controls (i.e.:id="baguetteBox-overlay") are appearing at the bottom of the webpage like this:
In both webpages, I am loading the same assets, and console does not show any errors.
You can see it live at:
homepage: http://keraban.marcanuy.com <- the one with the problem
gallery: http://keraban.marcanuy.com/gallery/
Using _baguettebox.js/1.10.0 (with Bootstrap 4 too)
Any idea how to fix it?
Relevant code:
In homepage,
<section class="gallery-block compact-gallery">
<div class="container">
<div class="row no-gutters">
<div class="col-md-6 col-lg-4 item zoom-on-hover">
<a class="lightbox" href="/media/images/image5.width-1400.jpg">
<img class="img-fluid image" src="/media/images/image5.width-1400.jpg">
<span class="description">
<span class="description-heading">Image 5</span>
</span>
</a>
</div>
<div class="col-md-6 col-lg-4 item zoom-on-hover">
<a class="lightbox" href="/media/images/image1.width-1400.jpg">
<img class="img-fluid image" src="/media/images/image1.width-1400.jpg">
<span class="description">
<span class="description-heading">Image 1</span>
</span>
</a>
</div>
....
</div>
</div>
</section>
Loading js at bottom:
<script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.js"></script>
<script>
baguetteBox.run('.compact-gallery', {
animation: 'slideIn',
});
</script>
The base stylesheet was missing and caused the dialog to appear, adding the proper style sheet fixes it <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.css" />.

Open Modal in semantic-ui

I just cant figure out how to open this modal. I usually use Bootstrap, but wanted to try a new layout.
Here is the button that I use to open the Modal:
<div class="ui pointing menu">
<a class="item" id="#register">Register</a>
#include('auth.modals')
</div>
Here is my Modal:
<div id="register-modal" class="ui modal">
<i class="close icon"></i>
<div class="header">
Profile Picture
</div>
<div class="image content">
<div class="ui medium image">
<img src="">
</div>
<div class="description">
</div>
</div>
<div class="actions">
<div class="ui black deny button">
Nope
</div>
<div class="ui positive right labeled icon button">
Yep, that's me
<i class="checkmark icon"></i>
</div>
</div>
</div>
And Here is my JavaScript:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="semantic/dist/semantic.min.js"></script>
<script>
$(document).ready(function(){
$('#register').click(function(){
$('#register-modal').modal('show');
});
});
</script>
The whole problem is that the element to which you try to attach the click event does not exist. You have specified id="#register", instead of id="register"
correcting the attribute will do the job:
<div class="ui pointing menu">
<a class="item" id="register">Register</a>
#include('auth.modals')
</div>
The id of the modal itself seems to be correct, though :)
Such things are very easy to debug, simply type $('#register') in the console, and you'll see that jquery cannot find any matching element.
Figured it out!
I guess the button that you open the modal with has to be a class?
<a class="item register">Register</a>
Then pass in JavaScript like this:
<script>
$(document).ready(function(){
$('.register').click(function(){
$('#register-modal').modal('show');
});
});
</script>

How to create foundation popover nested with html content (template)

I wanted to load a html template inside foundation popover, but i could not found any good documentation or similar solution on internet. I just wanted to know weather this is possible to have a html template along with its controller inside popover or not.
i saw we just load content in popover using properties like below:
<button popover="{{dynamicPopover}}"
popover-title="{{dynamicPopoverTitle}}" class="button">Dynamic Popover</button>
or
<button popover="I appeared on mouse enter!" popover-trigger="mouseenter" class="button">Mouseenter</button>
i can somehow inject the html using scope but difficult to have controller for that.
I want to load a popover for my website (which is getting build using angularJS) when user mouse over on video thumbnail i want to load the preview image of the video and on mouse over on popover i want to have some buttons which perform some action when click on them.
Try This http://codepen.io/Blu-Jay/pen/wMRBLx
$(document).foundation();
.callout{
text-align:center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/foundation/6.0.5/foundation.min.js"></script>
<link href="https://cdn.jsdelivr.net/foundation/6.1.1/foundation.min.css" rel="stylesheet">
<div class="row">
<div class="large-8 large-centered columns">
<div class="callout">
<h3>Password Verification</h3>
<div class="row">
<div class="small-3 columns">
<label for="right-label" class="text-right">Username</label>
</div>
<div class="small-9 columns">
<input type="text" id="right-label" placeholder="Username">
</div>
</div>
<div class="row">
<div class="small-3 columns">
<label for="right-label" class="text-right">Password</label>
</div>
<div class="small-9 columns">
<input type="password" id="right-label" placeholder="Password Please" data-toggle="example-dropdown-1">
</div>
</div>
</div>
</div>
</div>
<div class="dropdown-pane" id="example-dropdown-1" data-dropdown data-hover="true">
<strong>Password Must meet to following criteria:</strong>
<ul class="no-bullet">
<li style="color:red;">Must be between 4 and 8 characters</li>
<li style="color:red;">Must contain capital letters</li>
</ul>
</div>

Categories