Going For AJAX: file

Monday, March 26, 2012

Saturday, March 24, 2012

How do I add defer attribute to ScriptReference?

Hello all,
I am using Ajax.NET'sasp:ScriptReference to include a Javascript file that needs to be run when a PartialUpdate is done.

Does anyone know how to adddefer to the rendered Javascript?

For Example.

1 <asp:scriptmanager runat="server" ID="ScriptManager1">
2 <Scripts>
3 <asp:ScriptReference Path="~/pngfix.js" />
4 </Scripts>
5 </asp:scriptmanager>

Gets rendered as
<script src="http://pics.10026.com/?src=../pngfix.js" type="text/javascript"></script>

But I would like the Rendered JavaScript to be rendered as following,
<script src="http://pics.10026.com/?src=../pngfix.js" type="text/javascript" defer></script>

Cheers,
Warren

Hi Warren,

To add defer to the rendered javascript, you may add set LoadScriptsBeforeUI to "false". Here is the example.

<asp:ScriptManager ID="ScriptManager1 runat="server" LoadScriptsBeforeUI="false">
<Scripts></Scripts>
</asp:ScriptManager>

In my opinion, addind <script src="http://pics.10026.com/?src=../pngfix.js" mce_src="../pngfix.js" type="text/javascript" defer></script> directly to your aspx file is a better choice.

Note: It is not recommended to do this if you have complex(multi) js files.

Hope it helps.

Hi Jon,
Thanks to replying to me, unfortunately neither of these solutions worked.

I think the JavaScript is the issue at the moment, as it does not fire again when the page is partially updated. Do you have any ideas on how this could be resolved?

Thanks,
Warren

Hi Warren,

For executing your js code after every asynchronous post, you should use ScriptManager.RegisterStartupScript method or call your js function at endRequest event(if a synchronous post , please use pageLoaded event). Here is an example. Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function{//add your method here});

Big Smile

Hi Jon,
Sorry with being a relative beginner to ASP.NET with AJAX I dont fully understand how to implement your suggestions.

I am no JavaScript whizkid either and dont know how to modify the JS for it to fire off after every asyncronous post - from what I understand the JS is not a function but justs runs - could this be causing me the problem?

Below is the source for the JS PNGFix

1/*23Correctly handle PNG transparency in Win IE 5.5 and 6.4http://homepage.ntlworld.com/bobosola. Updated 18-Jan-2005.56Use in <HEAD> section with DEFER keyword7wrapped in conditional comments thus:89<!--[if lt IE 7]>10 <script defer type="text/javascript" src="http://pics.10026.com/?src=pngfix.js"></script>11 <![endif]-->1213This extended version includes imagemap and input image functionality.14It also requires a 1px transparent GIF.1516*/17var strGif = "transparentpixel.gif"18var strFilter = "progid:DXImageTransform.Microsoft.AlphaImageLoader"19var arVersion = navigator.appVersion.split("MSIE")20var version = parseFloat(arVersion[1])2122if ((version >= 5.5) && (document.body.filters))23{24 for(var i=0; i<document.images.length; i++)25 {26 var img = document.images[i]27 var imgName = img.src.toUpperCase()28 if (imgName.substring(imgName.length-3, imgName.length) =="PNG")29 {30 var imgID = (img.id) ? "id='" + img.id + "' " : ""31 var imgClass = (img.className) ? "class='" + img.className + "' " : ""32 var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "33 var imgStyle ="display:inline-block;" + img.style.cssText34 if (img.align =="left") imgStyle ="float:left;" + imgStyle35 if (img.align =="right") imgStyle ="float:right;" + imgStyle36 if (img.parentElement.href) imgStyle ="cursor:hand;" + imgStyle37 if (img.useMap)38 {39 strAddMap ="position:relative; left:-" + img.width + "px;"40 + "height:" + img.height + "px;width:" + img.width +"\" "41 + "src=\"" + strGif + "\" usemap=\"" + img.useMap42 + "\" border=\"" + img.border + "\">"43 }44 var strNewHTML = "<span " + imgID + imgClass + imgTitle45 + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"46 + "filter:" + strFilter47 + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"48 if (img.useMap) strNewHTML += strAddMap49 img.outerHTML = strNewHTML50 i = i-151 }52 }5354 for(i=0; i < document.forms.length; i++) findImgInputs(document.forms(i))55}5657function findImgInputs(oParent)58{59 var oChildren = oParent.children60 if (oChildren)61 {62 for (var i=0; i < oChildren.length; i++ )63 {64 var oChild = oChildren(i)65 if ((oChild.type == 'image') && (oChild.src))66 {67 var origSrc = oChild.src68 oChild.src = strGif69 oChild.style.filter = strFilter + "(src='" + origSrc + "')"70 }71 findImgInputs(oChild)72 }73 }74}

And this is being called in a master template like so.

If you could give me a full example for me to look at, i would really aprreciate it.

Thanks,
Warren

Hi warren,

Thanks for your code. It is not recommended to add line number to your source code. Would you please modify it if you have time? Big Smile

Hi Jon here is the code without line numbers.

/*Correctly handle PNG transparency in Win IE 5.5 and 6.http://homepage.ntlworld.com/bobosola. Updated 18-Jan-2005.Use in <HEAD> section with DEFER keywordwrapped in conditional comments thus: <!--[if lt IE 7]> <script defer type="text/javascript" src="http://pics.10026.com/?src=pngfix.js"></script> <![endif]-->This extended version includes imagemap and input image functionality.It also requires a 1px transparent GIF. */var strGif = "transparentpixel.gif"var strFilter = "progid:DXImageTransform.Microsoft.AlphaImageLoader"var arVersion = navigator.appVersion.split("MSIE")var version = parseFloat(arVersion[1])if ((version >= 5.5) && (document.body.filters)) {for(var i=0; i<document.images.length; i++){ var img = document.images[i] var imgName = img.src.toUpperCase() if (imgName.substring(imgName.length-3, imgName.length) == "PNG") { var imgID = (img.id) ? "id='" + img.id + "' " : "" var imgClass = (img.className) ? "class='" + img.className + "' " : "" var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' " var imgStyle = "display:inline-block;" + img.style.cssText if (img.align == "left") imgStyle = "float:left;" + imgStyle if (img.align == "right") imgStyle = "float:right;" + imgStyle if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle if (img.useMap) { strAddMap = "<img style=\"position:relative; left:-" + img.width + "px;" + "height:" + img.height + "px;width:" + img.width +"\" " + "src=\"" + strGif + "\" usemap=\"" + img.useMap + "\" border=\"" + img.border + "\">" } var strNewHTML = "<span " + imgID + imgClass + imgTitle + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";" + "filter:" + strFilter + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" if (img.useMap) strNewHTML += strAddMap img.outerHTML = strNewHTML i = i-1 }} for(i=0; i < document.forms.length; i++) findImgInputs(document.forms(i))}function findImgInputs(oParent){ var oChildren = oParent.children if (oChildren) { for (var i=0; i < oChildren.length; i++ ) { var oChild = oChildren(i) if ((oChild.type == 'image') && (oChild.src)) { var origSrc = oChild.src oChild.src = strGif oChild.style.filter = strFilter + "(src='" + origSrc + "')" } findImgInputs(oChild) } }}

Thanks,
Warren

Hi Warren,

Here is a simple sample to indicate how to add a function in endRequest event and show difference effects between asynchronous and synchronous post.

Aspx:

<%@. Page Language="C#" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"></script><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>Untitled Page</title></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server" LoadScriptsBeforeUI="false"> <Scripts> <asp:ScriptReference Path="../js/TestJS.js" NotifyScriptLoaded="true"/> </Scripts> </asp:ScriptManager> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate><%=DateTime.Now.ToString()%> <asp:Button ID="Button1" runat="server" Text="Button" /> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID ="Button1" EventName="Click" /> </Triggers> </asp:UpdatePanel> </form></body></html>

JS File

// JScript File
alert("called when synchronous post");
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(processAfterAsynchronous);
function processAfterAsynchronous(){
alert("called when asynchronous post");
}
if (typeof(Sys) !== "undefined") Sys.Application.notifyScriptLoaded();

For learning more about javascript , please find a tutorial online or buy a relevant book.

How can I use bridging with AutoCompleteExtender?

I would like to use external webservice to get data in AutoCompleteExtender instead of having local .txt file as specified in ATLAS documentation/exmples.

.asbx is correctly registered in IIS. I have created a bridge file ServerAutoComplete.asbx like...

xmlversion="1.0"encoding="utf-8" ?>
<bridgenamespace="Samples.AspNet"className="BridgeServerAutoComplete" >
<proxytype="CatalogReader, App_Code" />
<methodname="GetWordList">
<input>
<parametername="prefixText"/>
<parametername="count" />
</input>
</method>
</bridge>

where CatalogReader is class of my webservice which is hosted on another server.

I have following settings in my ServerAutoComplete.aspx page forScriptManagerandAutoCompleteExtender.

<atlas:ScriptManagerID="AtlasPage1"runat="server">
<Services>
<atlas:ServiceReferencePath="~/ServerAutoComplete.asbx"/>
</Services>
</atlas:ScriptManager>

...

asp:TextBoxID="TextBox1"runat="server"></asp:TextBox>

<atlas:AutoCompleteExtenderID="autoComplete1"runat="server">
<atlas:AutoCompletePropertiesEnabled="True"MinimumPrefixLength="1"ServiceMethod="GetWordList"ServicePath="ServerAutoComplete.asbx"TargetControlID="TextBox1"/>
</atlas:AutoCompleteExtender>

...

Now when I run ServerAutoComplete.aspx page I am not getting any AutoComplete words.

My question is how can I set this whole set-up working? How can I set parameters of webservice method from AutoCompleteProperties?

Am I missing any step?

Thanks,

Vishant

Hi Vishant,

So the easiest way for you to pass parameters to the bridge in this scenario would be on the query string.

First you'll need to enable get for your bridge service, which you can do by adding:

<methodname="GetWordList" getEnabled="true">

Now you can hit the bridge using a url like: http:yourserver/ServerAutoComplexe.asbx?mn=GetWordList&prefixText=<text>&count=<count>, you should verify that using the browser and make sure that you get some JSON back...

That being said, I'm not sure there's an easy to pass these on the query string from AutoComplete. The best option would be to add a <binding> for the serviceUrl of the autocompleteproperteries where you specify a custom javascript transform method, i.e. transform="GetServiceUrl", and this method returns "ServerAutoComplete.asbx?prefixText="+document.getElementById("TextBox1").value and you also add the count parameter in there as well.

That should work, I think...

Hope that helps,
-Hao

Hi Hao,

Thanks for your reply.

I enabled "get" on my bridge service as you have mentioned but when I hit browser with "http:yourserver/ServerAutoComplexe.asbx?mn=GetWordList&prefixText=<text>&count=<count>" it does not give any JSON. Is this the exact syntax should I use?

I also could not find</binding>tag anywhere in documentation. Is this new tag forAutoCompleteProperties? I put it as shown below but no result.Does this syntax is correct?

<atlas:AutoCompletePropertiesEnabled="True"MinimumPrefixLength="1"ServiceMethod="GetWordList"ServicePath="~/ServerAutoComplete.asbx"TargetControlID="TextBox1">
<bindingtransform="GetServiceUrl"></binding>
</atlas:AutoCompleteProperties>

I know I am asking too much but I am new to ATLAS and JSON. It would be great if you can please provide step by step instruction or syntax?

Vishant

So you'll want to hit the real URL of your server with the browser, not http:yourserver..., you'll also want to give real data to your service.

Taking a step back, what is does your ServerAutoComplete.asbx look like?

But the real situation is that currently the AutoCompleteExtender does not really have a good story for hitting a bridge rather than an explicit webservice as its expecting, the option I listed above is more of a workaround/hack given the existing situation.

Hope that helps,
-Hao

Monday, March 26, 2012

How do I file a bug report?

Saturday, March 24, 2012

How do I add defer attribute to ScriptReference?

How can I use bridging with AutoCompleteExtender?

Going For AJAX

Blog Archive

About Me