Mono Support Jquery - Javascript Run Javascript Code after panel update = Monox Web Part 

Viewed 14220 time(s), 5 post(s), 2/21/2012 4:42:26 PM - by shawndg
2/21/2012 4:42:26 PM
1871 Reputation 252 Total posts

Hello Guys,

Im trying to understand the Monox Javascript Utility but having a couple of issues..

What I want to do is after a panel updates, return a hidden id to the update panel section and then fire off a java script to read that id and do something with it..
Just trying a simple alert for now..

The code below dont seem to be working for me..

protected void Page_Load(object sender, EventArgs e)
{
 
    string javaScriptFunction =
    "function pageLoad() {" +
        "$(function () {" +
            "$('#btnClick').click(function () {" +
                "alert('Alert: Hello from jQuery!');" +
            "});" +
        "});" +
    "}";
 
    MonoSoftware.MonoX.Utilities.JavascriptUtility.RegisterClientScriptBlock(UpdatePanel1x, this.GetType(), "myScript", javaScriptFunction, true);        
 
}

UpdatePanel1x is where the button is located.. that will do the background server work..
So after UpdatePanel1x updates.. I want the above function to fire.. I figure once I get that firing if i return the id in a hidden class to the update panel then I should be able to fire off the event using the id.. but for now Im just trying to get the alert to fire inside the MonoX web part.

1
2/21/2012 7:01:23 PM
1871 Reputation 252 Total posts

Ok..

I got it working but its firing too soon... any one have any idea how to delay it ?

Below is what i got working now..

protected void Page_Load(object sender, EventArgs e)
{
 
    string javaScriptFunction =
    "function pageLoad() {" +
        "$(function () {" +
            "$('.btnClick').click(function () {" +
                "alert('Alert: Hello from jQuery! - ' + $('.txtid').val());" +
            "});" +
        "});" +
    "}";
 
    MonoSoftware.MonoX.Utilities.JavascriptUtility.RegisterClientScriptBlock(UpdatePanel1x, this.GetType(), "myScript", javaScriptFunction, true);                  
 
    //string javascripturl = "/TheScene/js/thesceneplayer.js";
   // MonoSoftware.MonoX.Utilities.JavascriptUtility.RegisterClientScriptInclude(UpdatePanel1x, javascripturl);        
 
}


Then my markup looks a little like this..

insisde update panel
 
   <asp:TextBox class='txtid' ID="txtid" runat="server"></asp:TextBox>
 
      <asp:button id="Play" runat="server" class="btnClick"
               CommandArgument='<%# Eval("SongId") %>' CommandName="PlaySong"  OnClick="PlayerBtnHandler" Text="PLAY" />
           
 
clicking the button sends a ajax query to the server and then it returns with the txtid set..

My problem is my jquery is firing to soon before the server responds with the id..

2
2/21/2012 8:02:34 PM
1871 Reputation 252 Total posts

Ok.. I tried a bunch of ideas... and read a bunch of people who had a luck with this in asp.net and im not sure why I am having some many issues.

Here is what I got working so far..

The page loads.. I click the button once.. and it sends a req to server and server makes a id..
-fire before or after but either way but the txtid.val() is blank the first page load... dont make sense..
After one click, the value then fills in and the value looks to be correct..
Continue to click, and it appears to work..

It am not sure why it is blank when you first push it.. only thing I can think of is because its firing before the server responds..
Im going to slow it down with some fake delays on the server side to see if I am right.. (EDIT - Delay - Script is firing when button is clicked not when server response to button click.)

Here is the code I am working with..

string javaScriptFunction =
  "function pageLoad() {" +
      "$(document).ready(function(){" +
          "$('.btnClick').click(function () {" +
              "alert('Alert: Hello from jQuery! - ' + $('.txtid').val());" +
          "});" +
      "});" +
  "}";
 
  MonoSoftware.MonoX.Utilities.JavascriptUtility.RegisterStartupScript(UpdatePanel1x, this.GetType(), "scriptname", javaScriptFunction, true);

3
2/23/2012 2:58:26 PM
1871 Reputation 252 Total posts

Ok..

I got it to work..

I stuffed my code into the update panel....

<script type="text/javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function () {

//Jquery logic
//to fire..

});
</script>

I also made sure to register any of the scripts that i may need using..

during page load.. to make sure they get loaded after each update on the panel.
MonoSoftware.MonoX.Utilities.JavascriptUtility.RegisterClientScriptInclude(this, this.GetType(), "myscript", javascripturl);

4
2/23/2012 4:20:25 PM
15993 Reputation 2214 Total posts

Hi Shawn,

it is great to hear that you have found the solution, sorry we were busy and didn't had a chance to take a look at your issue. Yes basically you need to put jQuery / Javascript code in update panel or you need to add the code initialize in the endRequest as you have mentioned. So this isn't related to the JavascriptUtility or MonoX this is basic Ajax functionality.

Good catch.

Regards

5
This is a demo site for MonoX. Please visit Mono Software for more info.