Accessing custom data attributes from an array of inputs jquery

Question

So I am having trouble accessing a custom data attribute in my web application, and debugging in google chrome gives me "$myModalInputs[4].attr is not a function" and I am just wondering where I am going wrong.

(you can ingore the loop, its not working yet but it is also not the source of my headache)

function displayData(myInputs){
var $myModal = $(".modal-body");
var $myModalInputs = $($myModal.find(".form-control").toArray());

// error is at this line:
alert($myModalInputs[4].attr("data-control-number"));
for (var i = 0; i < myInputs.length; i++)
{
    var $currentValue = myInputs[i].value;
    var $currentControl = $('.modal-body[data-control-number="' + i + '"]');
    alert($currentControl.data("control-number"));
}}

html section that is in scope

 <div id="myModal" class="modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4>New Line Item</h4>
                </div>
                <div class="modal-body">
                    <div class="container">
                        <div class="row">
                            <div class="col-xs-6">
                                <label>Cost Center:</label>
                                <br />
                                <asp:DropDownList ID="DropDownList1" CssClass="form-control" runat="server" data-control-number="1"></asp:DropDownList>
                            </div>
                            <div class="col-xs-6">
                                <label>Account Number</label>
                                <br />
                                <asp:DropDownList ID="DropDownList2" CssClass="form-control" runat="server" data-control-number="2"></asp:DropDownList>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-6">
                                <label>JON:</label>
                <asp:TextBox ID="TextBox5" CssClass="form-control" runat="server" data-control-number="3"></asp:TextBox>
                            </div>
                            <div class="col-xs-6">
                                <label>Item Name:</label>
                <asp:TextBox ID="TextBox6" CssClass="form-control" runat="server" data-control-number="4"></asp:TextBox>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-6">
                                <label>Item Description:</label>
                <asp:TextBox ID="TextBox7" CssClass="form-control" runat="server" data-control-number="5"></asp:TextBox>
                            </div>
                            <div class="col-xs-6">
                                <label>Quantity:</label>
                <asp:TextBox ID="TextBox8" CssClass="form-control" runat="server" data-control-number="6"></asp:TextBox>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-6">
                                <label>Unit Price:</label>
                <asp:TextBox ID="TextBox9" CssClass="form-control" runat="server" data-control-number="7"></asp:TextBox>
                            </div>
                            <div class="col-xs-6">
                                <label>Tax:</label>
                <asp:TextBox ID="TextBox10" CssClass="form-control" runat="server" data-control-number="8"></asp:TextBox>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-12">
                <label>Receipt/Attachment:</label>
                <asp:FileUpload ID="FileUpload1" CssClass="form-control" runat="server" data-control-number="9"/>
                            </div>
                        </div>
                    </div>
                </div> <!--End Modal Body -->
                <div class="modal-footer">
                    <div id="moda-buttons">
                        <button></button>
                        <button></button>
                    </div>
                <div id="modal-pagination">
                    <ul class="pagination"></ul>
                </div>
                </div>
            </div> <!-- End Modal Content --> 
        </div>
    </div>

interesting thing is I can get the value of the input at that index in array, I can even get the id if i use .id. I just can not get the custom data attribute, which I guess I do not 100% need, but it would make the application less dependent on the html.

Also, I get the same error if i use the .data() as suggested HERE

Note: As show by the HTML my input controls are asp/.net

If anyone can shed some light onto this it would be greatly appericated.

score 0 · Accepted Answer · answered Oct 07 '16 at 19:15

0

At this point:

$myModalInputs[4].attr("data-control-number")

each item in $myModalInputs is a reference to the element, not a jQuery object.

You could do this to convert it to a jQuery object:

$($myModalInputs[4]).attr("data-control-number")

Or (a better option) leave it as a jQuery object from the beginning,

var $myModalInputs = $myModal.find(".form-control");
alert($myModalInputs.eq(4).attr("data-control-number"));

answered Oct 07 '16 at 19:15

Jason P

26,984
3
31
45

Awesome! that worked, thanks. But to make sure I understand whats going on here...useing the [x] means I am just pointing to the input, but if i use the equal function, this keeps it as a Jquery object? Or it brings in the html element as a Jquery object? – Jeffrey Quinn Oct 07 '16 at 19:27
`.toArray()` converts it from a jQuery collection to a standard array of elements. The indexing syntax `[]` doesn't work on jQuery collections. – Jason P Oct 07 '16 at 19:29
interesting, I did not notice that you took the .toArray() out of my variable...but I replace the indexing syntax with the equal function and it worked. If the .toArray() made it a standard array of elements, why would the .equal function make it work? I am pretty new to Jquery so I appologize if this is standard stuff. – Jeffrey Quinn Oct 07 '16 at 19:34
Not sure. You can `console.log()` anything at any point to see what it looks like. That may be enlightening. – Jason P Oct 07 '16 at 19:45

Accessing custom data attributes from an array of inputs jquery

1 Answers1