How to do a simple popup alert... using bootstrap popovers maybe?


#1

I’m new to meteor and bootstrap, so I’m probably just missing something obvious, but I can’t find any good examples.
I have a search box and a click event for the submit event on the search form, and I want to warn the user if they only type in a single character because I am not going to search unless they have 2 or more characters entered.

First thought was a javascript alert:

 if (searchString.length < 2) {
    alert("Please enter at least 2 characters to search with");  
}

But this seems very old school.
I’m assuming my better choice is a bootstrap popover, but I just can’t find how to do this …I already have twbs:bootstrap installed.


#2

Hi, check out s-alert package https://atmospherejs.com/juliancwirko/s-alert :wink:
Demo: http://s-alert-demo.meteor.com/
Docs: http://s-alert.meteor.com/


#3

There’s a toastr package that I’ve found works well… looks great and easy to customize https://atmospherejs.com/chrismbeckett/toastr


#4

Thanks, those are great suggestions, just what I needed, will try them tomorrow. Is there anything though where you can control where the popup goes, so I could put a popover right next to my search box, instead of just at the top, side, or bottom of the page?


#5

Something like parsley might be a better option https://atmospherejs.com/amr/parsley.js if you want to do validation directly on the form input.


#6

is there any documentation on parsley? I don’t see much on that page about how to use it.


#7

I’m wondering if there’s a meteor way of doing something like this (where the error is ballooning right up from the control where the issue is)


#8

I hope that’s just a mockup. The popup is covering the field label. I know this doesn’t answer the question you asked but from a UX perspective I’d just put the required label next to the field label.


#9

it’s just a screenshot I found on another post. I’m just trying to describe what I want. I’m wondering what the meteor way is of alerting the user to something relating to their input. In my case, if they type 1 character and submit the search form, I’m not going to search for anything. I need to tell them that, or they might become confused that there’s nothing coming back in the search results.


#10

If you interested, autoform package can simplify the forms and the backend. Not suitable if you are concern with filesize of the package, old fashioned way for validation with Jquery is still relevant for simple form.

http://www.webtempest.com/meteor-js-autoform-tutorial


#11

thanks. I’m going to be looking at autoform for my CRUD forms, but this search form is not connected to a collection in mongo, so it doesn’t seem appropriate. Unfortunately I’m coming into Meteor directly from the PHP world, and haven’t done much with jquery, so it’s not the “old fashioned way” to me :smile:


#12

You could also try using a sweetalerts popup to enter the search query and have it check the input there. Something like what ive done here: http://gyazo.com/c4d55a3526f868bc113f3b215e82709a