I want to implement my own text input web component like:
<x-text autocomplete="{{ true }}"></x-text>
The thing is, when the user chooses an item from the autocompletion list, how can my web component fire an event? I'm looking for something like this:
<x-text autocomplete="{{ true }}" on-select="itemSelected()"></x-text>
Is there a way to accomplish this?
This is possible, but maybe not very intuitive.
You can't bind to a custom event in HTML. You must do it manually in code:
<x-foo id="wtvr"></x-foo>
_root.query('#wtvr').on['foo'].add((e) => print(e));
Then when the components fires the event, you just write:
_root.on['foo'].dispatch(new CustomEvent('foo'));
Without having working with web components that much, from the top of my head I would just implement a onchange/onblur function for the selection itself.
Related
I came across this site:
https://tutorials.railsapps.org/rails-tutorial
And was wondering if someone could explain how the buttons would be set up to filter?
I guess I'm curious also - is an object being displayed and filtered? What is going on here?
What you're seeing is not Rails but Javascript.
When you click the 'Beginner' button, it has an attribute data-toggle="Beginner" and uses javascript to show only the elements below that have a class Beginner.
It would look something like this using jQuery in coffeescript:
$('.filters li[data-toggle]').on 'click', ->
toggle = $(this).data('toggle')
$("div.tutorial:not(.#{toggle})").hide()
$("div.tutorial.#{toggle}").show()
To serve up the html classes would be Rails' job.
I'm very new to backbone.js but we're starting to use more and more JS on the front end and I wanted to use some framework to give the code structure - backbone seems to suit our needs.
So started off with a very simple test app that launches a dialogue window using jquery-ui. The problem I have is that since jquery-ui adds a wrapper DIV round the original template used by backbone, the events no longer fire.
I don't want to use the jquery-ui event model as I'd rather just use the one - how can I bind backbone's to this new structure?
It looks as though the call to _.template() is actually doing the wrapping in an extra div. The parent div with the events bound to it is being left behind appended to #well. A simple workaround is to call .parent() on the result of getting the element with the model class ID. See here for example
There's more than likely some information in the _ documentation that might shed some more light on the problem too.
OK - at the end of this project, I finally realised that I hadn't answered this. What happens is when you create a .dialog with JQueryUI, it actually detatches your original DOM element and moves it to the bottom of the DOM wrapped in it's own JQueryUI markup to turn it into a dialog.
Since the Backbone view's element has now been moved, Backbone doesn't pick up any events that fire as it's happening outside it's own "view" as far as it is concerned.
So what you have to do is reassign the view's element:
var dlg = this.$("#dialogue-properties").dialog({ ..});
this.setElement(dlg);
Where this is the view. This is done within the initialize method
You can create div wrapper in your view and modal it's content, as described here (first part of the post)
cocovan does a good job explaining the problem in his answer. However, as for the solution, the JQuery UI team actually added a method at the end of 2012 (Allow dialog to be attached to a element other than body) that takes care of this issue.
It is the appendTo(selector) method (jQuery Dialog appendTo method). So simply specify to which element you want the dialog appended.
I have a JQuery Mobile (1.0rc1) application that has a list view with a search filter implemented. It's similar to this sample.
Under certain conditions, I am dynamically loading additional items into the list with an ajax call. When this happens I want to clear anything entered in the search filter, otherwise I end up with a partially filtered list.
I've tried firing the clear button like this:
$('.ui-button-clear', $.mobile.activePage).click();
and clearing the form like this:
$("form > input", $.mobile.activePage).val('');
but neither worked. Can someone enlighten me to the proper way to accomplish this?
You should be able to clear clear the searchfilter with
$('input[data-type="search"]').val("");
Edit: To update the list you will also have to trigger the "change"-event on the searchfilter:
$('input[data-type="search"]').trigger("keyup");
JSFiddle
if you talking about Jquery mobile listview, then you need this
$('#autocomplete li').click(function () {
$('.ui-input-clear').trigger("click");
});
I use the following code:
$("form")[0].reset();
The [0] points to the DOM element method.
Also see How to reset (clear) form through JavaScript?
I'm still new to grails, so I'm really sorry for asking something like this.
I have a domain that could be divided in 3 types, so I'd like to create a combo-box and depending on which selection the user made, it will show some fields and hide others. How can I achieve this?
Thanks again and sorry for this dumb question.
This is actually something that is commonly done with JavaScript. You could attach an 'on change' event handler to your combo-box that would show/hide the appropriate elements as needed.
In case you're not familiar with how to do this with Javascript, I'd recommend you take a look at jQuery: http://api.jquery.com/change/
Before I start work I would like to get some ideas. What I have is an MVC3 page that I currently use to display rows of data. There are many rows so I would like to filter them. Ideally at the top of my page I would like to have a select drop down box and a refresh button with rows of data appearing below when the refresh button is clicked.
I can imagine doing this with Ajax and then having the data from my controller populate new HTML text between a DIV.
Does this sound like the best approach? I am not looking for a person to write code for me. Just want to be sure my solution sounds like a good way to go.
thank you
i recommend this approach:
http://geekswithblogs.net/michelotti/archive/2008/06/28/mvc-json---jsonresult-and-jquery.aspx
You can 'enchance' it with AJAX of course, but do not forget about users with disabled javascript. Make it work without client scripting, then enchance it, when its working.
I also think that you can simply create controller action, that is accepting parameters like pageNumber and amountOfItems. Then in your controls at page, you can just change values (number of page etc..) and use them in call for your controller action at form submit.