date validation: javascript

Showing posts with label javascript. Show all posts

Monday, March 26, 2012

Developing Atlas Friendly Controls

I'm working a custom control that requires client-side javascript. Is there a list of best practices for making a control Atlas friendly?

I'm currently using the ClientScriptManager to register the necessary scripts, but something is not working properly.

hello.

though i still haven't developed none, i think that an atlas control is supposed to implement the IScriptControl interface (this interface introduces a method that is called when you need to register the xml-script emitted by the control).

since there still is no info about it, i think that your best option is to use reflector and see how they implemented the atlas server controls.

If you are developing a server-side control that wishes to perform client-side logic or behavior then you can certainly approach it from a number of angles:

Simply generate your own JavaScript and register with the clientscript on the Page. then tie up your client-side events to functions therein

Detecting which UpdatePanel was updated for endRequest

I've got an issue where I'm trying to execute some javascript when a specific UpdatePanel on my page (I have about 5) is updated. I've added event handlers for initializeRequest and endRequest. I know that I can get the ID of the element that *caused* the postback - but I really don't want that. I need the id of the UpdatePanel that is being updated.

Then endRequest method that gets called after an UpdatePanel gets updated is called for any and all UpdatePanels - this ambiguity makes it difficult to know which UpdatePanel caused this request.

Any ideas?

Cheers,

Bobby

The endRequest event doesn't have the information you want. If you handle the pageLoaded event, the args parameter that gets passed in to your handler has a panelsUpdated property which returns an array containing the panels that were updated.

detect when updatepanel has returned in javascript

I have this code which detects when an updatepanel has returned

Sys.Application.load.add( onLoad );

function

onLoad()

{

var page = $object("_PageRequestManager");

page.propertyChanged.add( changed );

}

function

changed( obj,args )

{

if (args.get_propertyName() && obj.get_inPostBack() ==false)

{

var mode = document.getElementById('<%=siteMode.ClientID %>');//so something

}

Is there anyway to tell if a specific update panel was activated on a particular postback and then do something when it has finished its callback.

thanks

andrea

Have you found a solution? I am also looking for the solution, and want to add one more sample here so maybe someone experienced can help (I found the code somewhere (maybe on this forum) and slightly extended it):

<%@. 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"> void h(object s, EventArgs a) {txt.Text = DateTime.Now.ToString();}void h1(object s, EventArgs a) {txt1.Text = DateTime.Now.ToString();}</script> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Untitled Page</title> </head> <body> <form id="form1" runat="server"> <atlas:ScriptManager runat="server" id="manager" EnablePartialRendering="true"></atlas:ScriptManager> <atlas:UpdatePanel runat="server" ID="panel"> <ContentTemplate> <asp:Literal runat="server" ID="txt" /> <asp:Button runat="server" ID="bt" OnClick="h" Text="try" /> </ContentTemplate> </atlas:UpdatePanel> <atlas:UpdatePanel runat="server" ID="pane2"> <ContentTemplate> <asp:Literal runat="server" ID="txt1" /> <asp:Button runat="server" ID="bt1" OnClick="h1" Text="try1" /> </ContentTemplate> </atlas:UpdatePanel> </form> <script type="text/javascript"> Sys.Application.load.add( onLoad );function onLoad() {var page = $object("_PageRequestManager"); page.propertyChanged.add( changed );}function changed( obj, args ) {if( args.get_propertyName() == "inPostBack" && obj.get_inPostBack() == false) {alert("refreshed" ); }}</script> </body> </html>

Extending my previous post:

so hove in javascript function "changed" we can know what update panel: panel on pane2 caused call of the javascript function?

I still havent found a solution either

andrea

Hi,

unfortunately there isn't a solution at the moment. Actually, the ID of the panel that triggered the async postback is contained in the _postbackSettings object of the PageRequestManager, but this is an object that cannot be accessed from outside.

Thus, the only possibility is to modify the source code and create a property that returns the _postbackSettings object. I hope that the team will do this in one of the next releases.

No answer, but possibly related posts have been compiled near the end of this...

http://forums.asp.net/AddPost.aspx?PostID=1373674

that link takes me to a page for adding a new post

thanks

ah, so it does...perhaps this is better...

http://forums.asp.net/thread/1356742.aspx

Detect if AutoCompleteExtender is showing?

Greetings,

Looking for a way (in javascript) to detect if the autocompleteextender is currently showing?

I can get an instance of the control, I just dont know which property (if any) I should be checking?

var ace = $find('myAutoCompleteExtender');
if(ace ??){ //then i'm showing do some logic

}

Any ideas?

behavior.get_showing() ?

No unfortunately that property doesn't exist on the control

The only thing I can find is "_flyoutHasFocus" however ...that's not the same as 'is the flyout showing' ...

Any other ideas?

Detect Browser Support for Atlas

Hi There,

I was wondering if anybody has stumbled across a way to check if the browser supports Atlas (and namely javascript). In short I am developing a component, in which I would like to implement Atlas functionality - but only if the browser supports it. If not, I would like like the page to postback as normal - I was hoping that this might be the default behaviour of Atlas, but I have disabled JS in my browser and quite simply, nothing happens...

Any suggestions would be appreciated.

Regards

Jason

hello.

well, the atlas framework does that kind of comparison on the server side when the scriptmanager component adds the necessary atlas files to the page. take a look at the onpageprerendercomplete method of the scriptmanager class to see how those scripts are added (as allways, there's no safe approach to this).

I got a question regardign this issue.

Will Atlas team consider implementing IFrame postback when activeX is disabled? I see several other frameworks that works as expected when the activeX is disabled and really makes life a lot easier here.

Thanks.

Deserializing JSON objects manually - should I be doing this?

OK, I'm probably doing something horrendously wrong here, but here goes.

Following on from my battle with attempting to getembedded javascript to call an embedded web service I have got to a certain point and realised something may well be going wrong somewhere. I am intercepting calls to my web service usign a custom IHttpHandlerFactory. I am dealing with these calls using a custom IHttpHandler. I am talking back to the javascript by callingcontext.Response.Output.Write(...). (Correct me please if I'm doing anything wrong). Is there anyway to access the deserialized array of arguments passed to the web service? I can get the string passed from the javascript by analysingcontext.Request.InputStream.

So, given a"Person" class of:

class Person
{
string _name;

public string Name
{
get { return _name; }
set { _name = value; }
}
}

And aweb method of:

[WebMethod]
public Person ChangeName(Person p)
{
...
}

And ajavascript call of:

var person = new Person();
person.Name = "Josh";
MyWebServiceClass.ChangeName(person);

Thecontext.Request.InputStream is:

{"__type":"Person","Name":"Josh"}

If I try:

Person p = JavaScriptSerializer.DeserializeObject("{\"__type\":\"Person\",\"Name\":\"Josh\"}");

I get an argument null exception.

If I so much as change "__type" to "_type", I get a nice name-value collection.

If I change the string to remove the "__type" altogether and try:

Person p = JavaScriptSerializer.Deserialize<Person>("{\"Name\":\"Josh\"}");

I get a nicely deserializedPersonobject. But this involves messing with the InputStream, which I don't reckon I should have to be doing.

Any suggestions?

Cheers all,
Josh

Well, just as an update, I've discovered the way AJAX.NET deals with this deserialization is using a class called JavaScriptObjectDeserializer, which is now internal but I believe used to be public (seehttp://www.hanselman.com/blog/default.aspx?date=2006-07-07). I must be doing this wrong, can anyone give me any clues? Can I just return an instance of my web service in my HttpHandlerFactory somehow so I give it back to AJAX.NET to deal with I just "route" it to the right place? Please help!!!

I believe that this tutorial is a good resource for you:http://ajax.asp.net/docs/tutorials/ConsumingWebServicesWithAJAXTutorial.aspx

I didn't test it myself, but you could add a callback function to your code that invokes the web service, set the user context with the object you want to access it and then implement this callback function.

Hope this helps,

Maíra

Hi Maíra!

Thanks for the link! I'm not sure if this helps me out in my specific situation, but I might be wrong; I am not having the web service invoked under normal circumstances; I am intercepting a call (with my HttpHandler) for an "asmx" file that doesn't actually exist and trying to pass that call on the the relevent web service that is embedded within my dll. Maybe I don't understand what exactly is meant by setting the "user context", though - this sounds like it could be of help to me.

Thanks again,
Josh

Wednesday, March 21, 2012

delete ajax Extender with Javascript

I have a problem with AutoCompleteExtender.

the code in HTML

when I run script below, it has errors.

var node = document.getElementById('trUserName');
node.parentNode.removeChild(node);

I have tried, if <tr /> tag without any Extender Control, it can be removed.

and I have to remove control in javascript.

Can you help me ?

Hi Benelf,

I think the best way for your situation is put them inside a div container. When you want to delete it, you can hide the div. For example,

</div>
</td>
</tr>

To hide it , you can do it like this. document.all.automCompleteContainer.style.display ="none";

If you insist on deleting them, I suggest that you should first dispose() the AutoCompleteExtender by using $find("AutoCompleteExtender's BehavoirID").dispose().

I hope this help.

Best regards,

Jonathan

degradable Microsoft Ajax

Hello

I have a question about Microsoft Ajax, is Microsoft Ajax degradable ? Meaning will the website function even if I turn the Javascript off ? I know there is a small portion of users out there having their Javascript turned off, but I just wanted to know this out of curiosity!

Thank you

That depends on how you implement it. Can you build to degradeability? Yes. Does the framework force you to? No. For example, you could replace all your normal event handling with javascript calls to web services. Then your solution wouldn't degrade well.

I am confused now. Ok let me explain myself. lets say if I use a update panel and a triger, etc using standard Microsft Ajax controls, then what happen if I disable my Javascript on browser ? Does the solution still work.

I am not suing and customized javascript code myself, such as event handling, etc.

Yes Update Panel is inteligent enough to detect it and do the regular postback instead of partial..

Declaring controls in javascript

Is it possible to create the various toolkit controls in javascript? Specifically looking at the AutoCompleteExtender and the CollapsiblePanelExtender. My ultimate goal is to see if the controls could be used within an Atlas gadget.

Thanks,
Kyle

You can consume the .JS behavior files of the Toolkit controls directly for use outside ASP.NET (among other things), but that's not one of the primary scenarios for us, so I'm afraid we don't have much of documentation/samples for the relevant scenarios. You might find more information on this by searching the Atlas forums here and also the web as I recall someone showing how to do this with PHP or something...
Hi Kyle,

Actually you can find a straightforward example inFAQ item #13.

Thanks,
Ted

That's awesome, Ted. I got it to work with the following code, which is basically a variation of what's in the FAQ:

I do have one problem, though. I called the onAddBehavior method in the body's onload event and at that point, it looks like the AtlasControlToolkit namespace has not been defined yet because I get an error: 'AtlasControlToolkit' is undefined. When I call the method in the onclick method for a button on the page, though, it works fine.

Another way I got it to work is by extracting the javascript file for the AtlasControlToolkit.ExtenderBase object, making it an explicit javascript file and referencing that on the page.

First question: where should I call the onAddBehavior method?

Second question: Is the base control extender javascript file explicitly available anywhere or is it embedded in the Microsoft.AtlasControlExtender assembly?

My ultimate goal is to see if I can make a Gadget that incorporates toolkit extenders so my guess is that I will have to reference this javascript file directly since as far as I know, you can't include server-side controls within a Gadget. Yesno?

Hi Kyle,

Glad you were able to get it working. For your first question, there are two ways to get code to run after "Atlas" has finished loading. You can either add a handler to theSys.Application.load event or use the (little known) fact that "Atlas" will automatically call a function on your page calledpageLoad if it is defined. So in your case, I think the easiest approach would be something like:
functionpageLoad() {
OnAddBehavior();
}
Your second question is easy too. If you get thelatest release of the Toolkit, you'll see that we've taken everything that was in the extender base and made it public. It's now all found in theAtlasControlToolkit project'sExtenderBase folder.

I haven't had any experience with gadgets, but from what I understand they support "Atlas" so all our extenders that rely primarily on JavaScript behaviors should be useful.

Thanks,
Ted

Oh bother, I knew you made everything public but assumed it was in the latest CTP and when I didn't see it there, I chalked it up to a wondrous and fantastical dream. Now have the latest source and there it is in all its glory.

Having some issues with Atlas Gadgets in general but that's a separate discussion. Thanks a lot for your help, Ted.

Declarative Markup within a server control

I'm creating an address control that is utilizing Atlas in a couple of places. The first place I use it I've got the javascript functions working fine. (It auto fills the address based on the zip code.)
After the autofill, the user is allowed to type in changes as needed. I was going to use the autocomplete in the state portion, and was going to use the declarative markup similar to the HOLs. When putting two of the controls on a page I was registering two declarative blocks, and they don't work. I tested it in straight HTML outside the control and got the same result. However, in the HTML test I combined it to one block (below) and it works fine.
My problem is how to get the control to render one block of declarative markup if more than one of the same control exists.
Script

<scripttype="text/xml-script">
<page xmlns:script="http://schemas.microsoft.com/xml-script/2005">
<references>

<add src="ScriptLibrary/AtlasUI.js" />
<add src="ScriptLibrary/AtlasControls.js" />
</references>
<components>
<textBox id="Address2_txtState">
<behaviors>
<autoComplete
completionList="completionList"
serviceURL="Services/AddressAutoComplete.asmx"
serviceMethod="GetStateList"
minimumPrefixLength="1"
completionSetCount="10"
completionInterval="500" />
</behaviors>
</textBox>
<textBox id="Address2_txtState">
<behaviors>
<autoComplete
completionList="completionList"
serviceURL="Services/AddressAutoComplete.asmx"
serviceMethod="GetStateList"
minimumPrefixLength="1"
completionSetCount="10"
completionInterval="500" />
</behaviors>
</textBox>
</components>
</page>
</script>

I don't think I exactly understand your problem. Could you maybe share the code that resulted in "two declarative blocks"?

My original design created one declarative block per server control. As long as I only have one control, that works fine. As soon as I drop the second one on the page, neither of them work because I get two blocks (below), rather than the one block needed in my original post.

Interesting. All server-side Atlas controls should render their scripttags to 1 AtlasTextWriter, which will write the contents inside asingle script tag. At least that's what it is supposed to do.
Do you have a repro that results in the code you pasted?

As I understand it, you have created a custom composite server control? How are you rendering out the declartive block? Are you just string.building? Maybe you should look into this AtlasScriptWriter the other poster mentioned.

Does anyone have any more info on this AtlasScriptWriter (or AtlasTextWriter)? Is this the recommended method for rendering custom Atlas controls?