For the nerds: ASP.Net/Javascript mystery

Background:

I have a page that users use the tell us they have competed a trip. There is a GridView filled with data, one of the columns is a radio button list The click a radio button in the radio button list, a ajax popup appears, they enter data, hit a button and poof, we now know they completed the trip. I used Javascript to loop the the table created by ASP.Net to get to the correct row, grab which radio button they clicked and then went on my way. I registered the onclick event of the radio button list as each row was bound on server side.

The changes:

The amount of data this page displays has become too much to loop through the table to find what the user clicked. So I now register a separate onClick event for each item in the radio button list (since ASP breaks the list up into separate <input> tags anyways). This allows me to skip the whole looping crap since I can now just pass the value of the item into my Javascript function.

The mystery:

This new way works, once, if they don’t cancel the ajax popup. I can get the popups to appear as needed, but only if I don’t send anything to the server (by hitting the cancel button). If I actually send the data off to the server I can no longer get any popups. I put an alert() into the JS function and clicked a radio button…low and behold, the function is not being called. When a user completes a trip, I disable that radio button list, so I commented that code out and tried it (thinking maybe it was disabling every row for some reason) but it still did not work. No other code fiddles with the radio buttons themselves.

Any ideas? Me and a co-worked are going nuts over here.

Oh, I know this is a car forum, but to be honest…the guys on here are more helpful than the Microsoft ‘Help’ forums.

I can handle any crystal and sql questions, but .NET is all Shawn96VR-4

Well, figured out that the events are getting unregistered. After I finish my work with the data they entered I loop through the whole GridView and re-register all the radio buttons. Works, but I don’t like that I have to use a hack to make it work.

Shawn, any ideas? places to look?

Give me a bit. I had a few Lobsteritas for dinner and the room is spinnin. :ahh

Background:

I have a page that users use the tell us they have competed a trip. There is a GridView filled with data, one of the columns is a radio button list The click a radio button in the radio button list, a ajax popup appears, they enter data, hit a button and poof, we now know they completed the trip. I used Javascript to loop the the table created by ASP.Net to get to the correct row, grab which radio button they clicked and then went on my way. I registered the onclick event of the radio button list as each row was bound on server side.

It might not matter but I am confused as to why you would use JavaScript to find which button they licked when you said you registered the onclick event of the radio button list? Since you know AJAX, you can do a round-trip to the server (for whatever reason) if you wanted. Probably not important but I just like to understand what you are doing.

The changes:

The amount of data this page displays has become too much to loop through the table to find what the user clicked. So I now register a separate onClick event for each item in the radio button list (since ASP breaks the list up into separate <input> tags anyways). This allows me to skip the whole looping crap since I can now just pass the value of the item into my Javascript function.

Smart man. A lot of people using JavaScript poorly resulting in a huge performance hit. It might work just find but the way in which you loop through the collection might not be adequate. It doesn’t matter. You are doing the smarter thing: registering for an event so you know instantly, which control has been clicked.

The mystery:

This new way works, once, if they don’t cancel the ajax popup. I can get the popups to appear as needed, but only if I don’t send anything to the server (by hitting the cancel button). If I actually send the data off to the server I can no longer get any popups. I put an alert() into the JS function and clicked a radio button…low and behold, the function is not being called. When a user completes a trip, I disable that radio button list, so I commented that code out and tried it (thinking maybe it was disabling every row for some reason) but it still did not work. No other code fiddles with the radio buttons themselves.

Are you re-adding the event handler for your controls EACH time the page loads? Remember, AJAX allow the UI to stay the same but adding controls add runtime with event handlers requires you to re-add every single page load. It’s misleading because visually it appears fine but if you check the page’s source BEFORE/AFTER, you will probably notice your JavaScript is not referenced because the events are not wired anymore.

It’s hard to diagnose without seeing but if that doesn’t work, feel free to reply here or put up your source code and I can take a look at it.

By the way, if this is your problem, you should be careful with how you are re-loading these controls. It might be advantageous to hold the data used to build the controls using ASP View State after your first database (or whatever method) pull. This would eliminate multiple trips. Also, check the GridView’s EnableViewState property. I am not sure but that might handle re-building these event wirings.

I just got typing out a nice reply and then I read this!

Yea, you need to re-wire controls done at run-time. Try setting the GridView’s EnableViewState property (What GridView control you using? base .NET? Yuck. :wink: )

You could create a method that reloads from the database or whatever source each time the page loads so that the rewiring occurs. However, be careful because 1) You are putting the controls/data in this method back to an original state (Maybe that’s ok?) 2) Expensive database pulls

There is ways around this too but it depends how long the page loads if you care to put more time into it.

My responses are in bold.

I wouldn’t say I know AJAX. I use it for the modal popups, and update panels to remove flicker. I guess event was not thr right word. Because if you use a normal .Net event, you always get the top most radio button list. What I did was add an attribute, onclick, to each radio button list as it was put into the GridView that called a JavaScript function. The goal was to do as much of this on the client side as possible, post backs are slow.

That is not AJAX. That’s just using JavaScript on the client side. Since postbacks are slow, this makes sense as you found out.

Finally, some one thinks I’m smart :tong The looping worked for awhile, but then instead of having 50-100 rows of data on a page, some companys ramped up and are now needing 500-1000 rows a page. Also, since this looping is on the client’s machine, there is no way to ensure its fast, even if I unroll the loop, because they could be on some POS from 1990.

We can talk about this forever as it really depends where the bottle neck is: the search execution, the download, or the page rendering. There is a TON of ways to resolve this problem.

As I mentioned earlier, I mis-spoke and I’m adding an attribute, not event handlers. I figured out that on each page load, even if I don’t reload the GridView, the onclick attribute is being dropped from all the buttons. This is weird to me because I have a couple other buttons that work the same way (I add the onclick attribute at run time via code behind) and they have always worked.

Technically, you are wiring events as you are wiring up the “onclick” event. However, you are using “attribute” because that is used for the HTML controls on the client side (vs .NET’s OnClientClick event equiv for server-side controls) where as the onclick is ASP .NET’s (server side controls) is handled on the server (postback occurs).

Now that I think about it, I add the attribute to those buttons in PageLoad. Thats why they have always worked.

Yep. They always got re-wired up.

The data I use to build the controls’ onclick attribute is a RowDataKey from the GridViewRow, and the value of the control. The database is only hit on initial page load and when the user wants to view a different date range.
[/quote]

How is the data stored for subsequent page loads? Is it stored in View State?

I am using the base .NET GridView :headbang

I use RadControls by Telerik. Not too pricey but they are damn impressive. They are hefty if you look at the CSS/JavaScript but functional.

What I did was create a method that re-wires everything after a user ‘verifies’ a row. That post back resulting from that is the only postback in which the grid is not reloaded (and hense everything being setup right).

Makes sense

Well, I want to put more time into it as I see the re-wiring as a hack. But the page load time varies based on the amount of data being pulled from the database. Ideally we want it as fast as possible.

The re-wiring isn’t a hack if you consider ASP is a disconnected application. You lose state as soon as the server delivers the response back to the browser. It has no idea what’s going on until a response is sent back to the server.

Consider this: You add a server side control to a page such as ASP:Button and then specify the OnClick event. You go to the code behind and handle the event accordingly (BTW, I use C# but I can translate to another .NET language if you prefer): protected void btnSave_OnClick(object sender, eventargs e) …

You then expect that event method to get called when you click the btnSave button. It only does because the button is WIRED UP. If you check the page declaration you might see this:

<%@ Page Language=“C#” AutoEventWireup=“true” Title=“Shawn August’s Guestbook”
MasterPageFile="~/BASE/BaseMasterPage.Master" Codebehind=“guestbook.aspx.cs” Inherits=“ShawnAugustDotCom.guestbook” %>

That handles the re-wiring every page load for controls that are added to the ASPX. If you don’t use that attribute, you need to do the wiring yourself every time the page re-loads. How else would the server know that you want x control wired to y event?

With that said, this is where it becomes tricky because a lot of run-time controls are data driven meaning you need to get the data from soemwhere which is often an expensive database hit or such. You can store that data locally via View State and rebuild the page (because you need to re-wire the events).

For example,

page load
database pull -> get # of trips from database
save database pull in ViewState
display trips within gridview control
add controls as necessary and wire them up

page re-load
check if saved database pull exists. If not, re-grab data
display trips within gridview control
add controls as necessary and wire them up

In this scenario, you do not make a database pull.

I am almost positive that you need to re-wire up the events for controls added at run-time which means you need to re-initialize that page’s user interface accordingly.

You should get creative to avoid re-using the same method that pulls the data from the database and initializes the page’s user interface to avoid slowness from the data pull. By the way, this is where AJAX is helpful. The page re-load might not be slow if you were to use AJAX because AJAX would pull from the database but not have to do anything else but re-build that GridView control as that is what you need to be “updated”.

whoa did i hear ajax :stuck_out_tongue: i’ll read the thread in a couple hours cuz i have to fix a stupid pc right now, then if u havent solved it maybe i’ll give it a go :stuck_out_tongue:

It’s not an AJAX problem.

lol i know i know was just bein silly (my sig as disclaimer), im backin up files right now so im gonna read this, its prolly over my head anyways :slight_smile:

Argh. I need a new HD. I just filled 2TB with Blu-Ray. Thanks for the reminder.

ahh , i have only 1 and half tb of space total on this pc but its fine with me i used to be big into movies and games etc, that took all my space, now i just have a few movies, i delete them unless they are NEW NEW and might wanna watch again, otherweise its pointless for me, and the same with games i hardly play games anymore :frowning: sucks… but w/e i got crysis warhead to test it out benchmark wise but thats about it ahaha

Shawn, thanks for the reply, I will break it down and respond tomorrow, I’m about to go carve pumpkins over beer.

But, I also use C#. VB is ugly. :lol

As far as HDDs, watch newegg, I just picked up a Seagate 1TB Sata 3.0 for $130 shipped. I’ve seen the same size WD for the same price as well before.

Actually:
http://www.newegg.com/Product/Product.aspx?Item=N82E16822136151&cm_sp=DailyDeal--22-136-151--Product

Jump on that, might be today only.

And a quick question while I’m thinking about it:

Any way to tell the server to go do something without reloading the page? Ideally I would be able to have the user click the button, fill out the form, hit ‘go’, have the server do its thing, but never tell the client to reload, and disable the radio button list via JS (only thing that happens visually). That would make my boss, about 11 other companies, and me VERY happy.

Yes, with AJAX.

You can tell your web page what controls need to be updated. It will still perform a typical postback but the page will not “flicker”. Only the controls you specify will be updated.

Here’s an example:

http://www.shawnaugust.com/contact.aspx

I’ve also used my own version of Remote Procedure Calls using invisible IFRAMES to make server calls (no page flicker) and then javascript to return data back to the parent. It’s a bit ugly but it’s pre ajax.

I’ll have to look into that then. I was hoping for some trick that I could do that would tell the client to ignore the server response when I want it to. I guess what I’m really looking for is for the website to send out to the server, but act like it never did anything (then I can use JavaScript to change the control).

EDIT:

After some testing…pulling those loops out has had almost zero affect on how fast the popup loads and closes. It seems like the number of controls on the page is related to how long it takes for the AJAX popup (using a ModalPopupExtender here) to appear and disappear. Am I correct on this?

I listed two methods above.

You are not using AJAX. :slight_smile:

It seems like finding the selected control is about the equiv to posting back to the server and handling the event. Did you use a timer or something to measure how long that takes before the code that executes the popup occurs?

Do you have this public for me to see?

Ok, so I’m not using AJAX. I am using controls found in the AJAX Toolkit though. I did not use a timer, but the difference is easy to see. When I load 1 days worth of data it is near instant, when I load several weeks worth, it sucks.

Here is our dev site: devbox.cteny.com/ContractorPortal Give me 5 minutes to load the most recent version off my machine to it and then take a look.

I’ll PM you a username and password.

At the top select We Care Transportation from the drop down and hit Switch. The page you are looking at is Verify Trips. The page defaults to 1 day of data. Click one of the radio buttons and see what happens. Then change the start date to sometime in September, hit view, wait while the POS dev server sends you the data, then try it again. Feel free to mess with whatever data you want, its all garbage.

Also, the site will be buggy as hell, I uploaded it in the middle of changes.