jQuery Grid Plugin - jqGrid

Yes sir, there is a matter of fact a nice problem ; I had my grid working nicely, with 4 cells on each row,  2 contain regular data and 2 contain  a html string which is essentially an embedded flash audioplayer (wordpress - the old one ) so it has like a song title , artist name, and 2 audition mp3s which can be listened to for each song. . so the whole page is full of these embedded flash objects  (the html is like this:)

 <object type=application/x-shockwave-flash data=http://www.mysite.net/audio/player.swf id=audioplayer1 height=16 width=175><param name=movie value=mysite.net/audio/player.swf /><param name=FlashVars value=playerID=1&amp;soundFile=http://www.mysite.net/audio/JCIN-alone_B_no_bell.mp3 /><param name=quality value=high /><param name=menu value=false /><param name=wmode value=transparent /><object/>

I get it from a asp.net webservice called from javascript, and it returns a good array
 of 'song' objects ( I have a simple song class(.cs) defined), and somehow asp.net 
does all the JSON stuff , so I caught a break there.   So you can see my grid code
below (next) i already have the data so I define data :local,  or clientside .  I still 
don't get whether or not I should put  a fake url or not?   Ok heres the code ( I 
didn't use document.ready, so please don't send me packing back to the drawing
board just yet, because I don't want the grid to show on page load.  anyways here
 it is:

    function OnComplete(result) {

         if (result != null) {

             jQuery("#list2").jqGrid({
                 datatype: "local",      
                 height: "400",

                 colNames: ['Title', 'Artist', 'Auditionplayer', 'Editorplayer'],
                 colModel: [
    { name: 'title', index: 'title', width: 175 },
     { name: 'artist', index: 'artist', width: 175 },
      { name: 'auditionurl', index: 'auditionurl', width: 175, align: "left" },
       { name: 'editauditionurl', index: 'editauditionurl', width: 175, align: "left" }
     ],
                viewrecords: true,
                caption: "SongList"

             });
             jQuery("#list2").clearGridData();
                    var _songs = result;
             
                    for (var i = 0; i <= _songs.length; i++) {
                        jQuery("#list2").addRowData(i + 1, _songs[i]);         
                 
            }}}
 //-----------------------------------------------------------------------------------------------        
//       the javascript that returns the array from the web service is this:
//           
//       ret = Songservice.GetSongData(OnComplete, OnError, OnTimeOut);
//------------------------------------------------------------------------------------------------

Ok so here's the problem; It works great in FF and Safari, ((If I have the right 
version of adobe flash ))  {there are at least 2 versions, and you need the firefox, safari
version installed to have it working fine in FF, etc.  but there is also a IE version ( you can see
this one coming )   DOESN"T Work in IE 7 and 8.  So After about 3 days of trying 
to find out what somebody else already figured out ((don't you hate that?)) microsoft
is changing the way IE handles an embedded flash object.  so, now instead of the html 
string (above) there is a javascript function that will do it, and supposedlyif the content 
is an external javascript file, the whole embedded flash thing doesn't bother IE and it 
MIGHT ? work, so I tried it on the page and it works, but I need to dynamically load 
2 of these for every song in a list, and the script changes with each row of data, pointing
to another ,mp3 file, and naming the audioplayer, #1, 2, 3, ... etc. 

So the thing I would like to do , is to pass in this code:
-----------------------------------------------------------------------------

 <p id="audioplayer_1">Alternative content</p>  
         <script type="text/javascript">  
               AudioPlayer.embed("audioplayer_1", {soundFile: "http://yoursite.com/path/to/mp3_file.mp3"});  
         </script>  

<p id="audioplayer_2">Alternative content</p>  
         <script type="text/javascript">  
             AudioPlayer.embed("audioplayer_2", {soundFile: "http://yoursite.com/path/to/mp3_file_2.mp3"});  
         </script>
----------------------------------------------------------------------------------------------------
 for the last 2 cells on each row 
( you can see how this has to be altered for each script.) And supposedly everyone using 
an embedded flash player will come to terms with this !##$ for IE 7 and 8 (and the upgrades
to 6 have it too )!$@##$.  Hopefully it will work then like the flash player experts say it will.  
So my questions to the javascript guru dude  (that may be you apparently), are these:

• 1.) should I attempt to pass this in as a string like I did with the html?

• 2.) should I try to create a div tag for the cell or use the existing naming and do a document.write or force an append child to get the data in there?

• I'm pretty sure  getDocumentById("area").innerHTML won't work for this. it doesn't.

• 3.) I was trying a setCell for each row, but this is kinda messy and it didn't really like it

• 4.) should I write a different type of jqgrid method for IE only?

I know this is not the fault of the grid, but I promise when I get this thing working right
I will post a full example for the users of this site, because I had to go through a lot just  
  i e; reading 'how to uninstall and reinstall flash player' (wasted lots of time. ) to find out that microsoft is changing a couple of things in IE 6 update, forward.  
And read alll 80 pages of the HELP forum before finding out it is really an IE problem and 
the solution is to have the embedded flash object in a javascript file (I read external, but if
the code has <script>,...... </script > tags in the grid, that would be the same as an external 
js call, right?

I have so much to learn about javascript, and I hate to waste it on IE and cross browser issues, 
i am willing to share this information here when it works, because someone will definitely want to 
have an audioplayer, and I have looked at other sites with it, it doesn't work right on lots of peoples 
published sites (they didn't check it I guess , or gave up )  I know the key is to use the javascript to 
call the embedded flash player, 
 Any suggestions:?

thanks.  

p.s. Tony,  thanks for all your work on this plug in,  it's very useful. and your documentation
 is very good. Is there a way we can rate the HELP forum, or further break it down?  because it takes a bit 
of effort to read through 80 pages.  I think all this kind of MS and IE incompatibility issues should be posted in HUGE
letters on the home page of microsoft.com.  Maybe they're trying to get IE to be more compatible with 
Vista>?   ( giggling )   Is it going to be like this all through javascript and jquery with the IE issues?

p.s.s., is there open source for the button in this editor that says insert/edit embedded media  ?? I'd love to see it


the sickest -  
 ericnickus@roadrunner.com

Thanks for your reply;  I am getting closer !   I tried to pass in this to the grid for one cell .... If I just put this code on the page by itself, it shows a nice audioplayer with a volume button and play button and works.  .   .  

Try to put it in a cell of the grid and I get this error

ob.toString is not a function

http://localhost:1947/WebSite3.....ase-min.js
Line 9

I'm going to try the div thing right now

yeah , that was it.  The only way it can work that I know of .. Thanks dude.