CODEWITHSUNDEEP
c#javascriptjqueryasp.net
SearchForKnowledge
SearchForKnowledge

Reputation: 3751

How to prevent postback on asp button while displaying a popup using JQuery

I have the following ItemTemplate in my GridView:

<ItemTemplate>
    <asp:Button UseSubmitBehavior="false" runat="server" ID="btnShow" CssClass="btnSearch" Text="View All" CommandName="ViewAll" OnClientClick="myfunction(); return false;" OnCommand="btnShow_Command" CommandArgument='<%#((GridViewRow)Container).RowIndex%>' />
</ItemTemplate>

For the ItemTemplate I have a button which opens a popup window when clicked by using the following JQuery:

$(document).ready(function () {
    $(".btnSearch").click(function (e) {
        e.preventDefault();
        //centering with css
        centerPopup();
        //load popup
        loadPopup();
    });
});

function myfunction() {
}

my Command code-behind:

protected void btnShow_Command(object sender, CommandEventArgs e)
        {
            int index = 0;

            if (e.CommandName == "ViewAll")
            {
                index = Convert.ToInt32(e.CommandArgument);

                DataTable cacheTable = HttpContext.Current.Cache["ResultsTable"] as DataTable;

                string column = cacheTable.Rows[index].Field<string>("Guideline");
                string test = BookingResults.Rows[index].Cells[7].Text;
                string html = HttpUtility.HtmlDecode(column);

                ResultsDiv.InnerHtml = html;
                //tbGL.Text = html;
                //upData.Update();
                //MessageBox.Show(index.ToString());
            }
        }

I added the OnClientClick="myfunction(); return false;" because it was doing a postback each time I clicked. If I have multiple rows, it only works the first time I click but any time after, the popup is not displayed when another or the same button is clicked.

How do I resolve it so no matter which button is clicked the popup is displayed without doing a postback?

Upvotes: 0

Views: 4028

Answers (3)

Mayank
Mayank

Reputation: 1392

Actually you have not showed up the implementation of your method myfunction(), in case the myfunction() method have any syntactical error then the OnClientClick event will be void and it will post-back/submit the form to the server.

Try to remove the call from OnClientClick and just implement your logic at jquery on click event by using class selector as follows

$(document).ready(function () {
        $(".btnSearch").click(function (e) {
            e.preventDefault();
            alert($(this).val() + " Clicked"); // you can put your method mymethod() here 
            // you can put youe popup logic here

            return false; 

        });
    });

You can also see this example of js fiddle

Upvotes: 1

Amit Guleria
Amit Guleria

Reputation: 231

OnClientClick="return myfunction(); 

function myfunction(){
// you can put youe popup logic here 

    return false;

}

Using like this your button never do post back.

Upvotes: 0

Louis Michael
Louis Michael

Reputation: 398

Put it out on the tag or <%: Html.BeginForm %> tag

Upvotes: 0

Related Questions