Getting All Data-Bind Values Using JQuery

Question

    function getDbValue()
{
    alert($('[data-bind]').length);
    alert($('[data-bind][0].data-bind'));
    alert($('[data-bind][0].value'));
    jQuery.each($('[data-bind]'), function(databind,key)
    {
        alert(key);
        alert(databind);
        alert(databind[key].data-bind);
    })

}

The above is my function and i want to read all inputs that have the properties data-bind within them for example

<input type="text" id="frmIn1-Officer" data-bind="value: AOfficer" class="InputText"/>

^ When running my function i would want it to return 'AOfficer' as that is the data-bind value.

So an example is

<input type="text" id="frmIn1-Officer" data-bind="value: AOfficer1" class="InputText"/>
<input type="text" id="frmIn1-Officer" data-bind="value: AOfficer2" class="InputText"/>
<input type="text" id="frmIn1-Officer" data-bind="value: AOfficer3" class="InputText"/>
<input type="text" id="frmIn1-Officer" data-bind="value: AOfficer4" class="InputText"/>
<input type="text" id="frmIn1-Officer" data-bind="value: AOfficer5" class="InputText"/>
<input type="text" id="frmIn1-Officer" data-bind="value: AOfficer6" class="InputText"/>

And in the for each loop i would like to be able to use the value of data bind.. e.g values[0] = 'AOfficer1'

Sorry if my explanation is slightly confusing, i have the idea in my head perfect but trying to put it in writing is alot harder.

Have you tried jquery's .data() method? $('input').data('bind');? api.jquery.com/jQuery.data — Jason Towne
– Jason Towne, Commented Jun 15, 2012 at 14:40
Yes but when using the for each statement and doing that i get Uncaught TypeError: Object 0 has no method 'data' — Lemex
– Lemex, Commented Jun 15, 2012 at 14:42
That's probably because in your for each loop you're using the native DOM element and not a jQuery object. Only an element wrapped in a jQuery object will have the .data() method. — Jason Towne
– Jason Towne, Commented Jun 15, 2012 at 14:51

Milimetric · Accepted Answer · 2012-06-15 14:45:20Z

5

jQuery interprets the "data-something" attributes differently than other attributes. So you should select all your elements and look for their data bindings like this:

$(document).ready(function(){
    $('input.InputText').each(function(){
        var input = $(this);
        if ($(input).data().bind) {
            alert($(input).data().bind);
        }
    });
});

Then you can do string manipulation to parse out your values, I'd suggest using JSON and just loading it in like an object. Here's a working fiddle: http://jsfiddle.net/3NERK/6/

answered Jun 15, 2012 at 14:45

Milimetric

13.5k4 gold badges49 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

dvir · Accepted Answer · 2012-06-15 14:52:19Z

2

You can search for any element that has a data-bind attribute by the jQuery attribute selector - $("[data-bind]"), and then iterate on it with .each() and construct the dataBinds array out of it, stripping the value: out of each value.

This will do the trick:

dataBinds = [];
$("[data-bind]").each(function(){
     dataBinds.push($(this).attr("data-bind").substring(7));
});

I've set up an example of it: http://jsfiddle.net/dvirazulay/YPnwQ/

edited Jun 15, 2012 at 14:52

answered Jun 15, 2012 at 14:44

dvir

5,1241 gold badge25 silver badges32 bronze badges

Comments

Esailija · Accepted Answer · 2012-06-15 14:44:17Z

1

$( "[data-bind]" ).each( function() {
    var elem = $( this );
    alert( elem.data( "bind" ) );
});

http://jsfiddle.net/NhNhK/

answered Jun 15, 2012 at 14:44

Esailija

140k24 gold badges280 silver badges328 bronze badges

Comments

Rafael Verger · Accepted Answer · 2012-06-15 14:45:47Z

1

Get all elements with data-bind attribute: $('[data-bind]')

Iterating these elements and manipulating the data-bind attribute:

$('[data-bind]').each(function(element,index){
  var data_bind = $(element).data('bind');
  alert(data_bind);
})

answered Jun 15, 2012 at 14:45

Rafael Verger

1,77113 silver badges18 bronze badges

Comments

Jason Towne · Accepted Answer · 2012-06-15 14:45:45Z

0

You can use the .data() method with .each() to accomplish this.

DEMO

$('input').each(function() {
    var $this = $(this);

    alert($this.data('bind').replace("value: ", ""));            
});

answered Jun 15, 2012 at 14:45

Jason Towne

8,0505 gold badges58 silver badges71 bronze badges

Collectives™ on Stack Overflow

Getting All Data-Bind Values Using JQuery

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related