Asp.Net AJAX Postback

[jpadilla]

Hi everyone!
I was wondering if anyone could give he a hand here.
The thing is that I'm trying to use QTip in a web application that i'm developing here, but I'm not having success...

I'm using ASP.NET (Framework 2.0) and I Have the following situation:

JS Code

...
 
 <script type="text/javascript">
        $(document).ready(function() {
        $('#MyTest').qtip({ content: 'Tooltip Text' });
        });
    </script> 
 
...
 
  <asp:UpdatePanel ID="upp" runat="server" UpdateMode="Conditional">
 
            <ContentTemplate>
 
                <a href="#" id="MyTest">test</a>
 
                <asp:Button ID="MyButton" Text="ClickMe" runat="server" O<strong></strong>nClick="MyButton_Click" />
 
            </ContentTemplate>
         </asp:UpdatePanel>

The problem is that , as u can see, my "tooltip" control is inside the panel that will be asynchronously updated.
That way, we wont "fire" the $(document).ready after this async postback, that way the tooltip for the control wont work.

For the ones that don't know asp.net:
the <asp:UpdatePanel></asp:UpdatePanel> will be render as a div in the final html page.


I had a very similar problem with the JQuery tickbox that I solved like: Instead of adding the "$(document).ready" to "attach" the thickbox to each link, what I did was directly call the js function that did the show modal, was something like:

JS Code

<a href="#" o<strong></strong>nclick="th_show(...);" />

"tb_show" was the function that acctualy showed the modal popup, so that solved my problem...

So I was thinking that I could to the same way here in QTip, but I'm not finding very easy to read the .js file and find out how to directly use the js function to show/hide the tooltip.

Does anyone know how to do that ???


Thanks for any help guys!

ps: sorry abt my english, I'm from brazil

[Craig]

Hi jpadilla, seems you've already cracked how to solve this little problem. What you need to do is stick the qTip within its own function, and call it upon each update of the panel is updated. Is there any kind of optional callback that can be defined in the panel?

[jpadilla]

Hi Craig, thanks for ur reply!

Unfortunately this update panel control does not offer me any way to set up a callback function... I also thought that it could be a way out...

So I was thinking that I could explicity set the tooltip functions under "mouseover" and "mouseout" events from my elements, something like:

JS Code

<div o<strong></strong>nmouseover="ShowqTip(this, 'text here', 'configs here')" o<strong></strong>nmouseout="CloseqTip(this)">My Div Text </div>

But, as I said in my previous post, I'm not being able to find what functions should I call...
Can u give me a hand on that ? Please...


Thanks a lot!

[Craig]

Using the method you suggested, you can do something like so:

JS Code

function ShowqTip(elem, content, options)
{
   $(elem).qtip(
      $.extend(true, options, {
         content: content,
         show: { ready: true }, // Essential to make it show on mouseover the first time
      })
   );
}

[jpadilla]

Hey Craig, thanks a lot!

The code u said is working just fine. The only thing that is happening is that I'm getting a js error just after the async post back... I guess the problem is that the element that once was set with the $(elem).qtip does no longer exists after the post, it would be a "new" instance. Am I right ?

Is where anyway that I could directly call the qTip function without use the jquery selector ?

Because I understood that the code u wrote to me , what it does is forcing the selector under mouseover event, right ??

Can I do something like "onmouseover qTip(this, 'text', 'configs') " ??

thanks a lot Craig!

[jpadilla]

I'm receiving a error in IE saying that the script was in some kind of loop ... and the browser gets too slow...


j$(this).qtip($.extend(true, { content: 'msg',style:'green', show: { ready: true} }));

i'm doing this in the onmouseover event...

any clues ?

[Craig]

jpadilla, try changing the code line to this instead:

JS Code

j<strong></strong>$(this).qtip({ content: 'msg', style:'green', show: { ready: true} });

[jpadilla]

Hi Craig, thanks again!

Now everything seams to be working fine.
The only thing is that I'm still getting a javascript error just after the async postback... it says "Not specified error / Char 35440" (really helpfull ! :mad: ).

Do u have any idea what could be causing it ?

[Craig]

Hmm that sounds like an encoding error. Try alerting the 'data' array in the submit callback to make sure that the text being sent isn't improperly encoded

[jpadilla]

Craig, actually I guess it's not, because it happens only after the async post back... If it was an enconding error it would happend always, dont u agree ?

Everything is almost perfect men! I include qtip in a custom .NET control that i'm creating here, it's getting very nice!

Please help me out kicking off this js errorrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr!!!!!!
hahahaha

[Craig]

Hmmm does it happen when you don't send any data? It might be something to dowith the data being returned rather than the data being sent.

[jpadilla]

craig Wrote:Hmmm does it happen when you don't send any data? It might be something to dowith the data being returned rather than the data being sent.

Hey Craig, check this out:

http://www.joaopadilla.com/testarea/default.aspx


I created the environment so u can see what i'm trying to say...

Do this:

1) Put ur mouse over the image to see the tooltip. Everything is fine.
2) Click the update button
3) Go over the image again
4) See a javascript error ? (I'm using IE 7)

[Craig]

Hmm my IE7 is a standalone and doesn't let me view the error details... could you provide the exact error tha's being shown verbatim? Formatting and all.

Also, apologies for not getting back to you sooner, hectic week this week!

[jpadilla]

craig Wrote:Hmm my IE7 is a standalone and doesn't let me view the error details... could you provide the exact error tha's being shown verbatim? Formatting and all.

Also, apologies for not getting back to you sooner, hectic week this week!

Hi Craig, thatks a lot for all the attention that ur giving me!

Craig, the error that IE is showing me is:

"
Line: 20
Char: 35440
Error: Unspecified error.
Code: 0
URL: http://www.joaopadilla.com/testarea/default.aspx

Do you want to continue running scripts on this page?
(YES) (NO)

"


If that is not what u wanted, please let me know how can I achieve it!

Thanks men!

[Craig]

Hmmm jpadilla, I can't seem to debug what's causing this. Does the page stop responding once the error has occurred? Or does it halt? If it doesn't halt, is this such a big deal in real terms? Since it doesn't actually effect the user experience.