CODEWITHSUNDEEP
jquery
Echo
Echo

Reputation: 3029

Pass parameter to JQuery method

I have a list of objects and I loop over it and display a value from that list to the user using a straight HTML <label> into my Free Marker.

With each single loop, I render a button that is supposed to take that property which is previously rendered.

I do the following :

[#list myObjectList as object]
<label>  ${object.parameterA} </label>
<label>  ${object.parameterB} </label>
<input type="button" id="[@spring.url '/myUrl'/]"
                     class="testBtn btn testPassParameter"
                     value="Test the method" 
</input>
[/#list]

$('.testPassParameter').each(function() {
        $(this).click(function(event) {
            //Here I need to do some sort of magic to
            //fetch the value of  {object.parameterA} 
            }
     }
});

I tried to use div and assign a dynamic value as an ID to that div instead of using <label> Then I can get the value from that div using getElementById(). However, how could I get the element ID as I'm looping over a list and I need that particular property value?

Upvotes: 0

Views: 185

Answers (3)

David Thomas
David Thomas

Reputation: 253318

My first thoughts of an approach to this problem:

$('.testJQuery').each(function() {
    $(this).click(function(event) {
        var values = {}; // creating an object

        // looking at all table rows except for the one containing the button
        $('tr').not($(this).closest('tr')).each(
            function(){
                // the first 'label' is the label-text
                l = $(this).find('label:eq(0)').text();

                // the second 'label' is the value (for some reason)
                v = $(this).find('label:eq(1)').text();

                values[l] = v;
            });

        // using the console to allow for exploration of the returned object
        console.log(values);

        // just to prevent submission
        return false;
    });
});

JS Fiddle demo.

This approach is somewhat unwieldy, given that it has to look at every table-row and then look for labels. In your finished version will there be one label-value pair per table? Or multiples?

If there's more than one pair per table what do you want to happen?

Incidentally, a label is used to uniquely identify an associated input element in a form; if you don't have an associated input you're using labels incorrectly. If you used, instead:

<td class="labelValuePairs">
    <span class="label">ParamB:</span>
    <span class="value">ParamB value</span>
</td>

It becomes slightly easier to work with, for example:

$('.testJQuery').each(function() {
    $(this).click(function(event) {

        var table = $(this).closest('table'),
            labelText = table.find('.labelValuePairs span.label').text(),
            valueText = table.find('.labelValuePairs span.value').text();

        alert(labelText + ' ' + valueText);

        return false;
    });
});

JS Fiddle demo.

It's worth noting that you don't need to iterate over the $('.testJQuery') elements with each(), the click() method will apply to all elements returned by the selector. The above, then, can be reduced to:

$('.testJQuery').click(function(event) {

    var table = $(this).closest('table'),
        labelText = table.find('.labelValuePairs span.label').text(),
        valueText = table.find('.labelValuePairs span.value').text();

    alert(labelText + ' ' + valueText);

    return false;
});

JS Fiddle demo.

Upvotes: 1

driangle
driangle

Reputation: 11779

add a class to your parameter A element to:

<label class="parameterA">  ${object.parameterA} </label>

change your JS to:

$('.testPassParameter').click(function() {
    var parameterA = $(this).prev(".parameterA:eq(0)").text();
});

Upvotes: 1

uadnal
uadnal

Reputation: 11435

Within your click method use $.prev to access a previous sibling.

$('.testPassParameter').each(function() {

        $(this).click(function(event) {
            //Here I need to do some sort of magic to
            //fetch the value of  {object.parameterA}
            console.log($(this).prev().text()); // access text of label
         });

});

http://jsfiddle.net/EjebG/2

Upvotes: 1

Related Questions