Going For AJAX: fire

Showing posts with label fire. 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 clear/reset a cascadingdropdown?

i have three dropdownlists. once i've selected third i fire a postback using the third dropdown's autopostback property. my question is how do i get all the dropdowns to reset back to their prompt messages ready to be used again.

i've tried changing the selectedindexes for the dropdowns to 0 and -1 but that doesn't work

Check outthis thread.

isn't there an easier way of doing this? Seems like a lot of work just to reset the dropdownlists

Hi Iljones,

Based on my research, I think the best solution is to modify the source code to meet your expectation. Here is another sample, please add the code below to your source code. When the last CascadingDropDown populated , onpopulated function will be called and it will set the first CascadingDropDown's selectedIndex to be 0.

Hope this help.

Best Regards,

Jonathan

Jonathan Shen – MSFT:
Hi Iljones,
Based on my research, I think the best solution is to modify the source code to meet your expectation. Here is another sample, please add the code below to your source code. When the last CascadingDropDown populated , onpopulated function will be called and it will set the first CascadingDropDown's selectedIndex to be 0.
<script type="text/javascript" language="javascript">
var flag = true;
function pageLoad(sender, args){
$find("myCDECity").add_populated(onpopulated);
}
function onpopulated(sender,args){
if(flag){
flag = false;
$get("<%=dlState.ClientID%>").selectedIndex = 0;
$find("myCDECity")._onParentChange(false);
$get("<%=dlCity.ClientID%>").disabled = true;
}
}
</script>
Hope this help.
Best Regards,
Jonathan

i'll give this a go today and let you know how it goes. Thanks Jonathan

Probarly to late, but here is an answer anyway.

CS: protected void Reset_Click(object sender, EventArgs e) { CascadingDropDown1.SelectedValue = null; }

Saturday, March 24, 2012

How do I bind an event to a custom Javascript function?

So I'm tyring to do this in xml-script if possible. What I'm looking for is how to fire a javascript function I define, but declare it in the <completed></completed> tags of my <webMethod>. I did it in a roundabout way by binding it to an html control and applying a custom transform to that html control, but that feels like cheating. Any advice? Ideally it'd look something like:

</bindings>

</invokeMethod>

</completed>

But of course that's not quite right as I tried it and it didn't work...

Ok, I managed to solve this, but I'd like to know if there's a way to solve it w/o resorting to what I did. First, I just used the completed attribute of the <pageMethod> (see my .js extension athttp://forums.asp.net/thread/1342638.aspx at this point in the discussion, though, assume it's a serviceMethod, as the functionality is the same). So, my xml-script worked in this fashion:

</bindings>

</pageMethod>

That all worked, except that the eventArgs object being passed back as part of the 'completed' event was a Sys.EventArgs.Empty object, which I figured out after iterating over the properties and then digging into the .js again. For my solution, since I was using my custom 'Com.VelocityDataSolutions.PageMethodRequest' class anyway, I just changed the onMethodComplete function to pass the result variable to the target function. to do that I changed:

target.completed.invoke(target,Sys.EventArgs.Empty);

target.completed.invoke(target,result);

It works like I want now, my event handler grabs teh eventArgs object to use for its processing. I might change it to pass a more complex object (e.g. passing all the variables instead of just the result), but for now it works.

My real question, though, is did I have to go through all this? lol... If I wanted to do the same thing w/ a serviceMethod and didn't wantt o mod the atlas.js or subclass or anything, is there a way to pass the web service's output string to the event handler in declarative markup?

Wednesday, March 21, 2012

How can I send the date from one calendar extender to another?

None of the events appear to fire for the extender. I would like a person to select a date on the first calendar and have that date as the staring date for the second calender.

Thanksc

Hi sox21,

Use the client event of the textbox.

When the text changes, put the text in the other textbox.

Because the text is in the other textbox, that text (= which is a date) will be the Selected date for the 2nd calendar!

Is this what you are looking for?

... <script type="text/javascript"> function setDate(sender) { var mytxt = document.getElementById('TextBox5'); mytxt.value = sender.value; } </script></head><body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <br /> <asp:TextBox ID="TextBox1" runat="server" onchange="setDate(this);"></asp:TextBox> <cc1:CalendarExtender ID="CalendarExtender1"runat="server" Enabled="True" TargetControlID="TextBox1"> </cc1:CalendarExtender> <br /> <asp:TextBox ID="TextBox5" runat="server" ></asp:TextBox> <cc1:CalendarExtender ID="CalendarExtender5"runat="server" Enabled="True" TargetControlID="TextBox5"> </cc1:CalendarExtender> </div>...

Kind regards,
Wim

I am able to get this code working on a blank page but it does not work when I add it to my page. My page uses a master page. When I enter the client script in debug, the sender is valued as expected but mytxt is set to null and throws a JS Error. Any ideas?

Thanks

try

document.getelementbyid("<%= TextBox5.ClientID >")

when the content and master merge to get rendered, the ID's of controls get renamed. Just look at the source through the browser to check this behavior!!!

EDIT:; also note that the text gets set but the selectedDate in the calendarExtender is not changed! --> Am I right about this? I think I noticed this behavior

Kind regards,
wim

That did the trick. Also, the selected date on the calendar does change. This is the exact behavior I was looking for.

Thanks!!!