How to check URL existence ?

L

Laurent Bugnion

Hi,

Dear Laurent,

What I wish to achieve is a possibly silent handling of the missing
URL. If the url is missing it's fine, it may be because the user is
using the page as simple html report and he needs no interaction. I may
just set a small label to inform him.

That's good. Just replace the "alert" code with some DOM interaction to
set the label.

Typically, I use spans for that:

<span id="spanStatus">&nbsp;</span>

and then

function setStatus( strMessage )
{
document.getElementById( "spanStatus" ).firstChild.nodeValue
= strMessage;
}
As I told you there is NO submit button. That is an hidden form to talk
with the ASP page. The message is passed to the ASP page on some event
like onclick

Yes. It doesn't really make a difference when or how the method is called.
I would like to have your function in the following way, if possible.

- The function should be a pure boolean function that return TRUE/FALSE
according
the existence of URL.

As I said already, it's not a good idea. Synchronous AJAX calls are
really not recommended. I would really reconsider if I were you. My code
suggestion is asynchronous, so it won't block anything (animations,
etc...), and it will be more user-friendly.

-Should not make any alert. In case of possible errors, just throw
exceptions that I can choose to handle, if I want (ot I may simply
ignore it). No open windows.

Ignoring an exception will cause the browser to stop execution and to
display a message box. Not a good idea.

This way it can be used in a more modular way. If I want to tell
something to the user, I do it outside the function.

Could you make these changes. Or I might try to make them and you could
revise the final version....

I prefer that you do the changes, post the code here and let us comment.
That's more in the educating spirit of this newsgroup ;-)

Greetings,
Laurent
 
P

pamelafluente

I prefer that you do the changes, post the code here and let us comment.
That's more in the educating spirit of this newsgroup ;-)

Greetings,
Laurent

Beautiful !!! Thanks Laurent, you are really great!
(By the way I am happily using the VS debugger as you suggested)

I am going to make some unessential changes to adapt it to my specific
situation and I am gonna ask you if that could be OK.

Will post it in a while...

Thanks again.

-Pam
 
P

pamelafluente

Typically, I use spans for that:
<span id="spanStatus">&nbsp;</span>

and then

function setStatus( strMessage )
{
document.getElementById( "spanStatus" ).firstChild.nodeValue
= strMessage;
}

Beautiful idea, I will use it. Can I also use a DIV ? I would prefer.
Same syntax?


Here is my adjusted version. I want to check before submitting.
I undestood the async nature of this call. Therefore I placed the
submission on the callback. Hope is fine.

Here is complete source code of a demo: HTML / AJAX (yours) / ASP.NET
watch out for line breaks

I wait for you comment / suggestion / corrections...

** THANKS a LOT **

-Pam


========== HTML InteractiveReport_Demo.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Interactive Report Demo</title>

<style type="text/css" media="screen">

..c1bg{position:absolute;background:#F0FFF0;border-width:1px;border-style:eek:utset;}
..c1fg{position:absolute;border-width:0;color:#000000;background:transparent;text-align:left;font-family:Tahoma;font-size:11px;font-weight:bold;}
..c3bg{position:absolute;background:#FFFFF0;border-width:1px;border-style:eek:utset;}
..c3fg{position:absolute;border-width:0;color:#008000;background:transparent;text-align:left;font-family:Tahoma;font-size:11px;font-weight:bold;}

</style>

</head>
<body>

<script language="javascript" src="Ajax_Javascript.js"></script>

<!--Messenger form to send the information about the clicked cell to
the ASP page which processes the request-->
<form name="form1" method="get" action="ReportProcessor.aspx"
id="form1">
<input type="hidden" name="ClickedElement" id="MessengerInput"
/>
</form>

<!--2 Examples of cells: on click their ID is passed to the ASP page
for processing (Drill Down / Roll Up) -->
<!--Need to place a cell context menu to differentiate between diffent
actions: Drill / Roll /etc.-->
<div id ="16,0" onclick = "Clicked(this)">
<div class=c3bg
style="top:372px;left:127px;width:88px;height:203px;"></div><div
class=c3fg style="top:374px;left:129px;"><table><tr><td width=82px
height=197px valign=middle>Brazil</td></tr></table></div>
</div>
<div id ="5,0" onclick = "Clicked(this)">
<div class=c1bg
style="top:280px;left:127px;width:88px;height:42px;"></div><div
class=c1fg style="top:282px;left:129px;"><table><tr><td width=82px
height=36px valign=middle>Austria</td></tr></table></div>
</div>


<span id="StatusInfo">&nbsp;</span>


</body>
</html>


================= AJAX Ajax_Javascript.js


// JScript File: Ajax_Javascript.js

//http://groups.google.it/group/comp.lang.javascript/browse_frm/thread/b3b8fa7bad9223a4?hl=it
//Laurent Bugnion, GalaSoft


function setStatus( strMessage )
{
document.getElementById("StatusInfo").firstChild.nodeValue =
strMessage;
}


var SubmitURL;

function Clicked(MyControl)
{
var CellID = document.getElementById("MessengerInput");
CellID.value = MyControl.id; //value communicated
SubmitURL = CellID.form.action ;
SubmitOnlyIfUrlActive();
}


var oHttp = null;

function SubmitOnlyIfUrlActive()
{
if ( window.XMLHttpRequest )
{
oHttp = new window.XMLHttpRequest();
}
else
{
if ( window.ActiveXObject )
{
oHttp = new window.ActiveXObject("Microsoft.XMLHTTP" );
}
else
{
setStatus("Unsupported Platform");
}
}
if ( !oHttp )
{
setStatus("Error");
}
oHttp.open("HEAD", SubmitURL, true ); // true = async, false = sync
oHttp.onreadystatechange = CallBack
oHttp.send( null );
}


function CallBack()
{
if ( oHttp.readyState == 4 )
{
if ( oHttp.status == 200 )
{
document.form1.submit()
}
else
{
if (oHttp.status == 404)
{
setStatus( SubmitURL + " Not Found");
}
else
{
setStatus("Error: " + oHttp.status );
}
}
}
}



======= ASP.NET ReportProcessor.aspx


Partial Class ReportProcessor
Inherits System.Web.UI.Page

Protected Sub Page_Load(ByVal sender As Object, ByVal e As
System.EventArgs) Handles Me.Load

If Me.Page.Request.HttpMethod = "GET" Then

Response.Write(Me.Page.Request.QueryString("ClickedElement") & " was
clicked")

ElseIf Me.Page.Request.HttpMethod = "POST" Then
Response.Write(Me.Page.Request.Form("ClickedElement") & "
was clicked")

Else

Response.Write("Unexpected Method " &
Me.Page.Request.HttpMethod)

End If

End Sub

End Class
 
L

Laurent Bugnion

Hi,

Beautiful idea, I will use it. Can I also use a DIV ? I would prefer.
Same syntax?

DIVs also work, yes. I use spans because they are easier to place in an
existing layout. One thing you should be careful of: Make sure to have
no carriage return between the DIV tag and the &nbsp; This is to avoid
problems in Firefox, where carriage returns are regarded as a child node
(text) of the DIV parent node. So then firstChild is not the &nbsp;
anymore, but is the '\n\r' text node.

It's possible to make the script more robust to handle this kind of
things, but if you use ASP.NET to produce your HTML code anyway, it's
also easy to make the HTML code look exactly like you need.
Here is my adjusted version. I want to check before submitting.
I undestood the async nature of this call. Therefore I placed the
submission on the callback. Hope is fine.

Here is complete source code of a demo: HTML / AJAX (yours) / ASP.NET
watch out for line breaks

I wait for you comment / suggestion / corrections...

I think that the code will work. I didn't test it though. A few comments:

1) The submit action will be tried only once. I gather from previous
posts that it is what you want, right?

2) Checking if the URL is active might take a little time, so it is
customary in AJAX to inform the user about the action taking place. You
can use the status "label" for this.

3) JavaScript uses other coding conventions than C#. In fact, it uses
the Java conventions (thought it has nothing to do with Java). You might
want to correct the code, for example using camel notation for method
names (clicked() instead of Clicked(), submitOnlyIfUrlActive(), ..)

4) For clarity, it is customary to name callback methods according to
the name of the method which initiated the call. In your case, I would
rename the "Callback()" method to "submitOnlyIfUrlActiveCallback()".

5) It is good practice to end JavaScript statements with ';', though
it's not absolutely necessary.

6) I see that you use VB.NET for the server-side logic... I would really
consider switching to C# if I were you. Amongst the many, many
advantages that C# has over VB.NET, the syntax is very similar to
JavaScript, so it's easier to switch from one to the other.

I suppose that you tested the code and that it works, so I didn't
perform a functionality test.
** THANKS a LOT **

-Pam

Prego ;-)
Laurent
 
P

pamelafluente

DIVs also work, yes. I use spans because they are easier to place in an
existing layout. One thing you should be careful of: Make sure to have
no carriage return between the DIV tag and the &nbsp; This is to avoid
problems in Firefox, where carriage returns are regarded as a child node
(text) of the DIV parent node. So then firstChild is not the &nbsp;
anymore, but is the '\n\r' text node.

Good to know that.
It's possible to make the script more robust to handle this kind of
things, but if you use ASP.NET to produce your HTML code anyway, it's
also easy to make the HTML code look exactly like you need.

Yes it's immediate. Just change html strings in the generator.
2) Checking if the URL is active might take a little time, so it is
customary in AJAX to inform the user about the action taking place. You
can use the status "label" for this.

I added that, but placed after "HEAD" (see below). Also change the
position
where the callback event handler is attached.
3) JavaScript uses other coding conventions than C#. In fact, it uses
the Java conventions (thought it has nothing to do with Java). You might
want to correct the code, for example using camel notation for method
names (clicked() instead of Clicked(), submitOnlyIfUrlActive(), ..)

Good to know that. Changed all to "prefix - camel" notation notation
(did some little search :) ).
4) For clarity, it is customary to name callback methods according to
the name of the method which initiated the call. In your case, I would
rename the "Callback()" method to "submitOnlyIfUrlActiveCallback()".

Very nice.
5) It is good practice to end JavaScript statements with ';', though
it's not absolutely necessary.
Right.

6) I see that you use VB.NET for the server-side logic... I would really
consider switching to C# if I were you. Amongst the many, many
advantages that C# has over VB.NET, the syntax is very similar to
JavaScript, so it's easier to switch from one to the other.

:) I know. For me it is easier, as I do not have { } on my keyboard
(IT). To me vb is more
readable than c. Anyway could live with C# also.
I suppose that you tested the code and that it works, so I didn't
perform a functionality test.

Tested with both Firefox and IE. Response from ASP page with Firefox
seems (slighly) quicker.
Prego ;-)
Laurent

Here is the list of changes with revised source code:


** changed notation:
prefix - camel notation


** added ";"
oHttp.onreadystatechange = submitOnlyIfUrlActiveCallback;
document.form1.submit();


** why this does not follow the above notation ??
onreadystatechange


** change position (before "head"):
oHttp.onreadystatechange = submitOnlyIfUrlActiveCallback
it does not seem to make much sense to place it after "head" (??) we
cannot relay on the slowness of the net :)


** added before head:
setStatus( "Checking existence of report processor " + submitURL + "
....");
(I have the impression this slows down submission, is it possible?
so I placed after "head" because anyway async to avoid delay of
drawstring)


//========== CODE


function setStatus( strMessage )
{
document.getElementById("statusInfo").firstChild.nodeValue =
strMessage;
}


var submitURL;

function Clicked(MyControl)
{
var CellID = document.getElementById("messengerInput");
CellID.value = MyControl.id; //value communicated
submitURL = CellID.form.action;
submitOnlyIfUrlActive();
}

var oHttp = null;

function submitOnlyIfUrlActive()
{
if ( window.XMLHttpRequest )
{
oHttp = new window.XMLHttpRequest();
}
else
{
if ( window.ActiveXObject )
{
oHttp = new window.ActiveXObject("Microsoft.XMLHTTP" );
}
else
{
setStatus("Unsupported Platform");
}
}
if ( !oHttp )
{
setStatus("Error");
}
oHttp.onreadystatechange = submitOnlyIfUrlActiveCallback;
oHttp.open("HEAD", submitURL, true ); // true = async, false = sync

setStatus( "Checking existence of report processor " + submitURL + "
....");
oHttp.send( null );
}

function submitOnlyIfUrlActiveCallback()
{
if ( oHttp.readyState == 4 )
{
if ( oHttp.status == 200 )
{
document.form1.submit();
}
else
{
if (oHttp.status == 404)
{
setStatus( submitURL + " Not Found");
}
else
{
setStatus("Error: " + oHttp.status );
}
}
}
}



=========== new status label in HTML page


<div id="statusInfo">&nbsp;</span>


Thank you.


-Pam
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
474,434
Messages
2,571,685
Members
48,796
Latest member
Greg L.

Latest Threads

Top