craigsworks.com - Support Forum - qTip & ASP.NET UpdatePanel Postback Problem

I would like qTip to show a small form for the users to interact with. That form will require postbacks to perform some work. To make it a smoother experience, I'd like to use an ASP.NET UpdatePanel so that it doesn't show a full postback.

The problem I have is that when the page is loaded inside a tip, it always performs a full postback. (and navigates away from the original page) When I view the page with the UpdatePanel by itself, it does the AJAX partial postback. (as expected)

Page 1:

HTML Code

<%@ Page Language="VB" CodeFile="Page1.aspx.vb" Inherits="Page1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
 
    <script src="../jQuery/1.3.2/jquery-1.3.2.min.js" type="text/javascript"></script>
 
    <script src="../jQuery/1.3.2/jquery.qtip-1.0.0-rc3.min.js" type="text/javascript"></script>
 
    <script type="text/javascript">
        $(document).ready(function() {
            $('#content a[rel]').each(function() {
                $(this).qtip(
  {
      content: {
          text: '<img src="../images/spinner.gif" alt="Loading..." />',
          url: $(this).attr('rel'),
          title: {
              text: $(this).text(),
              button: 'Close'
          }
      },
      show: {
          when: 'click'
      },
      hide: 'unfocus',
      style: {
          width: 500
      }
  })
            });
        });
 
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div id="content">
            <a href="#" rel='UpdatePanel.aspx'>
                Test
            </a>
        </div>
    </div>
    </form>
</body>
</html>

And here is the page it is opening: (for testing purposes, the button just puts the current time in the label)

HTML Code

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="UpdatePanel.aspx.vb" Inherits="Display_UpdatePanel" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:Button ID="btnPush" runat="server" Text="Push" />
 
                <asp:Label ID="lblResult" runat="server" />
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>

You'll need to prevent the default action on the link too:

JS Code

$(document).ready(function() {
            $('#content a[rel]').each(function() {
                $(this).qtip(
  {
      content: {
          text: '<img src="../images/spinner.gif" alt="Loading..." />',
          url: $(this).attr('rel'),
          title: {
              text: $(this).text(),
              button: 'Close'
          }
      },
      show: {
          when: 'click'
      },
      hide: 'unfocus',
      style: {
          width: 500
      }
  })
  .bind('click', function(){ return false; });
            });
        });

Thanks for the quick reply. I've added that code, but my problem persists.

However, if I'm reading your response correctly, I don't think I was clear in describing my problem. The issue that I am having is that when I click the button on the UpdatePanel.aspx page that is opened in the qTip, that page does a full postback and the browser page is navigated to UpdatePanel.aspx.

Ah I see, sorry I misunderstood. In that case, you'll either need to use an iframe within the qTip content, or attach some event handlers to handle your form submissions via AJAX and update the tooltip content via the API.

Hello..
I am having the same issue. I used iframe and its working fine but I don't want to use iframe. How can I use api or event handlers to achieve this kind of form submission? Can anyone explain?

craigsworks.com - Support Forum

qTipNoob

Craig

qTipNoob

Craig

naupadnara