looping through elements with jQuery based on name attribute rather than id - javascript

Thanks for taking the time to read this.
I have an unknown number of (dynamically inserted) input elements in a form, to each of which I want to attach the datepicker widget included in jQuery UI.
All of the input elements that I want to attach the datepicker to have a class of "date-pick". Obviously because we have more than one matching element we need more than just a class name so that the date value gets returned to the originating field rather than just the first match.
Ordinarily I'd probably just do something like:
$("input.date-pick").each(function(){
$(this).datepicker({dateFormat: "yy-mm-dd"});
});
However in the code I'm working with, the input elements do not have unique IDs until the form data is saved (something that I'm unable to change), though they do have unique name attribute values of the format name="field_id_x[y][z]" which, when the form is saved then gets converted to an id of the format id="field_id_xyz".
So my question is, can anyone show me how to loop through all the input elements with a class of "date-pick" based on their name attribute values?
(PS It might also be worth mentioning that the number of matching input elements in the form can be increased/decreased by the user on the fly.)

Your code should work as it is. However, you could loop through by name like this:
$("input[name*='field_id_'].date-pick").each(function(){
$(this).datepicker({dateFormat: "yy-mm-dd"});
});

The date picker doesn't need the elements to have an ID. You're already looking up the elements for it. This should work:
$('input.date-pick').datepicker({dateFormat: "yy-mm-dd"});
Note you don't even need the each call.
Complete example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>DatePicker Test Page</title>
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.datepicker.js"></script>
<script type='text/javascript'>
$(function() {
$('.dp').datepicker();
});
</script>
</head>
<body>
<hr />
<input class='dp' type='text'>
<input class='dp' type='text'>
<input class='dp' type='text'>
</body>
</html>

have you tried something like
var namefield = "field_id_"
$("date-pick").each(function(index, element) {
if ($(element).attr("name").substr(0,namefield.length) == namefield) {
// code to process
}
});

Related

jquery does not work, when performed ajax request to reload a div

I have read many solutions, and I read that I should use the "on" jquery.but it does not work me.
I have a field that normally works the calendar picker. I have a button, when I click on this, a div is recharged and a field with the same id for the calendar picker function added.
But apparently the button is not working. on the calendar picker it does not work either.
I want to have the button and the text field within the div and make the Ajax request to continue operating the calendar picker.
test.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="X-UA-Compatible" content="IE=8">
<title>
</title>
<link rel='stylesheet' type='text/css' href='../css/jquery-ui-1.9.2.custom.css'/> <!--Carga los estilos de jquery-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery-ui-1.9.2.custom.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#generateDiv").click(function() {
$.ajax({
type:"POST",
url: "ajax.php"
}).done(function(data) {
$("#divReloaded").html(data);
});
})
$( "#fecha" ).datepicker({ dateFormat: 'yy-mm-dd' });
})
</script>
<!--Fin enlaces-->
</head>
<body>
<div id='divReloaded'>
<input type='text' id='fecha'>
<input type='button' id='generateDiv' value='button' >
</div>
</body>
</html>
ajax.php
<?php
echo "not works jquery :(<br>";
echo "<input type='text' id='fecha'>";
echo "<input type='button' id='generateDiv' value='button' >;"
?>
Following discussion in comments, see below answer:
$(document).ready(function(){
// Adopted event delegation to make sure dynamically added elements are bound to
$("#divReloaded").on('click', '#generateDiv', function() {
$.ajax({
type:"POST",
url: "ajax.php"
}).done(function(data) {
$("#divReloaded").html(data);
// Moved this inside the done() function so datepicker is re-applied
$("#divReloaded").find("#fecha").datepicker({ dateFormat: 'yy-mm-dd' });
});
});
});
fetcha does not exist at the time the DOM loads so it has no listener assigned.
You might want to try using an observer to watch for DOM changes, and then add a click handler to the #fetcha ID once it exists.
Learn about the observer pattern here:
https://carldanley.com/js-observer-pattern/
You must re-tailor your own code to make this work.
1 - First of all you don't have any style sheet in your header but only jquery-ui-1.9.2.custom.css
2 - Second you are not explaining if the date picker is included in your custom jquery-ui, if not you ust install a plugin for it.
3 - You need to put the javascript which contains the ajax call just before the body tag on the end of the page.. In this way you allow it to found the input by the 'fecha' id;
4 - I also advise you to use bootstrap.css for your style sheet and bootstrap.js.
I don't understand what your ajax.php is doing.
Your code as now is, can not do what you want.
Try first to take the above mentioned steps code your ajax.php and re-post an other question. We are glad to help you but you fist need to help your self. Let us know.

JQuery $("#content").append not working

I'm trying to learn JQuery, but not doing well. Currently, I'm trying to learn how to use .append to have Ajax functionality which allows one to view new dynamic content without reloading. When I try the following, however, nothing occurs.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>JQuery Test</title>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
</head>
<body>
<div id="content"/>
<script type="text/javascript">
function callback() {
$("#content").append($("qwerty"));
};
$(document).ready(function() {
//window.setTimeout(callback, 100);
callback();
});
</script>
</body>
</html>
To the best of my knowledge, this should make "qwerty" appear as if I has simply done <div id="content">qwerty</div>, but instead I get a blank page. If I replace the .append call with alert("qwerty"), it is properly displayed. What am I doing wrong?
You are trying to find an element with tagname qwerty in the dom like <qwerty>sometext</qwerty> and append it to #content.
To append the string qwerty to #content use
$("#content").append("qwerty");
Demo: Fiddle
$("#content").append("qwerty").
Just remove $ simple in your coding.. if you want to append text, you can directly pass the text in double quotation

Jquery contains selects div too high up

I'm sure this is a complete bonehead move on my side, but can't figure out what's happening here.
I'm trying to select a div with a specific word in it, but Jquery seems to select the div on the wrong level. If you run this you'll see what I mean:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function () {
$(".ms-my-profileDetails:contains('Birthday')").css("color", "red");
});
</script>
</head>
<body>
<div class="ms-my-profileDetails">
<div>
Department : <a href='http://Someurl'>IT</a>
</div>
<br />
<div>
Birthday : <a href='http://Someurl'>1921-04-13</a>
</div>
<br />
</div>
</body>
</html>
The result of the above contains matches the entire div of Birthday and Department <div class="ms-my-profileDetails"> when I only want the Birthday Div.
Pls help.
Tx
You should to something like:
$(".ms-my-profileDetails").children(":contains('Birthday')").css("color", "red");
That should look only on child divs and therefore select the div you want in this case...
An alternative to Antons solution, no idea if it is more efficient
$(".ms-my-profileDetails > div:contains('Birthday')").css("color", "red");
Use :last using contains gets all elements with the keyword you are searching for, so you must use :last to get the exact element that contains it
$("div:contains('Birthday'):last").css("color", "red");
Your selector is wrong.
You tell jQuery to search the element with ".ms-my-profileDetails" that contains "Birthday".
There's only 1 element in your html with that.
Now, you want the div containing "Birthday" INSIDE the element with ".ms-my-profileDetails". That would be :
$(".ms-my-profileDetails div:contains('Birthday')").css("color", "red");
http://jsfiddle.net/pquT7/
tyr this
$(".ms-my-profileDetails").children().last().css("color", "red");

Items added via appendChild method on a dropdown listbox are not displayed under IE8

Initially I thought it was a CSS issue but I built a small sample to repro the issue.
The values: Value1, 2 and 3 are not displayed if you use IE8:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
alert("Thanks for visiting!");
var gridCommandBox = $('#GridCommands')[0];
if (gridCommandBox.options.length == 0) {
gridCommandBox.options.add(new Option("<Select Command>", ""));
var clipGroup = document.createElement("optgroup");
clipGroup.label = "Copy To Clipboard...";
clipGroup.appendChild(new Option("Value1", "Value1"));
clipGroup.appendChild(new Option("Value2", "Value2"));
clipGroup.appendChild(new Option("Value3", "Value3"));
gridCommandBox.appendChild(clipGroup);
}
});
</script>
</head>
<body>
<table>
<tr><td><select id="GridCommands"></select></td></tr>
</table>
</body>
</html>
Any ideas?
Thanks
Max
An Option object is the HTML DOM object that is associated with an tag in HTML. You are instantiating an Option object directly and trying to append this JavaScript object to another DOM element.
While this may work for some browsers, you should be using document.createElement('option') to create the options. If you use the new Option approach, you may also have to add history.go(0) afterwards to force the browser to refresh the select options.

javascript: getElementById problem in IE

I am trying to attach a click event to a check box using JavaScript. Shown below is the HTML and JS.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<input type="hidden" name="caution_c" value="0">
<input type="checkbox" id="caution_c" name="caution_c" value="1" tabindex="120">
<script type="text/javascript">
var cb = document.getElementById('caution_c');
cb.onclick = function() {
alert(1);
}
</script>
</body>
</html>
The problem is that in IE, the click event does not fire. I have narrowed down the problem location. The issue is that there is a hidden input just before the check box and both these elements have the same name. I'm not sure why this is causing a problem(after all, I'm using getElementById and the hidden element does not even have an id).
Is there a valid reason for this type of behavior (IE only. Works fine in Firefox...as always :( )? Also, is there a good workaround (I could just do document.getElementsByName('caution_c')[1] but I don't want to...)
Internet Explorer gets confused over name and id - it is highly recommended to treat these two attributes as if they were the same.
You can fix it either by 1) ensure that there are no id/name conflicts in your document, or 2) override IE's native getElementById-method.
Read more about it here.
Try using a different event such as onchange or onfocus to see if that solves it. Also I don't think onclick will be fired if a user tabs onto the checkbox, which may or not be how you intend it to work.
I agree, IE is poor in understanding things at html level.
I would rather add the link to button rather than using anchor elements, as IE is having trouble at anchor level with document.getElementById(). Try same at button and will work for other users.

Categories