Paul Mrozowski's Blog - Javascript

Syntax Highlighter Brush for VFP

Paul Mrozowski — Sat, 20 Nov 2010 02:06:32 GMT

While I was originally planning my jQuery for VFP developer session for South West Fox, I had planning on showing all of the demos hosted inside of a browser hosted in a VFP form (which I did). I also planned on having a link available on each page which would slide out color-coded samples of the code actually running in the page. As part of that, I created a syntax highlighter brush for VFP to work with Alex Gorbatchev’s SynaxHighlighter (since none seemed to be available) – it’s a Javascript based syntax highlighter that lets you embed code samples in things like blog pages and it will color-code the syntax. I ended up deciding that it didn’t really work too well in the context of a session, so I scrapped that portion of my demos.

You can download it from here

Alex’s site includes more information about use – just make sure you reference the new brush from within your webpage:

Links

http://alexgorbatchev.com/SyntaxHighlighter/
http://www.rcs-solutions.com/Download.ashx?File=shBrushVFP.js

Javascript in User Controls

Paul Mrozowski — Sat, 27 Oct 2007 20:07:56 GMT

Imagine this scenario: You want to create a simple user control that you can use in a few web pages. It incorporates a few JavaScript functions that change the UI slightly during a mouse click; pretty standard stuff. The script isn't particularly useful in other controls, so putting it into a common library doesn't make much sense. It could be broken out into it's own library, which can at least be cached by a browser. But that introduces another dependency in the hosting page - you have to remember to include a reference to this JS library before things will work. The easiest thing to do would be to just include the JS code inside the user control itself (I'm skipping the option of embedding it as a resource; maybe another day). Including the code in the control is pretty simple and seamless. Until you drop two instances of the same control on page. What you'll find (like I did) is that your JS code is now rendered one time for each control. That's not very cool. In fact, you run into this same issue even if you decide to move the code into it's own library - you end up with more than one reference to the library.

A relatively simple way around all this is the ClientScriptManager class that is available hanging off the Page object as ClientScript. It lets you register JS code to be rendered into the main page. You can also check for the existence of the registered code (to keep from registering it more than once, regardless of the number of controls on the page). In my case, since I'm just embedding the code right in the page, there are only two methods required for this: IsClientScriptBlockRegistered and RegisterClientScriptBlock.

The routines use the object type and the passed in name as a key; if you don't pass it into IsClientScriptBlockRegistered (or the other variants) the routines will use the Page's type. I'd suggest always passing in something besides the page type (for example, the user control type). This will keep you from running into conflicts if you happen to use the same registration name (although things will still break if you picked the same JS function names).

Here's what that might look like:

if (!Page.ClientScript.IsClientScriptBlockRegistered(typeof(WebmailAddressBookBizObj), "ToggleCheck"))

{

    string js = @"

function ToggleCheck(node)

{

if (node.Checked)

node.UnCheck();

else

node.Check();

}";

    Page.ClientScript.RegisterClientScriptBlock(typeof(WebmailAddressBookBizObj), "ToggleCheck",
js, true);

}

Accessing ASP.NET generated controls from Javascript

Paul Mrozowski — Fri, 19 Oct 2007 02:36:20 GMT

This is one of those things that's really easy to do, but not particularly clear the first time you run across it (well, it wasn't clear to me at least). There are times when you need to access ASP.NET created controls from within your JavaScript code. In the ASPX page you may have set the ID of a button control to "btnAdd". However, when you run the page the control name gets mangled into something like ctl00_ContentPlaceHolder1_btnAdd. In order to reference it in your JavaScript, you need that mangled name. To get it, just embed something like this in your JavaScript code:

function DoSomething()
{
    var addButton = document.getElementById('<%= btnAdd.ClientID %>');
    if (addButton)
        alert('<%= btnAdd.ClientID %>');
}

When the page is run, the ASP.NET eval engine will replace the ID with the correct one.