I'm going nuts here but the each function is just not working for me.
I have about 20 elements with a class name of "lookup" (text boxes) and this function successfully turns all elements red:
document.addEvent('domready', function()
{
var tb = $$('.lookup');
tb.setStyle("color", "red");
});
However, in the following code, I would expect to get some alert for each element but the alert don't hit at all, and no exception is raised either. It is like the each is iterating through 0 items....
document.addEvent('domready', function()
{
var tb = $$('.lookup');
tb.each(function(el)
{
alert("hi");
});
});
Any idea what I might be doing wrong?
In both examples above, I used $$('.lookup').each and $$('.lookup').setStyle() with the same outcome (example 1 works; example 2 doesn't).
Thanks in advance.
Which browsers have problems? Try use 'window' instead 'document'
window.addEvent('domready', function(){
var tb = $$('.lookup');
tb.each(function(el){
el.setStyle("color", "red");
alert("hi");
});
});
In mootools better always use 'each' for working with array of elements.
I've discovered that reordering the mootools include script so that it is referenced after the Microsoft WebResource.axd?d= include script resolves the problem. Mootools appears to handle the conflict, whereas Microsoft ASP.NET can't.
Related
I'm using Mootools (don't think it is related to the problem) to drag and drop and element.
var draggable = new Drag(timeHandle, {
onDrag: function () {
var calculatedTime = calcTime();
$('timeLabel').innerHTML = calculatedTime;
},
});
Basically, I can drag my 'timeHandle' and the 'timeLabel' is getting updated properly.
The problem is that sometimes, after moving the handle a little bit, suddently, the UI is not getting updated. The 'timeHandle' is not moving and the 'timeLabel' is not getting updted.
The problem is not with the drag event, I can see it keeps on getting called.
When I move
$('timeLabel').innerHTML = calculatedTime;
everything works fine.
So, the problem is not with the 'Drag' object since the event is kept on calling.
Looks like some UI performance issue.
Thanks
To simplify your code, you can use Element.set('text', 'my text here');
var element = $('timeLabel');
var draggable = new Drag(timeHandle, {
onDrag: function () {
element.set('text', calcTime());
}
});
Also, remember to remove that last comma or it will throw errors in Internet Explorer.
OK, found a to make it work.
I still not sure what caused the problem but it looks like the 'innerHTML' command has either really poor performance which causes problems in the GUI updates or maybe some kind of internal mechanism (IE only? which is supposed to prevent the UI from updates overflow.
Anyway, instead of using the innerHTML, I'm doing the following:
var draggable = new Drag(timeHandle, {
onDrag: function () {
var calculatedTime = calcTime();
var element = $('timeLabel');
element.removeChild(element.firstChild);l
element.appendChild(element.ownerDocument.createTextNode(calculatedTime));
},
});
Works like a charm
I'm updating an html5 datalist dynamically, as the user types, with the following script:
$('#place').on('keyup', function() {
$.post('content/php/autocomp.php', { field: 'plaats', val: $('#place').val() }).done(function(response) {
$('#autocomp-places').html(response);
});
});
Which works fine except that the datalist often doesn't show right away. When I inspect the element the html is there but the datalist is not shown as soon as it's updated. How can I force it to show?
For the record: it works... I just wish it would always show the new suggestion right away.
Please use success instead of done method of ajax and try again.
$('#place').on('keyup', function () {
$.post('content/php/autocomp.php', {
field: 'plaats',
val: $('#place').val()
}).success(function (response) {
$('#autocomp-places').html(response);
});
});
I think I just have found a decent workaround for this!
Here is my pseudo-code:
As I type, I make async httprequests to get data.
When data is returned, i clear and re-populate the datalist.
If the current input field is still focused, manually call .focus() on the input element (this seems to force the data-list popup behavior to occur).
First, I would try to use one of already available solutions such as the jQuery UI autocomplete. It will shorten your development time and make the code free of typical bugs (not to mention getting the benefits from someone else work in the future).
If you really want to create your own version, I would make sure the list is cleared and repopulated with the following code:
$('#place').on('keyup', function() {
var posting = $.post('content/php/autocomp.php', { field: 'plaats', val: $('#place').val() });
posting.done(function(data) {
$('#autocomp-places').empty().append(data);
});
});
I'm trying to use the placeholder="xxx" attribute in my web application, and I don't want to have a special visual for IE9. Can people throw out some good suggestions for achieving this functionality in IE9?
I've found a couple links on here but none of the suggested scripts were sufficient... and the answers were from mid-2011, so I figured maybe there is a better solution out there. Perhaps with a widely-adopted jQuery plugin? I do not want to use anything that requires intrusive code such as requiring a certain css class or something.
Thanks.
EDIT - I also need this to work for password input fields.
// the below snippet should work, but isn't.
$(document).ready(function() {
initPlaceholders()();
}
function initPlaceholders() {
$.support.placeholder = false;
var test = document.createElement('input');
if ('placeholder' in test) {
$.support.placeholder = true;
return function() { }
} else {
return function() {
$(function() {
var active = document.activeElement;
$('form').delegate(':text, :password', 'focus', function() {
var _placeholder = $(this).attr('placeholder'),
_val = $(this).val();
if (_placeholder != '' && _val == _placeholder) {
$(this).val('').removeClass('hasPlaceholder');
}
}).delegate(':text, :password', 'blur', function() {
var _placeholder = $(this).attr('placeholder'),
_val = $(this).val();
if (_placeholder != '' && (_val == '' || _val == _placeholder)) {
$(this).val(_placeholder).addClass('hasPlaceholder');
}
}).submit(function() {
$(this).find('.hasPlaceholder').each(function() { $(this).val(''); });
});
$(':text, :password').blur();
$(active).focus();
});
}
}
}
We just researched the same thing. We decided on reusing this gist, by Aaron McCall, after making some minor changes. The main advantage is that it's simple, easy to understand code:
Remove the kernel and setup_placeholders parts. Just call it immediately in an anonymous function.
Add var before test.
For browsers that support placeholder, it simply falls back to that. It also handles new input elements (note the use of delegate) in existing forms. But does not handle dynamic new form elements. It could probably be modified to do so with jQuery.on.
If you don't like this one, you can use one of the ones here. However, some of them are overcomplicated, or have questionable design decisions like setTimeout for detecting new elements.
Note that it needs to use two pairs of parens, since you're calling an anonymous function, then calling the returned function (this could be factored out differently):
(function () {
// ...
})()();
I wrote a jquery plugin a while back that adds the placeholder support to any browser that does not support it and does nothing in those that do.
Placeholder Plugin
Here's a jQuery plugin that works with password fields as well. It's not as tiny as the code suggested by Matthew but it has a few more fixes in it. I've used this successfully together with H5Validate as well.
http://webcloud.se/code/jQuery-Placeholder/
I have a dynamic HTML table, where I can add and remove rows.
Each row contains a button that has a class removeRow.
In my JavaScript, I have:
$('button.removeRow').live("click", function () {
var row = $(this).parents('tr')
row.remove();
return false;
});
The problem is that it works for all buttons that belong to rows that were inserted after the page was loaded (by clicking on 'Add row' button).
It works for existing buttons, only if I change the above code to (but then it does not work for dynamically added rows):
$('button.removeRow').click(function () {
var row = $(this).parents('tr')
row.remove();
return false;
});
I think that the live function should work for both, so can you point me into the right direction? Where can it go wrong?
OK I found a bug today. Somewhere in my code I had:
$('input[type=submit], button').click(function () {
return false;
});
I wanted it to work with the submit button, so it would not submit the form on click. I do not remember why I put button there. Anyways, because of that my static button clicks were attached this event, while dynamically created ones were not. Therefore live 'click' worked for dynamic buttons. Stupid mistake...
Hacky solution: Do both
$('button.removeRow').live("click", function () {
var row = $(this).parents('tr')
row.remove();
return false;
});
and
$('button.removeRow').click(function () {
var row = $(this).parents('tr')
row.remove();
return false;
});
It would be helpful if you posted some example HTML as well as the code responsible for inserting new rows, though.
Maybe something is going wrong if other tr elements are matched by your .parents() selector. Try .closest():
$('button.removeRow').live("click", function(){
$(this).closest('tr').remove();
return false;
});
The live should work for both dynamic and pre-rendered elements.
I'd start by working out if that content really exists before that jQuery is run...Try outputting the result of the following somewhere, or use the debugger keyword, or even the dreaded alert:
$('button.removeRow').length
// The rest of your click handler definition...
I have a jQuery datepicker function bound to the "birthday" input html element, written in the page header:
<script type="text/javascript">
$(function() {
$( "#birthday" ).datepicker();
});
</script>
Next, I have some AJAX functionality - it adds new input html element to the page. That element is:
<input type="text" id="birthday" value="" class="detail-textbox1" />
Clicking on that birthday element does not pop up the date picker below the text field. I expected this, as the element is added after the page is loaded, thus it isn't in relation with the function provided in the header.
How can I make it work? I tried moving the script from the header to the body, but nothing seems to work. Thanks.
P.S. If I create an input html element with id="birthday" in the page body, everythig works as expected. It appears that only the elements added through AJAX are dysfunctional.
I'm a bit late to the party, but for thoroughness - and with the .live() function being deprecated from jQuery 1.7 onwards - I thought I'd provide an updated solution based on my experiences, and from all the help I got from other answers on StackOverflow!
I had a situation where I needed to add the datepicker functionality to input fields that were being added to the DOM through AJAX calls at random, and I couldn't modify the script making the AJAX calls to attach the datepicker functionality, so I opted for the new shiny .on() function with its delegation features:
// do this once the DOM's available...
$(function(){
// this line will add an event handler to the selected inputs, both
// current and future, whenever they are clicked...
// this is delegation at work, and you can use any containing element
// you like - I just used the "body" tag for convenience...
$("body").on("click", ".my_input_element", function(){
// as an added bonus, if you are afraid of attaching the "datepicker"
// multiple times, you can check for the "hasDatepicker" class...
if (!$(this).hasClass("hasDatepicker"))
{
$(this).datepicker();
$(this).datepicker("show");
}
});
});
I hope this helps someone, and thanks for all the answers so far that led me to this solution that worked for me! :)
You need to use .live() so that any newly added elements have the event handler attached: http://api.jquery.com/live/
$('#birthday').bind('load', function() {
$(this).datepicker();
});
EDIT
.live() documentation states, that it is a bit out of date. With new versions of jquery (1.7+) use .on().
Boris, JK: This was super helpful for me. I have also found that you can use the following for AJAX html if you want to use Datepicker's date range selection:
$('#groundtransporation').live('focus', function() {
var gt = $( "#rentalPickUp, #rentalDropOff" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 2,
onSelect: function( selectedDate ) {
var option = this.id == "rentalPickUp" ? "minDate" : "maxDate",
instance = $( this ).data( "datepicker" ),
date = $.datepicker.parseDate(
instance.settings.dateFormat ||
$.datepicker._defaults.dateFormat,
selectedDate, instance.settings );
gt.not( this ).datepicker( "option", option, date );
}
});
});
I got another case.
My script is copying last table elements including datepicker.
The jquery will not working because the copied element has mark that it "hasDatepicker".
To activate datepicker in new element, remove that class name and the initiate it, like this.
$("#yournewelementid").attr("class","your-class-name");
$("#yournewelementid").datepicker();
your issue is always happens when elements don't exist when you try to initialize it.
When you use $(function(){/** some code **/}); elements must exsit on the document, it means that has to be on the html so you could can create a function to initialize the component or initialize it on the success event after been add it to the document.
Is important to first add the external html load in the ajax request to the document before you try to initialize it or it won't be initialize at all.
Example:
$.ajax({
url:"ajax_html.html",
dataType:"html"
}).done(function(html){
$("#selector").html(html)
init();
});
function init(){
$(".birthday").datepicker({});
}
You could initialize the date picker for the newly added element within your ajax success callback:
$.ajax({
...
success: function(response) {
if(response.success) {
$(body).append(response.html);
$("#birthday").datepicker();
}
}
});