inserting raw javascript / html into page

This forum is only for questions or discussions about working with the mojoPortal source code in Visual Studio, obtaining the source code from the repository, developing custom features, etc. If your question is not along these lines this is not the right forum. Please try to post your question in the appropriate forum.

Please do not post questions about design, CSS, or skinning here. Use the Help With Skins Forum for those questions.

This forum is for discussing mojoPortal development

This forum is only for questions or discussions about working with the mojoPortal source code in Visual Studio, obtaining the source code from the repository, developing custom features, etc. If your question is not along these lines this is not the right forum. Please try to post your question in the appropriate forum.

You can monitor commits to the repository from this page. We also recommend developers to subscribe to email notifications in the developer forum as occasionally important things are announced.

Before posting questions here you might want to review the developer documentation.

Do not post questions about design, CSS, or skinning here. Use the Help With Skins Forum for those questions.
This thread is closed to new posts. You must sign in to post in the forums.
12/14/2009 5:06:27 AM
Gravatar
Total Posts 4

inserting raw javascript / html into page

I have a basic custom module and user sign in handlers working great but am wondering if I can create a mogo page where the framework inserts some custom html into the <head> and <body> sections into that particular generated page?

Reason is I have created a sports event website and I want people who have the mojoPortal to be able to embed events into their webpages.  (this component can be made available free to anyone who uses mojoPortal and wants events on their site, as I do)

below is an example of what I need to generate - some stuff in the head, body and a div tag.  (copy and paste this into an html file and it will work for you locally also).

is it possible?  my custom module inserts stuff _in_ the page but I'm not sure I have access to the page itself? it's important for the page to completely render before I begin loading stuff.

regards

  ewart.

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>

<!-- stylesheet and API link. -->
<link rel="stylesheet" href="http://onesportevent.com/API/v3/Styles/oseDefault.css" type="text/css" media="screen" />
<script type='text/javascript' src='http://onesportevent.com/API/v3/EventAPI.aspx?WebKey=www.testwebkey.com'></script>

</head>

<!-- must call in body onload otherwise behaviour can't be predicted in all webbrowsers -->
<body onload="oseInitEvents()">

<!-- OSE add the canvas - e.g. where to put the events inside the web page -->
<div id="oseEventCanvas"></div>

</body>
</html>
 

12/26/2009 3:31:58 AM
Gravatar
Total Posts 4

Re: inserting raw javascript / html into page

 am still considering using mojoPortal for my new website, doing the final eval now comparing and it's definietely in the top 3.  Would be really handy to know if the javascript insert is possible on this platform, or whether it is a no-go at this stage of the development.

 

cheers

ewart.

1/2/2010 5:33:29 AM
Gravatar
Total Posts 18439

Re: inserting raw javascript / html into page

It can be done a number of ways. Simple javascript widgets can usually be entered directly in the html content feature using the html view in the editors.

javascript can also be added to every page via the layout.master file of the skin. However if the javascript has dependencies on jquery which we already load, you need to make sure your script loads after the main jquery scripts, this can be done by creating a UserControl and registering the script from C# code.

Hope it helps,

Joe

1/24/2010 8:14:45 PM
Gravatar
Total Posts 4

Re: inserting raw javascript / html into page

Thanks Joe, I have selected mojoPortal now and figured out how to get my free event listings from www.onesportevent.com displaying from your advice, looks really good even inside the default skin! 

I've included my source code as I think it would be helpful for other developers to know how to include Javascript or CSS files inside mojoportal in their own modules, don't think we have a section in the docs on that yet.  The Javascript was simple enough, the css required a slightly different approach to get it into the page header, like most things, also simple when you know how... just finding the right two lines of code is the tricky part :)

cheers

ewart.

 

<%@ Control Language="C#" ClassName="OneSportEvent.ascx" Inherits="mojoPortal.Web.SiteModuleControl" %>
<%@ Import Namespace="System.Globalization" %>
<%@ Import Namespace="mojoPortal.Business" %>
<%@ Import Namespace="mojoPortal.Business.WebHelpers" %>
<%@ Import Namespace="mojoPortal.Web.Framework" %>
<%@ Import Namespace="mojoPortal.Web.Controls" %>
<%@ Import Namespace="mojoPortal.Web.Editor" %>
<%@ Import Namespace="mojoPortal.Net" %>
<script runat="server">

protected override void OnInit(EventArgs e)
{
base.OnInit(e);
}

protected void Page_Load(object sender, EventArgs e)
{
LoadSettings();
}

protected override void OnPreRender(EventArgs e)
{
base.OnPreRender(e);

SetupInstanceScript();
}

private void MakeScriptRunOnStartup()
{
// Script to run on startup
StringBuilder startupScript = new StringBuilder();
startupScript.Append("\n<script type='text/javascript'>");
startupScript.Append("\noseInitEvents();");
startupScript.Append("<" + "/script>");

// Register the startup script
this.Page.ClientScript.RegisterStartupScript(this.GetType(), this.UniqueID + "StartUpScript", startupScript.ToString());
}

public void RegisterStyleSheet()
{
// Add the css include file - can use your own style for formatting
string szCSSLink = "<link href='http://onesportevent.com/API/v3/Styles/oseDefault.css' rel='stylesheet' type='text/css' />";
LiteralControl lcLiteralControl = new LiteralControl(szCSSLink);
this.Page.Header.Controls.Add(lcLiteralControl);
}

private void RegisterApiJavascriptInclude()
{
// The <script> tag has to be split to avoid a ms design-fault build error
// Use the correct API version and WebKey per OneSportEvent api
// Documentation is: http://www.onesportevent.com/plugins/default.aspx
StringBuilder script = new StringBuilder();
script.Append("\n<script type='text/javascript' src='http://onesportevent.com/API/v3/EventAPI.aspx?WebKey=www.testwebkey.com'>");
script.Append("<" + "/script>");

this.Page.ClientScript.RegisterClientScriptBlock(
this.GetType(),
this.UniqueID,
script.ToString());
}

private void SetupInstanceScript()
{
MakeScriptRunOnStartup();
RegisterStyleSheet();
RegisterApiJavascriptInclude();
}

private void LoadSettings()
{
Title1.Visible = !this.RenderInWebPartMode;
if (this.ModuleConfiguration != null)
{
this.Title = this.ModuleConfiguration.ModuleTitle;
this.Description = this.ModuleConfiguration.FeatureName;
}
}

</script>
<mp:CornerRounderTop ID="ctop1" runat="server" />
<asp:Panel ID="pnlWrapper" runat="server" CssClass="panelwrapper linksmodule">
<asp:UpdatePanel ID="upGallery" UpdateMode="Conditional" runat="server">
<contenttemplate>
<portal:ModuleTitleControl id="Title1" runat="server" />
<asp:Panel ID="pnlMyClass" runat="server" CssClass="modulecontent">

<div id="oseEventCanvas"></div>

</asp:Panel>
<div class="modulefooter"></div>
</contenttemplate>
</asp:UpdatePanel>
</asp:Panel>
<mp:CornerRounderBottom ID="cbottom1" runat="server" />

You must sign in to post in the forums. This thread is closed to new posts.