Issues with bootstrap popover and asp:button

Question

I would like to replace js windows by bootstrap popover in few pages but I have two issues and I don't find any solutions.

First, if I click on the button to display the popover, required fields are fired directly. Even if I fill in it the message "xx is a required field" stay displayed.

Second, when I try to save my data. Every fields contain an extra character ",". So if I put 10 in the price field in code behind the value of my field is "10,"

Thanks for your help :)

My code:

<asp:Button ID="btnAdd" runat="server" Text="add" CssClass="btn btn-info"data-toggle="popover" data-placement="top" title="add something" ValidationGroup="vgAdd" />

<div id="testBox" class="hide">
   <asp:ValidationSummary ID="vsTest" runat="server" ValidationGroup="vgAdd" DisplayMode="BulletList" ShowMessageBox="false" ShowSummary="false" />
                                        <div class="row">
                                            <div class="form-group col-sm-6">
                                                <asp:Label ID="lblPrice" runat="server" Text="price" AssociatedControlID="txtPrice" CssClass="control-label"></asp:Label>
                                                <div class="input-group">
                                                    <span class="input-group-addon">$</span>
                                                    <asp:TextBox ID="txtPrice" runat="server" CssClass="form-control" MaxLength="12"></asp:TextBox>
                                                </div>
                                                <asp:CompareValidator ID="cvPrice1" runat="server" Display="None" ValidationGroup="vgAdd" ControlToValidate="txtPrice"
                                                    ErrorMessage="price is invalid." ValueToCompare="0" Type="Double" Operator="GreaterThan"></asp:CompareValidator>
                                                <asp:CompareValidator ID="cvPrice" runat="server" Display="None" ValidationGroup="vgAdd" ControlToValidate="txtPrice"
                                                    Type="Double" Operator="DataTypeCheck" ErrorMessage="price is invalid."></asp:CompareValidator>
                                                <asp:RequiredFieldValidator runat="server" ID="RequiredFieldValidator1" ValidationGroup="vgAdd" ControlToValidate="txtPrice"
                                                    ErrorMessage="Default price is a required field." SetFocusOnError="True" Display="Dynamic" />
                                            </div>
                                            <div class="form-group col-sm-6">
                                                    <asp:Label ID="lblDesc" runat="server" Text="Description" AssociatedControlID="txtDesc" CssClass="control-label"></asp:Label>
                                                    <asp:TextBox ID="txtDesc" runat="server" CssClass="form-control" TextMode="MultiLine" MaxLength="255"></asp:TextBox>
                                                </div>
                                        </div>
                                        <div class="clearfix">
                                            <asp:Button ID="btnSave" runat="server" ValidationGroup="vgAdd" CausesValidation="true"
                                                CssClass="btn btn-primary pull-right"
                                                OnClick="btnSaveTest_Click" Text="Save" />
                                        </div>
                                    </div>

$("[data-toggle=popover]").popover({
        html: true,
        content: function () {
            return $('#testBox').html();
        }
    });

score 0 · Answer 1 · answered Jan 27 '17 at 07:05

0

To fix the first problem you need to remove ValidationGroup="vgAdd" from #btnAdd; you don't want to validate form when this button is clicked.

Regards the second one - there is nothing within your html code what could append comma. You must have something in the back-end code or javascript. I suggest you to debug all the way down from the point when the button #btnSave is clicked - first javascript, then code behind.

answered Jan 27 '17 at 07:05

Morpheus

8,829
13
51
77

Thanks Morpheus. I removed the ValidationGroup so now the popover doesn't fire the required fields. But the message is not display if the field is empty and I want to submit the form. Only the focus go on the field but the message "Default price is a required field." is not displayed under the field. It's displayed only if the popover is closed and open again. About the extra char "," in all of my fields I didn't find a solution. If I'm using data-content instead of the option content, I don't have any problem. I tried tried with a template but same issue. It's really weird. – Tyler Durden Jan 30 '17 at 03:00
When you attach the content to popover the div with id `testBox` will be removed from the original location and therefore the validators won't fire. From memory I think you would need to call `$('#testBox').detach()` when the button is clicked. For setting the content, have you tried `content: $('#testBox').html()`? – Morpheus Jan 30 '17 at 08:59
Actually, my biggest problem is that if I'm using #testBox to display my content, I have two different results depending on the way to display the box. If the button use JS to create a popup everything is fine but if the button use popover I still have a comma added at the end of each field when I'm in code behind. – Tyler Durden Feb 03 '17 at 03:57

Issues with bootstrap popover and asp:button

1 Answers1