Question

I’m trying to get twitter bootstrap’s .popover working within a .submit jquery event but nothing happens after i click the submit button on my form. I’m changing the “rel” attribute of an input field so that when the user clicks the submit button, a popover is added to that field. The popover shows up if I do it the regular way of setting the rel attribute before the page is loaded.

Here’s the input field:

<label class="control-label" for="input-name" id="input_name_label">Name *</label>
        <div class="controls">
            <input rel="" data-original-title="Title" data-content="Random Text" type="text" class="span3" name="name" id="input-name">
        </div>

and here’s the jquery function:

<script>
    $("#project_form").submit(function(e) {
            for(i=0;i< $("label").length;i++){
                    var str=$("label").eq(i).text();
                    if(str.charAt(str.length-1)=="*"){
                            $("label").eq(i).attr('rel','popover');
                            console.log($("label").get(i));
                            e.preventDefault();
                            $('input[rel="popover"]').popover('show');
                    }
                    console.log(str.charAt(str.length-1));
            }
            $("#preferences").val($("#sortable").sortable('toArray'));
    });
    </script>

The function finds labels with a * as the last character and is supposed to assign a popover event to them. Thanks for your help.

Answer 1

The issue was that I was assigning a rel attribute to the label field instead of the input field. Yay basic programming errors.