Call JS within a return string

I'm trying to make a template (a function that returns a string of HTML) that makes a jqGrid in the middle of it. Problem: jqGrid needs an existing element to work but apparently functions in strings run before the string itself is executed(?):

var member_tpl = function(obj){
    return '<div class="meta"> \
        <div class="left"> \
            yada yada \
        </div> \
        <div id="jqGridHerePlease22"></div> \
            '+ createGrid(someObject,"jqGridHerePlease22") +' \
        </div><!-- end class meta --> \
    ';
};

$('.buttonClick').live('click', function(e){
    e.preventDefault();
    writeTemplate('aDialog', member_tpl);
});

The createGrid function of mine works. The problem is trying to use it in a string. Basically, if I wrote an alert with the following code, it would not work as the function in the string gets ran before the string is wrote...I think:

alert($("member_locations22").value)

Pardon me if I've missed the answer somewhere and am making a duplicate question. Suggestions?

Edit: @John Kalberer, here's what's going on in the createGrid function:

var createGrid = function(gridData,div){
    var details = $.extend({ gridData },default_grid_settings);
    var rand = randomNum();
    var pager = 'pager'+rand;
    var str = '<div id="'+pager+'"></div>';

    var grid = $('#'+div).append('<table id="aGrid'+rand+'"></table>'+str).find('#aGrid'+rand); 
    var grid_args = $.extend({pager: '#'+pager},details);
    grid.jqGrid(grid_args);  // grid with pager created here
};

So all createGrid开发者_如何学C does is actually makes the grid.

I think this should work for you. I tried to avoid changing your function signatures. This code hasn't been tested so you may need to attach the element to the dom by changing your member_tpl to pass in a parent element which is already attached. Then instead of returning newGrid in member_tpl, you append it after it is created.

var member_tpl = function (obj) {
    var newGrid = $('<div class="meta"> \
    <div class="left"> \
        yada yada \
    </div> \
    <div id="jqGridHerePlease22"></div> \
    </div><!-- end class meta --> \
    '
    );
    createGrid(someObject, newGrid.find("#jqGridHerePlease22"));
    return newGrid;
};
var createGrid = function(gridData, div){
    var details = $.extend({ gridData },default_grid_settings);
    var rand = randomNum();
    var pager = 'pager'+rand;
    var str = '<div id="'+pager+'"></div>';

    var grid = div.append('<table id="aGrid'+rand+'"></table>'+str).find('#aGrid'+rand); 
    var grid_args = $.extend({pager: '#'+pager},details);
    grid.jqGrid(grid_args);  // grid with pager created here
};

$('.buttonClick').live('click', function (e) {
    e.preventDefault();
    writeTemplate('aDialog', member_tpl);
});

The problem is that you cannot create the grid with the given id if the id doesn't exist in the DOM yet. It seems that if you really want the grid to be part of the template, you'll need to add the HTML to the DOM, insert the grid, and get the innerHTML that you want.

You're actually including the return value of the function in the response, not the function itself. If you want to include the function itself then you need to enclose it in a <script> ... </script> tag and make it a string.

Warning: Depending on the browser and how it is included in the page (document.write or innerHTML) the script may not execute as you intend it to. You may need to, instead, not include the script in the string at all but use a timer or onload event to execute the code after the DOM is ready. Make sure to do testing in all the major browsers.