MonoX support board

Start the conversation, ask questions and share tips and solutions with fellow developers.

Non-registered users can only browse through our support boards. Please register now if you want to post your questions. It takes a second and it is completely free. Alternatively, you can log in without registration using your credentials at major sites such as Google, Microsoft Live, OpenId, Facebook, LinkedIn or Yahoo.

Add JavaScript to page Load Event  (Mono Support )

Viewed 59774 time(s), 5 post(s) 4/5/2011 6:52:48 AMby peterg
peterg

peterg

4/5/2011 6:54:20 AM
Hi,

This might NOT quite be part of support and is more my problem as a newbie programmer, as mentioned before im busy trying to create a youtube video gallery, no im just about done with cetrain parts but im trying to make it look better. So I need to use an expanding text box, with some JavaScript. Ive edded the folowing to the page load event and can see the CSS and js files loaded when the page loads:

LiteralControl jsResource = new LiteralControl(); jsResource.Text = "<script type=\"text/javascript\" src=\"../../scripts/jquery.min.js\"></script>"; jsResource.Text = "<script type=\"text/javascript\" src=\"../../scripts/jquery.watermarkinput.js\"></script>";
Page.Header.Controls.Add(jsResource); HtmlLink stylesLink = new HtmlLink(); stylesLink.Attributes["rel"] =
"stylesheet"; stylesLink.Attributes["type"] = "text/css"; stylesLink.Href = "../../scripts/CSS/WallStyle.css"; Page.Header.Controls.Add(stylesLink);


but not im left with the actual JavaScript to tri\igger when that usercontrol loads:

<script type="text/javascript">


jQuery(function($){
$("#contentYouTube").Watermark("What's up?");
});

$(function()
{
$("#contentYouTube").focus(function()
{
$(this).animate({"height": "85px",}, "fast" );
$("#button_blockYouTube").slideDown("fast");
return false;
});
$("#cancel").click(function()
{
$("#contentYouTube").animate({"height": "30px",}, "fast" );
$("#button_blockYouTube").slideUp("fast");
return false;
});



});
</script>


Ive broken google the last three days and they have asked me numerous times if I am a human, but i need to know in the CodeBehind how do I load the JS Functions of the Javascript ? my Expanding textbox is based on http://www.9lessons.info/2010/03/facebook-like-expanding-textbox-with.html

Thanks

Peter

This content has not been rated yet. 
246 Reputation 35 Total posts
khorvat

khorvat

4/5/2011 7:46:38 AM
Hi Peterg,

first of all you need to be aware that MonoX is referencing the jQuery by default (It uses the 1.3.2 version and this can be changed in the web.config) so if you are referencing the jQuery by your self you may encounter some problems (I'd suggest that you leave this to MonoX).

Second thing is that MonoX has a built-in auto expand text box that can be used (although it isn't exactly the same as the one you are using). You can find an example of the auto expand text box on the MonoX demo's Site wall and so you can take a look at the code below how to use it (if it suites you):

<asp:TextBox runat="server" ID="txtInput" CssClass="jq_expandingTextBox jq_swap_value"
TextMode="MultiLine" AutoPostBack="false"></asp:TextBox>

Code behind

protected void Page_Load(object sender, EventArgs e)
{
  ...
  string expandScript = @"$(document).ready(function() {
  $.registerAutoGrow(""jq_expandingTextBox"");
  });";
  JavascriptUtility.RegisterStartupScript(this, this.GetType(), "expandScript", expandScript, true);
  ...
}
 
protected void Page_PreRender(object sender, EventArgs e)
{
  ...
  JavascriptUtility.RegisterClientScriptInclude(this, Paths.MonoX.Scripts.jquery_autogrow_js);
  ...
}

And now I'll try to help you with your scenario, to load your scripts properly (in every scenario e.g. AJAX etc.) please use the utility class that we have in MonoX called "JavascriptUtility" (You have a sample above). After you have registered your scripts you need to attach the proper events to your expand element and you can do this with jQuery "$(document).ready(function() {});" function. As for exact code that needs to be put inside the document ready, it depends upon the library you are using and it would be best if you try to find a sample on their web site.

I hope that this helps you and that you can fix your jQuery issue.

Regads


This content has not been rated yet. 
15993 Reputation 2214 Total posts
peterg

peterg

4/5/2011 7:58:09 AM
Yes it does, thanks, all the samples on the WEB i can find people want to load some button event.

Ive seen very little Page_Render samples but it gives me a better google terms to search for, the reason why I called the newr version of jQueiry is I wasnt sure if you modiefies it, or if I replace it with the new one I break something else. I have seen the expanding text box on the wall and it will work fine.

another note is that I am developing this outside of a MonoX project at the moment as i was waiting for the new update and I just saw it has arrived..WHOOO

Thanks anyhow

Peter
This content has not been rated yet. 
246 Reputation 35 Total posts
peterg

peterg

4/5/2011 8:20:03 AM
Sorry one last thing, for me to better usnderstand this, if possible can you give me the example of the Javascript to expand the textbox?
This content has not been rated yet. 
246 Reputation 35 Total posts
khorvat

khorvat

4/5/2011 9:35:29 AM
Hi Peterg,

if you mean the MonoX expand text box only thing that you need to do is reference the script ("jquery_autogrow_js") and add CSS class ("jq_expandingTextBox") to your textbox so jQuery can expand it.

<asp:TextBox runat="server" ID="txtInput" CssClass="jq_expandingTextBox"
TextMode="MultiLine" AutoPostBack="false"></asp:TextBox>

protected void Page_Load(object sender, EventArgs e)
{
  ...
  string expandScript = @"$(document).ready(function() {
  $.registerAutoGrow(""jq_expandingTextBox"");
  });";
  JavascriptUtility.RegisterStartupScript(this, this.GetType(), "expandScript", expandScript, true);
  ...
}
  
protected void Page_PreRender(object sender, EventArgs e)
{
  ...
  JavascriptUtility.RegisterClientScriptInclude(this, Paths.MonoX.Scripts.jquery_autogrow_js);
  ...
}


Regards
This content has not been rated yet. 
15993 Reputation 2214 Total posts