Live Server Side HTML/JavaScript Method

**Markdidj** · Aug 5, 2012 08:27

What do you people think of this script?

It's just an example written from a question here http://www.sitepoint.com/forums/show...nt-ReplacementNo animation though, which was one of the requests, but works with or without javascript.

The live method can work with ASP and PHP. I'm trying to do it in .NET but having problems.

It's better if the CSS and JavaScript were in their seperate files, but I just wanted to show how it was done in one page.

Copy and save it in a default folder that runs asp and it should work the same with or without javascript.

If you have dynamic data then you will need to add a nocache header. Adding this will also make it live if you use a setTimeout or setInterval.

Code:

<%



'----is Live----'




dim live
if request.querystring("live")="1" or request.querystring("live")="2" then
    live=int(request.querystring("live"))
else
    live=False
end if




'----write function----'




function write(str)
    if live then
        response.write replace(replace(str,vbcrlf,""),"""","\""")
    else
        response.write str
    end if
end function




'----product id (pid)----'




dim pid




if request.querystring("pid") then
    pid=int(request.querystring("pid"))
else
    pid=0
end if




if pid>4 and pid<11 then title="product " & pid




'----page headers----'




if live then
    Response.ContentType="application/x-javascript"
else
    response.write "<!DOCTYPE html PUBLIC ""-//W3C//DTD XHTML 1.0 Transitional//EN""" & vbcrlf & vbtab & """http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"">" & vbcrlf
    response.write "<html xmlns=""http://www.w3.org/1999/xhtml"">" & vbcrlf
    response.write "<head>" & vbcrlf
    response.write "<title>" & title & "</title>" & vbcrlf
    response.write "<style type=""text/css"">" & vbcrlf
        response.write "img{width:200px;height:200px;background:orange;}" & vbcrlf
        response.write "#sidecontent{display:block;width:200px;height:200px;background:gold;float:left;}" & vbcrlf
        response.write "#maincontent{display:block;width:700px;height:400px;background:gold;float:left;}" & vbcrlf
        response.write "#others img{width:100px;height:100px;}" & vbcrlf
    response.write "</style>" & vbcrlf
    response.write "<script type=""text/javascript"">" & vbcrlf
    response.write "function changeScript(s){"
        response.write "var o=document.getElementsByTagName(""script"")[0];"
        response.write "var n=document.createElement('script');"
        response.write "n.setAttribute('type', 'text/javascript');"
        response.write "n.setAttribute('src',s);"
        response.write "o.parentNode.replaceChild(n,o);"
    response.write "};"




    response.write "function init(){"
        response.write "a=document.getElementsByTagName(""a"");"
        response.write "for(i=0;i<a.length;i++){"
            response.write "a[i].onclick=function(){if(this.href.indexOf(""?"")>-1) changeScript(this.href+""&live=1""); else changeScript(this.href+""?live=1""); return false;}"
        response.write "}" & vbcrlf
    response.write "}" & vbcrlf




    response.write "window.onload=function(){init();}" & vbcrlf




    response.write "</script>" & vbcrlf
    response.write "</head>" & vbcrlf
    response.write "<body>" & vbcrlf
    response.write "<div id=""sidecontent""><a href="""" title=""Show All"">Static side Content</a></div>" & vbcrlf
end if




if live then
    response.write "document.getElementById(""maincontent"").innerHTML="""
else
    response.write "<div id=""maincontent"">" & vbcrlf
end if




if pid=0 then
    for i=5 to 10
        write "<a href=""?pid=" & i & """ title=""Product #""" & i & """><img src=""Egypt" & i & ".jpg"" alt=""image" & i & ".jpg"" /></a>" & vbcrlf
    next
    write "</div>" & vbcrlf
else




    '----get product info from db or text file----'




    write "<img src=""Egypt" & pid & ".jpg"" alt=""image " & pid & """ />" & vbcrlf
    write "<div id=""info"">" & vbcrlf
    write "<h1>Product Number " & pid & "</h1>" & vbcrlf
    write "<p>This is the info for product number " & pid & "</p>" & vbcrlf
    write "</div>" & vbcrlf




    write "<div id=""others"">" & vbcrlf
    for i=5 to 10
        if i<>pid then
            write "<a href=""?pid=" & i & """ title=""Product #" & i & """><img src=""Egypt" & i & ".jpg"" alt=""image" & i & ".jpg"" /></a>" & vbcrlf
        end if
    next
    write "</div>" & vbcrlf
end if




if live then
    response.write """;init();"
else
    response.write "</div>" & vbcrlf
end if




%>

**Markdidj** · Aug 6, 2012 02:08

Forgot to add why I use live=1 and live=2

If you use this, but also want it to be live using a timer, you'll want to differentiate between a manual clicked execution and a live timed execution. So I use live=1 for manual and live=2 for timed
Example

Code:

setTimeout(changeScript(replace(current_live_url,"?live=1","?live=2")),10000);

Also, you'll have to stay away from using some named functions in external js files as they can be changed before the live page is called.
Example: JavaScript

Code:

function checkTopLocation(){
if(!top.location.match(\bhttps?\:\/\/www\.livescript\.co\.uk)) alert("not authorised from this site")
}

If a site that's not authorised to use your livescript uses this

Code:

function checkTopLocation(){ do_nothing(); }
changeScript("http://www.livescript.co.uk/?live=1 ")

(remove trailing space as Sitepoint still parses links in IE that have been quoted even when parse url has been unchecked)
Then it will replace your url checking script.

Instead put the check in your javascript header.

If you use this, please mention my name (Mark Bailey) and website (livescript.co.uk). Many Thanks

User Tag List

Thread: Live Server Side HTML/JavaScript Method

Thread Tools

Display

Live Server Side HTML/JavaScript Method

Bookmarks

Bookmarks

Posting Permissions