Applying jquery style to dynamically created buttons

Question

I am new to uI programming. I am using Jqgrid in my application. I am having one column which displays button in each row , created using formatter option. In function described in formatter option I am binding a click event for the button. Below is the code

        { label: 'Depatment Name', name: 'deptName', width: 100,
              formatter:actionButtonFormatter
        },

      function actionButtonFormatter ( cellvalue, options, rowObject )
       {
          var element ='<div id="deptNmBtn"><button onClick=getDepartMentNm("' + rowObject.empName+'")> <span>Add</span></button></div>';
          $("button, input:submit, input:button", this).button();
          return element;
       }

I am facing two problems here.

1) Jquery theme is not getting applied to the button , in Department Name column which was added using formatter option. Where I want only this button to get applied with Jquery theme so I tried

         $("button, input:submit, input:button", this).button();
         $("button, input:submit, input:button", jqgrid_table_id).button();  
         $("button, input:submit, input:button", deptNmBtn).button(); //div id

But none of them worked and the button in the column is not getting applied with Jquery theme.

2) In onclick I am passing a parameter of employeeName which is value of the row. It works well if the employee name doesn't contain any spaces. If the employee name contains spaces it throws me

        SyntaxError: unterminated string literal

taken from firebug. Have anyone faced these issues. Please help me out. And also please help in understaing the difference between

        var element = '<div> ....'

and

        var element = $('<div> ....')

I know the second one is jquery syntax but whats the exact difference. Thanks a lot.

Answer 1

Add these classes

ui-button ui-widget ui-state-default ui-corner-all

On hover add ui-state-highlight .

Answer 2

Not sure I can cover all the bases here...

1) I don't recall the jQuery UI method for adding the styles. But I never do this anyhow. Find out which classes need to be a part of your element, and add them during the button creation. So instead of making a button and then calling .button() on it, you would make it something as "<button class="someclass otherclass">Button</button>" where the classes are filled with those needed for the jQuery theme.

2) You probably shouldn't be using onclick inline anyhow, but that's another discussion. In the meantime, it's quite simple: the first one is a string, which could eventually end up being used by some JavaScript method (in jQuery, something like .append() ) to attach a new node to the DOM. The second one creates the node object, but it still needs to be attached to the DOM with... something like .append() . ;-) Under the hood, there's a difference. But for most purposes it doesn't matter TOO much.