Going For AJAX: below

Showing posts with label below. Show all posts

Monday, March 26, 2012

How do I get Javascript Inside Content Template to fire on postback

I have 3 ASP controls inside of a ContentTemplate (some of mysyntax may be a little off below (doing it from memory here) but you'll get the idea):

<asp:dropdownlist id= "control1" runat="server".../>
<asp:dropdownlist id "control2" runat="server".../.../>
<input type='button' onclick ='changeControlVisibility();' "control1".../>
<script type='Javascript>
'changeControlVisibility();
</script>

</contenttemplate>

Now, the''changeControlVisibility' javascript SETS a hidden value back and forth from 1 to 0 each time its clicked,AND it sets the 'style.visibility' property of both Control1 and Control2 .

So, when the changeControlVisibility runs during the the Load of the page, Control1 is then visible and Control2 is not visible. After the page has been loaded, each time the BUTTON is clicked after that, its the opposite actions (control1 =hidden & control2=visible) to (control1-visible & control2=hidden). This all works great.

The issue is this, when the selectedindexchanged of either of the dropdowns fires a postback (which is what I want) the

<script type='Javascript>

'changeControlVisibility();

</script>

never gets called or run, therefore all the controls within the contenttemplate get set to style.visiblity =visible (so they all appear) becasue that script never gets called during the postback.

Any suggestions on how to get it run or any good workarounds?

Thanks very much and I will immediated mark the issue resolved to the genius who comes up with a solid answer.

You can solve this by having that JavaScript outside of your UpdatePanel (in the <head> tag would work) of your page and then call it everytime the UpdatePanel gets updated. Have a look at the PageRequestManager class which enables you to execute JavaScript before, during, after UpdatePanels are loaded.

scripttype="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded);
function pageLoaded(sender, args){
if (args.get_panelsUpdated().length > 0){
changeControlVisibility();
}
}
</script>

That's a basic example and you can add better checks for specific UpdatePanels but you get the idea.

thanks, that sound like the answer.

last thing, it looks like in your example that the line 'Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded);'

is adding a new script, if I am wanting to call an existing one, is there a differnt even I should use?

Never mind, i get it now...

So when I create my javascript then

'Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded);

is actually part of my actual javascript.

thanks so much!

Cool. Yes.

I had started to reply to your other message:

"
pageLoaded is name of the handler method that gets called, you can name it anything and have it execute any existing script also.

Details about the pageLoaded event can be found here:
http://ajax.asp.net/docs/ClientReference/Sys.WebForms/PageRequestManagerClass/PageRequestManagerPageLoadedEvent.aspx
"

Sounds like you've got it.

Cheers,
Al

Thanks Al you made my day!

How do I Display an Animated GIF when afile is uploaded?

I cant believe how difficult this is to do. I asusmed using an updatepanel and an updateprogress control would handle this easily. My code is below. However "FileUpload1.PostedFile.FileName" is

always set to null. Can anyone suggest how I can display a simple animated gif when Im uploading a file to the server. I dont want a progress bar just a simple animated gif to show that something is a happening. Thanks!

protected void Button3_Click(object sender, EventArgs e)
{
string File1 = FileUpload1.PostedFile.FileName;

}

ASP.NET code:

<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>

<asp:Button ID="Button3" runat="server" Style="z-index: 113; left: 8px; position: absolute;
top: 108px" Text="Button" OnClick="Button3_Click" />
<asp:FileUpload ID="FileUpload1" runat="server" Style="z-index: 101; left: 74px;
position: absolute; top: 438px" />

</ContentTemplate>
</asp:UpdatePanel>

<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
<asp:Image ID="Image1" runat="server" ImageUrl="~/Graphics/CAFQW3B9.gif" Style="z-index: 100;
left: 76px; position: absolute; top: 488px" />

</ProgressTemplate>
</asp:UpdateProgress>

Hi,

there are several controls that don't work asynchronously by putting them in an UpdatePanel controls. FileUpload is one of them so you need to set the uploadbutton to be a postbacktrigger of the UpdatePanel so a normal synchronous postback will occur.

Grz, Kris.

Thanks Kris. Im new to this and Im not really sure what you mean by "postbacktrigger". Can you point me to a url or post a ccode snippet that can explain how to show my animated gif on file upload?

Hi,

rangers99:
Im new to this and Im not really sure what you mean by "postbacktrigger".

You can take a look at the example on this page:http://ajax.asp.net/docs/mref/T_System_Web_UI_PostBackTrigger.aspx.

Grz, Kris.

Wednesday, March 21, 2012

how can I pass a value to a javascript function on image clickBehavior atlas?

Hi Guys, I have the image template below and on imageURL I bind theDBImageName that comes from database via webservices objects. I also call a function DoAdditionalHandling because I need to construct the actual image URL. Now I need to define a click event which I am using theclickBehavior . How can I pass to the function a value that comes from database, let's say how can I passDBImageName field that is being bound to imageURL. Please advice!

<image id=

"ImageThumbPath">

<binding dataPath=

"DBImageName" property="imageURL" transform="DoAdditionalHandling" />

<binding dataPath=

"DBImageALT" property="alternateText" />

</bindings>

<clickBehavior click=

"ImageClickHandler" />

</behaviors>

</image>

From your event handler, use the sender's dataContext to get the value, like so:

function imageClickHandler(sender, eventArgs){ var DBImageName = sender.get_dataContext().DBImageName;}

I just posted a working exmaple of this to my blog:http://smarx.com/posts/how-to-pass-a-value-to-a-javascript-event-handler.aspx.

Steve,

I asked you also the other day. Can you help me with<atlas:InitialDatarunat="server"id="InitialData1" >

I need to know how to specify the method name and the parameters to method. The example you showed me does not specify it, but it seems like it has its default methods because the web service on that example inherits froma dataservice. Please help me and give me more details if you can. I appreacite your help.

If I understand your question correctly, you want to specify what method to call on the web service (like using "loadMethod=..." on a dataSource in xml-script). Looking at theclass browser documentation for InitialData, it doesn't look like that's possible. :-(

Yes, the example works because it inherits from DataService and provides one method with the attribute [DataObjectMethod(DataObjectMethodType.Select)], so the right thing happens by default.

so any work around? Please advice.

Nothing that I'm aware of (but others please chime in if you have an answer).

I think you'll have to just not use <atlas: InitialData /> and just use your dataSource with autoLoad="true". InitialData is just there to improve performance a little by allowing you to send the data down with the initial page load instead of requiring a second roundtrip to the server.

I'll ping the product team and see if a LoadMethod parameter will be added to InitialData in the future.

is it anyway to specify the method call and parameters ondataSource with autoLoad="true? Please advice Steve!

Yes, just use the "serviceURL=..." and "loadMethod=..." properties on your <dataSource /> xml-script tag. I believe you can just specify <parameters foo="bar" baz="blah" ... /> inside your <dataSource /> to pass parameters.

If you need to databind those parameters, use <binding dataPath="..." property="parameters" propertyKey="foo" />.

not sure how. do u have the syntax of the datasource parameters? how can then I bind it to a dataview?

More explicitly, here's the syntax:

<dataSource id="myDataSource" serviceURL="myservice.asmx" loadMethod="myLoadMethod"> <parameters param1="foo" param2="bar" /> </dataSource>

(Assuming you have myLoadMethod(string param1, string param2); in your web service.)

Databinding your dataView doesn't need to change at all. It's still:

<dataView id="myDataView">
    <bindings>
        <binding dataContext="myDataSource" dataPath="data" property="data" />
    </bindings>
</dataView>

I believe you already had this working in your code from theother thread.

I did that exactly and got a javascript error invalid xml mark up script. On the other example, I have it simply by clicking in a buton. But my other task is when page loads, the data has to be displayed.

I'll look into getting you a full working example.

To follow up on what I said earlier "I'll ping the product team and see if a LoadMethod parameter will be added to InitialData in the future," I checked with the product team, and it sounds like InitialData will have all the functionality of dataSource (so that includes specifying the method to call on the web service and any parameters), but they're not sure of the timeframe.

Thank you! Please email me atnesfrank@.yahoo.com

Steve,

Here is what I am doing but I get invalid xml mark up script. may be the syntax for parameters is diffrent? Please advice!

<dataSource id=

"dataSource1" autoLoad="true" serviceURL="~/AtlasTestService.asmx" loadMethod="GetTestData">

<parameters Code=

"cu0001" paramboolean="true" />

</datasource>

It's probably because your closing tag doesn't match your opening tag. Try changing "datasource" to the correct capitalization: "dataSource".

Monday, March 26, 2012

How do I get Javascript Inside Content Template to fire on postback

How do I Display an Animated GIF when afile is uploaded?

Wednesday, March 21, 2012

how can I pass a value to a javascript function on image clickBehavior atlas?

Going For AJAX

Blog Archive

About Me