0

I have a table which is populated with javascript, fetching data via ajax. I have a <tr> template which I clone and set the values within to the data retrieved via the ajax request. I'm using Twitter bootstrap's popovers, so that users can click on a cell, which pops the popover with an input/select etc prompting the user to change the cell value. The problem occurs when I am setting the value of those inputs. When I am building each row, I set the value of the input in the popover template with .val('xxx'), but when I log it/click the cell and view the popover, nothing is changed; conversely, if I set it with .attr('value', 'xxx'), it works just fine.. why would .val('xxx') not work?

Here's what the meat of it looks like..

Row template:

    ....
    <td>
        <div class="last-name popover-toggle">
            <span class="vlabel">----</span>

            <div class="popout">
                <input type="text" name="last_name" value=""/>
                <div class="popout-button-container">
                    <button type="button" class="btn btn-primary btn-small cancel-field">Cancel</button>
                    <button data-url="{{ url('edit_lead.json') }}" type="button" class="btn btn-primary btn-small save-field">Save</button>
                </div>
            </div>
        </div>
    </td>
    ....

Setting input value:

...
if (data['last_name']) {
    $nRow.find('.last-name input[name=last_name]').val(data['last_name']);//.attr('value', data['last_name']);
    $nRow.find('.last-name .vlabel').text(data['last_name']);
}
registerPopover($nRow.find('.last-name'), 'Last Name');
....

Register popover:

function registerPopover(el, title) {
    var options = {
        animation: false,
        content: el.find('.popout').html(),
        html: true,
        trigger: 'manual'
    };
    if (typeof(title) != 'undefined') {
        options['title'] = title;
    }
    el.popover(options);
}
bruchowski
  • 5,043
  • 7
  • 30
  • 46
  • 2
    Hard to tell what's happening, can you reproduce the problem on a live demo? – elclanrs Sep 30 '13 at 23:24
  • I think `$nRow.find('.last-name')` will return a set of elements. Have you tried using `$nRow.find('.last-name').each(function() { /* ... */ });`? – Alejandro Iván Sep 30 '13 at 23:31
  • @AlejandroIván I logged the result of `$nRow.find('.last-name input[name=last_name]')`, it is just one element, thought of that too :/ – bruchowski Sep 30 '13 at 23:33
  • By the way, have you tried it on another browser? I've seen some cases where `val()` works OK (like Chrome), but on Firefox/IE/Safari it fails. – Alejandro Iván Sep 30 '13 at 23:53

1 Answers1

1

Not sure what is your actual problem, question is not very obvious to me but there is a difference between attr and val. The attr method sets/change the attribute of an input/element in the source and you may see it using browser's inspection tool, on the other hand, val method sets/update the rendered property which is in the memory but it doesn't effect the original source/HTML in the browser's source code. For example, if you do something like this

HTML:

<input type = "text" name="txt" id = "txt" value = "Hello!" />

JS:

$('#txt').val('World!').clone().insertAfter($('#txt'));

And check the source code, then you'll see there is two input elements and both have value attribute Hello! but on the screen both have world!. Check this detailed answer.

Community
  • 1
  • 1
The Alpha
  • 143,660
  • 29
  • 287
  • 307
  • I think you may have solved it, to grab the contents of the popover, in registerPopover(..) I set the `content` option in the popover() method, which uses `element.find('.popout').html()`, are you saying that since I am only setting value of the `value` property and not the attribute, when .html() is called to retrieve the html for the popover, that information is lost? – bruchowski Oct 01 '13 at 16:28
  • I just gave you the idea difference of both methods and I didn't see you used `html` in your code and was bit confused about the question. – The Alpha Oct 01 '13 at 16:34