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.
Related
Is there any way to achieve angularjs attribute directive in polymer. I want to call a function based on a particular attribute attached to any element.
This is what works for me right now, but this is very non-generic.
Is there any easier way to extend behavior of elements using just attributes like
<paper-input behavior="custom-behavior" custom-behavior-attribute="some-data"></paper-input>
I have started building an app in Polymer which was already done in Angular. Even I had the same query running on my mind and I found this link related to this topic and it says Polymer's behavior is the equivalent to Angular's attribute directive.
https://plus.google.com/+JustinFagnani/posts/EjdR14bA7Dj
It will be useful if someone can confirm that there are no other approach available to achieve the same.
I'm trying to change the content of a href using jQuery. I've found a number of good answers on this site, and am trying to use this one to implement it:
How to change the href for a hyperlink using jQuery
I have it wrapped in an if statement like this:
if(window.location.href == "http://test.com/Home.aspx"){
$("a[href='https://www.surveymonkey.com/s/tester123']").attr('href', 'https://www.surveymonkey.com/s/tester234');
}
I've put some console logs in place and they show that this line of code is being reached, and that this:
$("a[href='https://www.surveymonkey.com/s/tester123']")
Is returning the correct link. However the href value is never replaced when I check the page source.
I'm using http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js?build=7111092
I'm a bit stuck on how to debug what the issue is, can anyone help spot it? Hopefully its just a stupid mistake!
--EDIT--
I have now also checked it using inspect element and it's not been replaced unfortunately.
Also thanks to #Vohuman and #roxxypoxxy for the info on not being able to see the change unless I hovered over it. Stupidly I was expecting it to work like a find/replace!
I think it is a Jquery version issue. You are using Jquery 1.5. In Jquery docs they have mentioned this
Before jQuery 1.6, the .attr() method sometimes took property values
into account when retrieving some attributes, which could cause
inconsistent behavior.
Source https://api.jquery.com/attr/
So try to use higher JQuery version or use .prop() instead of .attr()
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()?
Is there a Javascript component that allows me to simply pass it a string made up of arbitrary HTML (any HTML I wish to use) and will show that HTML in a lightbox?
I've been scouring the internet, searching for examples, but it seems like there simply isn't any component capable of doing this.
Even LightWindow, which claims to be all-purpose, still requires me to attach it to an tag with the href set to an element ID.
This isn't what I want. I want to be able to call a function and pass in the HTML myself.
(Another issue with LightWindow is that it requires scriptaculous as a dependency. The project already uses jQuery, and I'd rather not include two frameworks at once.)
Any ideas?
colorbox is great. It relies on JQuery.
To use it with an html string, you would call it like this:
$.colorbox({html:'<p>Hello</p>'});
You can use jqModal or jQuery UI dialog.
SLaks is correct. You should definitly use JQuery UI dialog. Here is an example of using the JQuery dialog as a modal, very similar to using lightbox.
$("#dialog-message").dialog({modal: true});
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();