I have a website that uses JQuery to construct a rather large table. When I try to select a set of input elements created this way by class and add a datepicker to them, nothing happens. The table is generated durinng document.ready(); is there a certain time I have to execute $('.date_pick').datepicker(); in order for this to work? If not, what could I be doing wrong?
If you could provide the relevant code, it would be helpful. But basically, you should be able to assign datepicker() to the appropriate elements once they are inserted into the DOM.
Here's a Working Demo of attaching the datepicker to inputs in a table that is inserted into the DOM through jQuery. Tested in Firefox 3.5 and IE 6.
Without code, you'll need to debug this on your own. Couple of guidelines:
If you're using JQuery, use JQuery's built in function rather than document.ready()
Are you sure you're declaring the datepickers after the table is generated?
Make sure the input elements don't have the same IDs, give them the same classname, then do something like.
$('.dateInputs').datePicker();
Related
I'm using AngularJS datepicker plugin. It is adding aria-required=false attribute dynamically to datepicker md-content. I want to remove that attribute. As it is coming dynamically through Angular, I cannot do it through HTML, so I want JS code to remove that.
I've tried couple of approaches, but none of them seem to work. Just to mention one approach, which didn't work:
$('.datepicker-class').removeAttr('aria-required');
There are no console errors, but still it didn't remove the attribute.
Any solution to remove this attribute through JS?
Try
angular.element(document).ready(function(){
angular.element('.datepicker-class').removeAttr('aria-required')
})
JQuery doesn't always play well with angular as they exists within different execution contexts, but you can use the angular.element function which will use JQlite (enough for what you're doing) or JQuery if you're using that.
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.
I am having a problem while working with DOJO where I will dynamically load a div with some content and then run parser.parse(dom.byId("mainDiv")); with the respective requires. And that works beautifully the first time. The second time however I end up running into a problem where it just shows the content no longer activated or styled.
On a second run what I do is remove all the html in the div and then replace the html with basic unparsed text and then I parse it again. Now I am guessing it has to do something with dijit.registry however I can not find exactly what the issue is as I have tried clearing that out as well to no avail. Your help would be much appreciated.
Dojo keeps track of the objects / widgets it creates by the specified id. If you run the parser again on an object with the same id, dojo tries to create a second instance, but there is already one, so it should throw an error in your js console (please check).
You could leave the id blank, then dojo / parse should create an id for you.
Dojo allows you to find dom elements by class attributes, that way you could pass your div-element to the parse() function without giving it an explicit id.
Anotherway would be to destroy the created widget/object before you parse the div-element again, take a look here for that:
Dojo and unregistering widgets
Quote from http://livedocs.dojotoolkit.org/dojo/parser#parse
"If you try to parse the same content twice, or parse content
mentioning id's of existing widgets, it will cause an exception about
duplicate id's"
I am adding an id to an element via call to jQuery.data:
$layout.nextAll('.imagepicker').data('imgPickerId', randomnumber);
So my element of a class imagepicker will have [imgPickerId=randomnumbervalue] data attribute added to it.
It seems like there is a problem how I later on look for .imagepicker with exactly this imgPickerId. Where can I lookup which attributes are added to a particular element in a convenient way (excep from js code)? Maybe in firebug somewhere?
P.S. for some reason my "getter code" works in jQuery 1.6 but does not in 1.7. Still I am suspecting data isn't being added to an element and need a way to check it.
jQuery's data function stores everything in JavaScript, without altering the DOM in any way. I'm afraid you'll have to use code to access it.
A quick Google search also showed me a FireQuery plugin for Firebug, which seems to enable you to see the attached data of your elements. Haven't tried it myself, though, so I can't confirm that.
Update: Tested it, and it works fine! With FireQuery all data of your elements are visible right next to the HTML:
Have you considered in writing your data in an custom attribute like data-imgPickerID="someID"?
For sure this does not allow you to save huge data but you could inspect it via firebug and since you are only saving an ID it would fit for your needs.
Which is also very cool about the .data() method is you can retrieve your custom attribute from above like so .data("imgPickerID");
data() will save data in memory (of course linked to the elements in your selector), it doesn't write things on the element, so you can't look at that in firebug.
You can pre-populate elements with some data by using the html5 data attibute though
Look at this question for an expanded explanation
How does jQuery store data with .data()?
I'm using the JQuery-UI Accordion, but I'm trying to find a way to not have to initialize it any time any new element is added. Using AJAX I'm inserting html into a page, but on any page load I am having to re-initialize any accordions-
// .ajax handler
success: function(xml) {
// find accordions
$("div.accordion").accordion();
}
Is there any way I can automatically have this run any time the DOM has changed? I know there is the livequery plugin -- but is there a simpler more elegant method?
Someone may be able to provide more information, but I'm running into a similar situation. As far as I can tell, you have to dynamically apply the accordion based upon the changed DOM. You could just use the .live function and have it run on load. Something like this has worked for me.
$('div.accordion').live('load', accordion());
See if that helps you.
I've ended up going with a different approach and tying functionality to mapped strings. I now use one attribute for everything . I do a find() based upon that and load it with it's associated value.
pseudo: $(this)[$(this).attr('ui:component')]();