A couple questions regarding Jquery

[Michael Hubele]

Hi

I have a gridview(an asp.net control that gets rendered as a table). In this control I have some course names that of course represent of course. The user at any time can change these names at anytime. All they have to do is use the drop downlist box and choose the course they want and hit edit.

This will pull up the stuff on this course including course name. The user can proceed to change the course name and then clicks the save button. On save I want all the course names in the gridview to update to this new name(there are a couple other things that might need to be updated but should be similar once I know how to change the name).

So what I did was on page_load(when the gridview is getting loaded up) I would just put a empty CSS class name on each of these courses. So if the course was named "Comp101" then the CSS class would be called "Comp101".

So now my thought is if they have the same name then I can use the value in the drop down list box since it would be called Comp101. Now the problem is I don't know how to do a selection based on using a variable.

I tried this

var hold = $(#ddl option:selected').val();

$(hold).html("this is a test");

and

$('.' + hold).html("this is a test");

So neither of them has worked so not sure what to try next.

Then of course I would remove the old .CSS class name and append the new on it.


My second question.

Is how do I bind stuff after page load? Like I will be adding rows to this gridview though javascript and each row will have a checkbox and when checked it will do stuff. So these new checkboxes won't get the checked binding stuff that happens on pageload. So I am not sure really how to bind it after page load.

Thanks

[Bear Bibeault]

Michael Hubele wrote:$('.' + hold).html("this is a test");

If the '.'+hold equates to a string that specifies the class selector, there is no difference between computing it this way or hard-coding it. If it's not working, then something else is a at work.

Is how do I bind stuff after page load? Like I will be adding rows to this gridview though javascript and each row will have a checkbox and when checked it will do stuff. So these new checkboxes won't get the checked binding stuff that happens on pageload. So I am not sure really how to bind it after page load.

You can bind anything in code that runs as a result of any event. but I'm not sure I see why binding can't be done at document-ready time. If the DOM element exists at page load, it can be bound.

You might also be interested in the .live() method added to jQuery 1.3 or the LiveQuery plugin.

[Michael Hubele]

Bear Bibeault wrote:

Michael Hubele wrote:$('.' + hold).html("this is a test");

If the '.'+hold equates to a string that specifies the class selector, there is no difference between computing it this way or hard-coding it. If it's not working, then something else is a at work.

Is how do I bind stuff after page load? Like I will be adding rows to this gridview though javascript and each row will have a checkbox and when checked it will do stuff. So these new checkboxes won't get the checked binding stuff that happens on pageload. So I am not sure really how to bind it after page load.

You can bind anything in code that runs as a result of any event. but I'm not sure I see why binding can't be done at document-ready time. If the DOM element exists at page load, it can be bound.

You might also be interested in the .live() method added to jQuery 1.3 or the LiveQuery plugin.

Ya you where right something was wrong and I think it was the dam caching. I don't know if it is firefox or asp.net or what but for some reason my javascript takes forever to get updated. I make a change and 5 load ups later it still have not changed with the new changes. I usually have to clear my cache(sometimes multiple times) and shutdown the asp.net development server. Just to make sure that I get the newest stuff.

So I am not sure if that happens to you or not. I am trying to narrow it down to asp.net or firefox or if it is something totally different.


I think I was not clear with what i wrote or I don't understand your response.

What is happening is this. The gridview/table is getting populated by a database and if there are 10 rows then 10 checkboxes will be made. On document ready I will bind the checked option to these 10 checkboxes. However the user can add more rows to this gridview. Now what happens is this new row is sent by jquery ajax to the database and saved. If the user where to hit refresh right after that the gridview would be regenerated on page refresh and that new checkbox would be binded(so all 11 would not be binded).

However of course I don't want to the page to refresh each time and hence why I used ajax to send the data to the database. However since the gridview is a server side control in order to remake it you need to refresh the page or you would need to use the ajax.net update panel what basically refreshes the whole page but suppresses everything expect that control being regenerated.

I am not too crazy about the ajax.net(love alot of other things about the language) and it can conflict with jquery and scripts need to be rebound because of it. So I much prefer to just use jquery for my ajax.

So this left me with the problem how do I show the new row? So what I am basically going to do is add all the stuff by making a table row(through jquery, html) and inserting it as the last row in the gridview to the user.

Now I am going to add a checkbox to this row and since it did not exist on document-ready it would have never been binded but it needs to be binded.

[Bear Bibeault]

Yeah, that's where .live() and LiveQuery come in. They can bind things after-the-fact. Check them out!