Threaded Mode | Linear Mode

qTipNoob

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>

***Craig***

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; });
            });
        });

qTipNoob

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.

***Craig***

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.

naupadnara

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?

Possibly Related Threads...
Thread:		Author	Replies:	Views:	Last Post
	[Solved] qtip shows tail only on postback (refresh)	wwdev	5	131	9th May 20:58 Last Post: wwdev
	[Solved] Help when using an asp.net updatepanel	mark007	4	433	15th February 10:04 Last Post: mark007
	Hiding tooltip problem	sohailanwarpk	2	400	31st January 12:13 Last Post: sohailanwarpk
	[Solved] Starter problem	enne87	1	627	12th July 17:29 Last Post: Craig
	Nested qtip opacity problem	zensurfer	1	917	3rd May 12:49 Last Post: Craig
	qTip problem inside update panel	tonofweb	2	1,114	12th April 08:26 Last Post: kiddailey
	[Solved] z-index problem	RickardL	3	1,382	31st March 19:48 Last Post: kiddailey
	Simpel problem with qtip	SnowJim	4	1,042	22nd February 20:08 Last Post: SnowJim
	Viewport problem	dynamicmindset	8	1,413	18th February 02:12 Last Post: Craig
	qtip with dynamic content using vb.net	mrnorway	1	1,192	13th February 16:33 Last Post: Craig