We are working in a Rails application with Prototype and jQuery (we want to remove Protoype at all, but is a migration and we have to do it progressively), and we have a form that can add many fields with jQuery. This fields have a very weird ID:viaje_contratos_attributes_0_cargas_attributes_1385986834726_punto_attributes_municipio
In this field, we need to work with autocomplete jquery, and our problem is take this ID. We've tried the following code:
$('input[id$="_punto_attributes_municipio"]').autocomplete({
source: $('input[id$="_punto_attributes_municipio"]').data('autocomplete-source')
});
What's the problem? What we have to modify?
Thanks in advance!!
Updated [12/02/2013 - 15:35]:
Thanks Jacob Bundgaard for your replies, but still not working :(. But you have made me to think and maybe, because this form is created after load the view with append function, your answer maybe not work for that? Could be?
Anyway, I hardcoded the ui class ui-autocomplete-input and autocomplete="off" but still not working :S.
A temporal solution, obviously, have been coding inline, after the div appended, the jQuery script
What about using a class instead of using id's for something for which they were not intended? That'll make your jQuery significantly simpler, and will probably only take a minor change in your Rails-code.
Related
Hi I had come across a question how to achieve suggestions in the input field while typing for example (in browser url bar while we typing first 3 to 4 letters it give suggestion if the url is correct we go with it else with single delete key press remove the suggested content). This need to be done with input field. Is this scenario is possible? Thanks.
There's a big range of possibilities here.
If the contents of the list are static or easily generated via code, you can use a native HTML <datalist> element.
If you are wanting autocomplete in the form using the user's previously-provided data, you can just enable via the <input autocomplete> attribute
If you're wanting far more customization, it's going to have to be some JavaScript that does the dirty work for you. Stack Overflow is not a good forum for getting library suggestions, but you should survey what's available in your current development stack.
This is absolutely achievable, have a look at - typehead.js
It's a javascript project for doing exactly what you're asking, I believe it's compatible with boostrap too.
Autocomplete suggestions are a very common Web Component. If you are using jQuery, you might want to try this component published by Materialize. If you are using, say, Polymer, you might want to try paper-autocomplete. If you are using vanilla javascript, you could try typeahead, or something like this autocomplete library. Most other modern web frameworks will have some alternative. I wouldn't really recommend making one from scratch.
I'm hoping someone with a better understanding of AngularJS might be able to shed some light on whats going on here.
I have a webpage with a long form. After the JS form plugin is initialized, everything in the form no longer has two way data binding. JS plugin for reference can be found here
If I remove the id link to the JS plugin, thus not applying or rendering the steps plugin, all two way data binding works as expected.
I could post a lot of code here but I'm not sure that would help. I have no problem posting code at any request.
Any ideas on why the two way data binding is losing effect after rerendering a form tag and its contents?
I was actually able to get AngularJS to work correctly with this plugin by including the plugin at the bottom of the page instead of the top. So I think the key here was to let AngularJS load up first, then the page, then the jQuery Steps plugin (at the boom of the page that uses it).
Thanks all for your comments!
Jquery library should include before angular library otherwise your site will try to use jquery instead of angular own lite jquery which will definitely break the binding.
I really like the Filtrify plugin with the multiple search categories like on this link http://luis-almeida.github.io/filtrify/movies.html by Luis. It is perfect for my project but I'm using bootstrap as a framework and this plugin uses version 1.7.1 of jquery and bootstrap needs 1.9.+. Is there a way so I can use both or is not possible? If not, do you guys know of similar plugin that I can use ? I need to be able to search multiple items and filter content by those items. My first try was to use the instafilta but then I can only search for one item at a time, unless I don't know how to configure it.
So to be exact, the Filtrify demo that I posted is exactly what I need.
This is the content of my project. I want to be able to search for for example Javascript and C++ and filter the users that have that in their list.
http://i.imgur.com/NlWP0oO.jpg
This is my first post so I hope this is specific enough.
Thanks in advance.
Maybe take a look at "http://isotope.metafizzy.co/". It has a filter function, too.
filtrify.js line 99: change the if statment with this
field = this._order[f];
This is an old problem, but I was able to fix the jQuery conflict of using newer jQuery with Filtrify by using method 1 on this page: https://www.sitepoint.com/fix-jquery-browser-function/
Alright, I have this code:
jquery
//add watermark effect to the specified input box
//get the
var wm = $("input.watermark").attr("title");
$("input.watermark").watermark(wm);
//end
the code above, should add a watermark base from the title into those input element that has a class of watermark. Now what i was thinking is to make the code easier and simple and implement an effective way to do that but i just dont know how. In my ideas, jquery's 'each' function should able to do that, but i dont know how to make it so please help and if there is other way to do that please suggest nor recommend. Anyway, Im open in ideas, recommendation and suggestion. Thank you.
You can use the placeholder attribute instead fairly dependently now. It's far superior for a lot of reasons. IE 8- will still need JS handling, though.
$("input.watermark").each(function () {
$(this).watermark(this.title);
});
i write some html with JS into a div.
like this
$("#picdiv").html("<a rel='lightbox' href='pic.jpg'><img src='htumb.jpg'></a>");
it is just an example.
So, i have in $(document).ready Funcktion this code.
$('a[rel=lightbox]').fancybox();
but if i click on the link, a get to the page with picture... i know the Problem must be, i write the html with js, but i have no other option. So haw can I make fancybox works?
This is due to how jQuery works. The fancybox function will only work for current elements on the page and not ones dynamically added by javascript.
A quick fix might be to be modify the code as follows:
$("#picdiv").append($("<a rel='lightbox' href='pic.jpg'><img src='htumb.jpg'></a>").fancybox());
Not sure if the above will work, but the general idea is to ensure that any new elements created have the plugin applied.
solution
$('.picture_display').find('a[rel=lightbox]').fancybox();