Как передать javascript var в ajax remoteFunction?

Question

У меня есть вид, где у меня 3 деления:

Div 1: список брендов с флажками. Div 2: список категорий с флажками.

Div 3: Список предметов.

Этот последний div будет обновлен всеми элементами в соответствии с тем, что выбрано в первых двух div. Сначала отображаются все элементы, после того как мы выбрали некоторые бренды и / или категории и нажали кнопку «Обновить», я хочу обновить div 3.

В Javascript я могу узнать, какие категории / бренды выбраны, и мое самое большое сомнение в том, как обновить последний div ...

Вот что я пытался:

function refresh() {
var brands= /*<code where i get all the brands selected (this will be a js array)>*/
var categories = /*<code where i get all the categories selected (this will be a js array)>*/
<?php echo $ajax->remoteFunction(array('url' => array('controller' => 'items', 
                                                      'action' => 'men', brands, categories),
                                                      'update' => 'itemsContent')); ?>
}

Мои проблемы: Я могу передать jars в метод php? Получить массив JS в CakePHP действий? Потому что бренды и категории будут использоваться для фильтрации запроса, дающего результаты для div 3 ...

Answer 1

Здесь вы не сможете использовать помощник $ajax, поскольку он просто выводит статический скрипт, который нельзя изменить / повлиять во время выполнения в браузере. Он просто не был создан для чего-то более сложного, чем сейчас.

Итак, вам придется катать свой собственный JS, который не должен быть таким сложным. Все, что вам нужно, это:

1. действие Cake, которое выводит список элементов на основе полученных данных (не должно быть сложным)
2. немного JS, который определяет, какие бренды и категории выбраны (какие у вас уже есть)
3. еще один бит JS, который упаковывает эти данные и отправляет их в действие Cake
4. еще один бит JS, который обновляет сайт списком предметов, которые вы получили обратно

Я бы взглянул на AJAX-функции jQuery для достижения # 3. Если вы отправляете данные в таком формате, это очень легко доступно в $this->data в Cake:

{
    'data[ModelName][categories]' : categories,
    'data[ModelName][brands]'     : brands
}

По вашему вопросу:

«Как передать js-переменные в метод php?»

Вы не делаете. PHP работает на сервере и уже завершен к тому времени, когда Javascript запускается в браузере. Единственное «общение» между JS и PHP - через стандартные запросы HTTP GET и POST, и там не имеет значения, поступает ли запрос от стандартного браузера или JS или Flash или чего-то еще.

У помощника $ajax есть только несколько готовых фрагментов Javascript, которые он может поместить на вашу страницу, но ваш JS никак не сможет "общаться" с помощником $ajax.

Answer 2

У меня был сценарий, похожий на ваш, и я нашел несколько методов для Javascript , которые применимы. Я использовал codeBlock(), чтобы обернуть кусок javascript, и event(), чтобы связать событие click, но я не уверен, насколько это понятнее, чем просто писать необработанный Javascript.

Я обнаружил, что раздел AJAX руководства CakePHP действительно полезен для получения базовой настройки. Затем я взял сгенерированный Javascript и сделал его более динамичным.

В этом примере я вызываю действие add_topic всякий раз, когда пользователь нажимает на ссылку. Каждый раз, когда он вызывается, я увеличиваю переменную topicIndex и передаю ее в качестве параметра в вызове AJAX. Вызов AJAX возвращает несколько строк, вставленных в таблицу над ссылкой, по которой щелкнул пользователь.

        <tr id="add_topic_row"><td colspan="3">
            <a id="add_topic_link" href="javascript:void(0);">New Topic 
                <?php echo $html->image('icons/add32.png');?></a></td></tr>
        </table>
    </fieldset>
<?php 
    echo $form->end('Submit');
    $addTopicUrl = $html->url(array('action' => 'add_topic')) . '/';
    $script = <<<EOS
var topicIndex = $index;
var addTopicUrl = '$addTopicUrl';
addTopic = function()
{
    new Ajax.Updater(
        'add_topic_row', 
        addTopicUrl + topicIndex, 
        {
            asynchronous:true, 
            evalScripts:true, 
            insertion:Insertion.Before, 
            requestHeaders:['X-Update', 'add_topic']
        });
    topicIndex++; 
}
EOS;
    echo $javascript->codeBlock($script);
    echo $javascript->event('add_topic_link', 'click', 'addTopic();')
?>