Showing posts with label display. Show all posts
Showing posts with label display. Show all posts

Monday, March 26, 2012

AJAX Automatic label updating while typing text

Hi,

I'm testing AJAX out and I have a question. Is it possible to display the tex that I write in a textbox onto a label without pressing a button? So when I type a "1" in the textbox, I want to see the "1" directly on the label aswell.

Thanks,
Jeff

Use javascript. Add an onchange function to your textbox.

<input type="text" onchange="WriteMe(this);" />
<asp:Label ID="lblMesgArea" Text="" runat="server" />

JavaScript Function:

function WriteMe(Mesg)
{
var mesgArea = document.getElementById('" & Me.lblMesgArea.ClientID & "');
mesgArea.value = mesgArea.value + Mesg.value;
}

There are other ways to do it too. This the first thing that comes to my mind =)

WS

Saturday, March 24, 2012

Ajax and RequiredFieldValidator

Hello,

The ErrorMessage of My RequiredFieldValidator is not display when I submit again (the second time) my resquest.

<asp:UpdatePanel runat="server" id="UPContact">
<ContentTemplate>
...
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="Comments" ErrorMessage="*" Font-Size="XX-Small" SetFocusOnError="True"></asp:RequiredFieldValidator>
...

Any idea?

Are you using the updated validators? See:http://forums.asp.net/thread/1545781.aspx


Thank you a lot. It's just work fine!

Have nice day.

Wednesday, March 21, 2012

Ajax and dynamically created images

Hi all,

I have a page that display a large dynamically created image (server side script) that can take a while to be generated (say about 2 seconds). Pressing a button I want the image to be refreshed.

I included the image and the button in a UpdatePanel to avoid flicker, but I don't take the effect I want as images are loaded asynchronously by the browser after the UpdatePanel completes.

Is there a solution to avoid this?

Thanks in advance

Here's the simple code I used:

<htmlxmlns="http://www.w3.org/1999/xhtml">

<headrunat="server">

<title></title>

</head>

<body>

<formid="form1"runat="server">

<div>

<asp:ScriptManagerID="ScriptManager"runat="server">

</asp:ScriptManager>

<asp:UpdatePanelID="UpdatePanelMain"runat="server">

<ContentTemplate>

<imgalt=""src="testimage.aspx?<%=DateTime.Now()%>"/>

<asp:ButtonID="ButtonRfreshImage"runat="server"Text="Refresh"/>

</ContentTemplate>

</asp:UpdatePanel>

</div>

</form>

</body>

</html>

Hi,

I think you need to block the execution of button click event until the image is generated successfully so that the changes can be reflected on the client.

For instance:

btnClick()

{

generateImage();// call this method synchronously

}

Hope this helps.


This is what I do, my code was only an example to demonstrate the behaviours.

What happens in any case is that, if the image is big enough and the connection is slow, the page will be refreshed before the image is completely received because the browser download it asynchronously.

I solved this using two images, one invisible and the other as a placeholder: I refresh the invisible image and when it is complete I reassign the .src of the placeholder image to load the some URL: the file is now in the cache and it happens immediately .... but I think it's strange Ajax doesn't support this directly.

Ajax Accordion with multiple columns

Hi!

I was wondering if there is a way to make accordion display panes in more than one column, e.g. <Row1><column1><Pane1/></column1><column2><Pane2/></column2></Row1>

Can't you just use two Accordions next to each other using <table> or <div>, e.g.:

<div>
<div style="width:50%"><accordion /></div>
<div style="width:50%"><accordion /></div>
</div>

-Damien


That solution does not allow to have only one accordion pane open at a time, as one accordion does not know about the state of the otherSad

That's correct, one doesn't know about the other; however, you could write your own javascript to handle that.

-Damien


Thanks for the adviceWink But unfortunately i don't know javascriptSad Is there a way to do this without writing javascript?Or maybe you could give me a link which describes how to do this via javascript?


I can't think of a way to accomplish what you want without JavaScript.

I would recommend that you look at the code for the Accodion in the AccordionBehavior.js file (the code can bedownloaded from CodePlex), although without knowing JavaScript, you're going to have a difficult time with it.

I found another Accordion that my help you, seehttp://www.stickmanlabs.com/accordion/; take a look at the "A Horizontal Accordion! (Nested)" section.

-Damien


Thanks for the adviceSmile Maybe someone else had such problem and could give a suggestion?

I've found a solution, it's quite easy actually. Hope it helps someone.

First of all, you should create an event handler for the accordion's selected index changed event

function Handler()

{

var Accordion2Behavior = $get("Accordion1UniqueId").AccordionBehavior;

Accordion2Behavior.set_SelectedIndex(-1);

}

The code given above searches for the Accordion2 and closes it by setting the selected index to -1.

function ToggleOpen()

{

var Accordion1Behavior = $get("Accordion1UniqueId").AccordionBehavior;

Accordion1Behavior.add_selectedIndexChanged(Handler);

}

Next we have added our event handler to the selectedindexchanged event of the Accordion1. Now if you select something on the Accordion1, Accordion2 is guaranteed to be closed. Behave similarly to add such behaviour to Accordion2.


How is the ToggleOpen() function called? Is it somehow wired up to the accordion?