Вызов JS в возвращаемой строке

Question

Я пытаюсь создать шаблон (функцию, которая возвращает строку HTML), которая делает jqGrid в середине. Проблема: jqGrid нужен существующий элемент для работы, но, очевидно, функции в строках выполняются до того, как будет выполнена сама строка (?):

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);
});

Моя функция createGrid работает. Проблема в том, чтобы попытаться использовать его в строке. По сути, если бы я написал предупреждение со следующим кодом, это не сработало бы, поскольку функция в строке запускалась до того, как была записана строка ... Я думаю:

alert($("member_locations22").value)

Простите, если я где-то пропустил ответ и задаю повторяющийся вопрос. Предложения?

Редактировать: @ Джон Калберер, вот что происходит в функции createGrid:

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
};

Таким образом, все, что создает createGrid, фактически создает сетку.

Answer 1

Вы фактически включаете возвращаемое значение функции в ответ, а не саму функцию. Если вы хотите включить саму функцию, вам нужно заключить ее в тег <script> ... </script> и сделать ее строкой.

Внимание: В зависимости от браузера и способа его добавления на страницу (document.write или innerHTML) сценарий может не выполняться так, как вы намереваетесь. Вместо этого вам может потребоваться вообще не включать скрипт в строку, а использовать таймер или событие onload для выполнения кода после того, как DOM будет готов. Обязательно проведите тестирование во всех основных браузерах.

Answer 2

Я думаю, это должно сработать для вас. Я старался не менять сигнатуры ваших функций. Этот код не был протестирован, поэтому вам может понадобиться прикрепить элемент к dom, изменив ваш member_tpl для передачи родительского элемента, который уже присоединен. Затем вместо возврата newGrid в member_tpl вы добавляете его после его создания.

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);
});

Answer 3

Проблема в том, что вы не можете создать сетку с заданным идентификатором, если идентификатор еще не существует в DOM.Похоже, что если вы действительно хотите, чтобы сетка была частью шаблона, вам нужно добавить HTML-код в DOM, вставить сетку и получить требуемый innerHTML.