[jQuery] Re: Adding a table row and a form with jquery?

2008-01-18 Thread dougXN

Okay, I will take a look, but I am some what determined.

So I can do this to replace my first thing:

$('#groups').append(
'trtd class=groupselectLoading.../td' +
'td class=roleselectLoading.../td' +
'td class=requestbuttoninput type=button
value=Request onClick=makeRequest( this.form ); //td' +
'td class=cancelbuttoninput type=button
value=Cancel onClick= //td' +
'td class=nothingnbsp;/td/tr',
);

That seems to create the row correctly, but I also want to do a little
ajaxy thing and replace the two column, groups and roles with a drop
down box. Append doesn't seem to have a call back when complete. That
would be big.

Also, I guess the way that the code is executed, it does not seem to
follow anything orderly besides chaining.

So perhaps the question is how do I wait until the objects are created
then populate them with by drop down boxes?

By the way, thanks for the answers.

cheers
dn


On Jan 17, 8:35 pm, Jack Killpatrick [EMAIL PROTECTED] wrote:
 This doesn't directly address your question, but for rendering out HTML,
 you might want to consider trimpath templates:

 http://code.google.com/p/trimpath/wiki/JavaScriptTemplates

 I use them for all kinds of HTML rendering. Then you can just create
 regular HTML instead of cobbling together DOM nodes. I usually merge my
 data into the template and then bind event handlers to the generated DOM
 nodes via jquery. It's worked nicely for a lot of projects.

 Anyway, a thought. I didn't carefully look at all the code below, but if
 the node creation for your tr is correct, you can append the row to a
 tbody, then append the tbody to a table and append the table to the
 form, I think.

 - Jack

 dougXNwrote:
  Anyone have an idea how one might add a row to a table and have the
  form elements in each column? Something like this:

  var newRow  = document.createElement( 'tr' );
  var groupCell   = document.createElement( 'td' );
  var roleCell= document.createElement( 'td' );
  var requestCell = document.createElement( 'td' );
  var cancelCell  = document.createElement( 'td' );

  var groupSelect = document.createElement( select );
  groupSelect.setAttribute(id, 'group');

  var roleSelect = document.createElement( select );
  roleSelect.setAttribute(id, 'role' );

  // Not sure about this, but it seems that you have to put
  the field
  // into the form then place it on the screen
  groupCell.appendChild( groupSelect );

  roleCell.appendChild( roleSelect );

  var requestButton = document.createElement( Input );
  requestButton.setAttribute( 'type', 'Button' );
  requestButton.setAttribute( 'value', 'Request' );

  requestButton.setAttribute( 'onClick','makeRequest( this.form );');

  requestCell.appendChild( requestButton );

  var cancelButton = document.createElement( Input );
  cancelButton.setAttribute( 'type', 'Button' );
  cancelButton.setAttribute( 'value', 'Cancel' );

  cancelButton.setAttribute( 'onClick','cancelRequest( this.form );');

  cancelCell.appendChild( cancelButton );

  newRow.appendChild( groupCell );
  newRow.appendChild( roleCell );
  newRow.appendChild( requestCell );
  newRow.appendChild( cancelCell );

  $('#groups').append( newRow ); // a little jquery action

  Okay this looks good, but it is not associated with the form in the
  DOM.?

  thanks
  dn


[jQuery] Re: Adding a table row and a form with jquery?

2008-01-17 Thread Jack Killpatrick


This doesn't directly address your question, but for rendering out HTML, 
you might want to consider trimpath templates:


http://code.google.com/p/trimpath/wiki/JavaScriptTemplates

I use them for all kinds of HTML rendering. Then you can just create 
regular HTML instead of cobbling together DOM nodes. I usually merge my 
data into the template and then bind event handlers to the generated DOM 
nodes via jquery. It's worked nicely for a lot of projects.


Anyway, a thought. I didn't carefully look at all the code below, but if 
the node creation for your tr is correct, you can append the row to a 
tbody, then append the tbody to a table and append the table to the 
form, I think.


- Jack

dougXN wrote:

Anyone have an idea how one might add a row to a table and have the
form elements in each column? Something like this:

var newRow  = document.createElement( 'tr' );
var groupCell   = document.createElement( 'td' );
var roleCell= document.createElement( 'td' );
var requestCell = document.createElement( 'td' );
var cancelCell  = document.createElement( 'td' );

var groupSelect = document.createElement( select );
groupSelect.setAttribute(id, 'group');

var roleSelect = document.createElement( select );
roleSelect.setAttribute(id, 'role' );

// Not sure about this, but it seems that you have to put
the field
// into the form then place it on the screen
groupCell.appendChild( groupSelect );

roleCell.appendChild( roleSelect );

var requestButton = document.createElement( Input );
requestButton.setAttribute( 'type', 'Button' );
requestButton.setAttribute( 'value', 'Request' );
 
requestButton.setAttribute( 'onClick','makeRequest( this.form );');


requestCell.appendChild( requestButton );

var cancelButton = document.createElement( Input );
cancelButton.setAttribute( 'type', 'Button' );
cancelButton.setAttribute( 'value', 'Cancel' );
 
cancelButton.setAttribute( 'onClick','cancelRequest( this.form );');


cancelCell.appendChild( cancelButton );

newRow.appendChild( groupCell );
newRow.appendChild( roleCell );
newRow.appendChild( requestCell );
newRow.appendChild( cancelCell );

$('#groups').append( newRow ); // a little jquery action

Okay this looks good, but it is not associated with the form in the
DOM.?

thanks
dn