I have a requirement where I HAVE TO use bootstrap autocomplete dropdown, BUT user can have free form text in that dropdown if they wish. Before you think about TypeAhead, I could use Bootstrap TypeAhead textbox, but I need to have the dropdown becasue we want to give some default values as headstart options in case users dont know what to search for.
I am using this with MVC DropDownListFor as that creates a select control for us.
I found this article which does that for me.
https://github.com/danielfarrell/bootstrap-combobox/pull/20
All I had to do was take off the name from the select control and the control was letting me enter free form text. All good so far.
Now, I am using this in conjunction with Knockoutjs. I bind my options and selected value to the select control and then on row rendered of my template, I called (selector).combobox() which makes the select control a bootstrap comobobox and adds an input control and hides the select control in the scenes behind.
The problem now is when I try to get he values to post to server, since the value I put in input box is not a valid options from the options I gave to select control, it is always setting it to the first option by default. This is becasue, I set the binding of the selected value on select control and not on the input box which was created by bootstrap-combobox.js.
My question is how do I get the input box to data-bind to the same porperty as the the select control was bound to.
Any other options??
Let me know if you need more clarification or have questions.
Please suggest.
Thanks.
Have a look at Select2 for Bootstrap. It should be able to do everything you need.
Another good option is Selectize.js. It feels a bit more native to Bootstrap.
Does the basic HTML5 datalist work? It's clean and you don't have to play around with the messy third party code. W3SCHOOL tutorial
The MDN Documentation is very eloquent and features examples.
Select2 for Bootstrap 3 native plugin
https://fk.github.io/select2-bootstrap-css/index.html
this plugin uses select2 jquery plugin
nuget
PM> Install-Package Select2-Bootstrap
Fuel UX combobox has all the features you would expect.
Can i suggest http://www.jqueryscript.net/form/Twitter-Like-Mentions-Auto-Suggesting-Plugin-with-jQuery-Bootstrap-Suggest.html, works more like the twitter post suggestion where it gives you a list of users or topics based on # or # tags,
view demo here: http://www.jqueryscript.net/demo/Twitter-Like-Mentions-Auto-Suggesting-Plugin-with-jQuery-Bootstrap-Suggest/
in this one you can easily change the # and # to anything you want
Bootstrap Tokenfield seems good too: http://sliptree.github.io/bootstrap-tokenfield/
Related
Does anyone know of a ready-made plugin that allows adding input, textarea, select etc. on tinymce?
The tinymce.dom.Selection API (https://www.tiny.cloud/docs/api/tinymce.dom/tinymce.dom.selection/#select) allows you to select elements or set content in the TinyMCE editor. You can assign the API class to an action or an interaction element like a button or form, and any selected content will be replaced with the contents the API action passes in.
If that's not a good fit for what you need, is there an example of the type of adding input, a textarea, or a select you're looking for?
There are no official plugins that allow such interactive elements to be added. TinyMCE is a text editor that is built to create blog posts, articles, etc. By design, it is not a page builder. However, there may be some unofficial plugins on GitHub that may implement such features.
If you are going to insert forms and text areas that should not be edited or reconfigured afterward, you can use templates. They may come as any valid HTML. Thus, some fixed forms can be just saved as templates.
Another way is, of course, inserting HTML directly into the code.
I have a tool panel and I want to send slot (e.g. <h1>Edit table columns</h1>) to above of the search input. Is there any way to do this?
Unfortunately at this time there's no way to inject HTML inside the standard columns tool panel.
If you'd like to do that you'll have to build your own tool panel component and use that instead of the default column tool panel. You can do that using the approach described here:
https://www.ag-grid.com/javascript-grid-tool-panel-component/
Starting from the solution provided by the Nick Caver I wish to save some inputs provided by the users into a db. The problem is that I don't know how to select the right input from the current dialog box, using jQuery.
Here is my working code.
I've solve it. I had to use :last selector. I think is a good solution.
What do you think? I'm new in jQuery
I will need to provide a way for a user (who will be using a screen reader) to select multiple options within a form. Currently, these options are laid out in a two column table with checkboxes in the first column and spans with the label for the option in the second column. This isn't section 508 compliant, but it will need to be for this site. I'm trying to figure out the best way to replace this form with something better.
The options I have are to either
Use ul/lis with labels for the checkboxes
OR
Use a multi-select drop down list.
Does anyone have a preference or a better idea?
I've decided to use a muli-select dropdown. In case anyone was wondering. It seems to work fairly well with the screen reader I'm using. I did find that IE seems to be the best browser to work with and most screen readers aren't working very well with Chrome or other browsers unfortunately. I can only assume then that most people who visually disabled are probably using IE because of this.
Joomla is pretty good CMS but, is there any way to create custom template which will be joomla supportable ?
If I understand your question you want to convert an existing template that isn't even a Joomla template. If that is the case I found it very hard to do, of course depending on where the template was coming from. I ended up taking a template for Joomla 1.5 and starting from that. (Although the ja_Purity is a messy one when it comes to the CSS, looking back I would should have started with another one....)
Yes, you can do it. Copy default template which comes with Joomla and customize it, and you can install it now.
Refer : http://docs.joomla.org/Joomla!_1.5_Template_Tutorials_Project
Follow the SiteGround tutorial.
1st result for Google: joomla change template.
If you mean a page-specific template, then this is answered here: http://docs.joomla.org/How_do_you_assign_a_template_to_a_specific_page%3F
It describes the following steps:
In Joomla! there is a default
template, but you can assign other
templates to specific "pages" that are
defined by menu links.
To assign a template to a page, you
must first make sure that there is a
direct menu link to the page.
Go to Extensions>>Template Manager
Select the Template and click the edit icon (or click the template name)
In the left column, change "None" to "Select from List."
Select the links you want to apply the template to.
Save
Note that you cannot assign the
default template to individual pages.