I change text via javascript and it's not reflected when I View Source 3

[mellomel70]

Hi - I'm working in ASP.Net 2.0. My page has a GridView control, which is populated by a SQLDataSource. The GridView has one Button control per row. The button has a client-side javascript function (ShowDelete) attached to its OnClientClick event on DataBinding of the GridView. This event fires some javascript. The javascript does 3 things:
- It changes the text of the button from "Hide" to "Create"
- It changes the background color of the button from red to green
- It assigns a new onClientClick event to the button: "ShowAvailable"

The text and the color of the button change with no problem. After I change the OnClientClick event, I send an alert with the button's OnClientClick event and it reports it to be "ShowAvailable". However, when I click on the button, it doesn't fire ShowAvailable, it fires the original onClientClick event (ShowDelete). Also, when I do View Source, it shows the button's text, color and OnClientClick event as their original settings, i.e., "Hidden", "Red" and "ShowDelete", even though I'm looking at a green button that says "Create." What's going on here?

Here's the code I use to attach the OnClientClick event on DataBinding of the GridView:

foreach (GridViewRow row in this.gvLocation.Rows)
{
  if (row.RowType == DataControlRowType.DataRow || row.RowType == DataControlRowType.EmptyDataRow)
  {
    int rowindex = row.RowIndex + 1; //to exclude the header which is counted as a row when we get to javascript
    btnAction.OnClientClick = "ShowDelete(" + rowindex.ToString() + "); return false";
  }
}
[\code]

Here's the javascript for ShowDelete:

[code]
function ShowDelete(rowindex)
{
  var locationgridID = '<%= gvLocation.ClientID %>';
  locationgrid = document.getElementById(locationgridID);
  if (locationgrid != null)
  {
    action_cell = locationgrid.rows[rowindex].cells[3];
    for (k = 0; k < action_cell.childNodes.length; k++)
    {
      if (typeof(action_cell.childNodes[k].id) == 'string')
      {
        action_cell.childNodes[k].value = "Create";
        action_cell.childNodes[k].style.backgroundColor = "Green";
        action_cell.childNodes[k].onclientclick = "ShowAvailable(" + rowindex + "); return false";
        alert(action_cell.childNodes[k].onclientclick); // reports the OnClientClick event is ShowAvailable
      }
    }
  }
}
[\code]

Any thoughts are greatly appreciated!

 

[feherke]

Hi

I change text via javascript and it's not reflected when I View Source

That is the normal behavior and as far as I know, every browser behaves like that.

In FireFox the Web Developer extension has a command View Generated Source, which will show what you are expecting.


Feherke.

http://free.rootshell.be/~feherke/

 

[BillyRayPreachersSon]

I change text via javascript and it's not reflected when I View Source

You might be changing the DOM, but you're not changing the source, are you?

Therefore, if you inspect the DOM, your changes will be present, but viewing the source, they will not be.

Remember - the source != the current state of the DOM. The source == what was delivered to the browser.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Snippets & Info:

http://www.codecouch.com/

The Out Atheism Campaign

 

[mellomel70]

OK, good to know. How do I query the DOM? I need to do further processing based on the text currently showing in the fields. Plus, how do I get my button to actually call the ShowAvailable function instead of its original ShowDelete function?

Thanks!

 

[mellomel70]

Let me also be more specific - when I say I need to query the values in the various cells of the GridView, I need to do this in the .Net code-behind file, using C#. So my code is like this:

if (cellStatus.Text == "Hidden")
{ do something }

I realize this isn't a .Net or C# forum, but I'm hoping there's a way in javascript to make these textual changes so that .Net will see them. Any ideas?

 

[BillyRayPreachersSon]

You'd either need to add form elements (whether hidden or otherwise) that corresponded to every cell, or some sort of serialisation of the data in one form field, and then submit that.

Or do some sort of funky AJAX send whenever a cell changes (but that goes back to my previous point - how do you change the data).

Dan




Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Snippets & Info:

http://www.codecouch.com/

The Out Atheism Campaign

 

[vacunita]

OnClientClick is an ASP only shortcut. Its meaningless in Javascript to change it. You need to change the actual onClick event if you are doing it through JS, and not the OnClientClick.
Because ultimately what gets triggered when you press the button is the onClick Event.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[mellomel70]

Ah! I didn't know that about OnClientClick. Good to know for the future. Just for the record, I solved my problem by a) using a hidden field to store the info I needed to pass back to the server and b) combining my two functions into one that had different behavior based on the value of the button. But knowing the OnClientClick/OnClick dichotomy would've saved me that last step (I think). I'll keep it in mind for next time, thanks!