Как сделать ссылку с параметрами для Ajax?

Question

[akula22]

Хочу при нажатие на ссылку получить данные из контроллера без обновления страницы, то есть аяксом

<?= Html::a('подробнее', ['/site/default/news', 'id'=>(int)$item->id], [ 
							'class' => 'btn btn-small', 
        					'data' => [ 
        					    'data-method' => 'post',
       						], 
    					]) ?>

<?php
$js = "$('.btn').on('click', function() 
    {
        $.post(
            \"/site/default/news\", {
                id :   тут надо передать айди новости
            },
           
        )
    }
)";
$this->registerJs($js, $this::POS_READY);
?>

Но при нажатие на ссылку меня перекидывает на страницу /site/default/news как сделать чтою страница оставалось той же? и как отправить айди в контроллер

Answer 1

[Евгений Дождиков]

Смотря какая версия Yii.
В 1 версии смотрите на CHtml::ajaxSubmitButton.
Во 2 версии не могу найти подобное, может кто подправит меня.

Но можно подобным способом, что вы написали, только не забудьте отменить действие клика по ссылке, например:

$('.btn').on('click', function(e){
    e.preventDefault();
    /** код */
});

А так же в обработчике укажите, куда грузить контент из ajax:

$.post(
    "/site/default/news",
    {id : /** id новости */},
    function(data){
        $('#content').html(data);
    }
);

Comments

[Евгений Дождиков]

В 1 версии так же есть CHtml::ajaxLink

[akula22]

я на второй работаю

[akula22]

Можно сделать просто input button но как передать ID не знаю

[Евгений Дождиков]

akula22: ID можно передать, считав атрибут, из вашего примера, у вас будет так:
$('.btn').on('click', function(e){
e.preventDefault();
var id = $(this).attr('id');
$.post(
"/site/default/news",
{id : id},
function(data){
$('#content').html(data);
}
);
});

[Евгений Дождиков]

akula22: Но в целом, у вас все есть в самой ссылке (через get-параметр), так что получится еще проще:
$('.btn').on('click', function(e){
e.preventDefault();
var href = $(this).attr('href');
$.post(
href,
function(data){$('#content').html(data)}
);
});

[akula22]

а в контроллере как?

[Евгений Дождиков]

akula22: Не канает Yii::$app->request ? Учи базу.

[akula22]

да не, я в контроллере беру новость по айди, как ее вернуть то? делал всяко и return json_encode($content[1]); не получается, я из виджета шлю в контрллер

[Евгений Дождиков]

akula22: Несколько вариантов: или передаешь через json и на клиенте формируешь DOM, или на контроллере рендеришь вьюху без шаблона. Хотя неоднократно встречал, некоторые рендерят полную версию страницы, и потом выдергивают из нее нужный тебе кусок и ставят куда надо (на сколько помню, в 1 версии именно так и работает виджет грида с постраничной навигацией на ajax).

Я что-то уже совсем запутался.
В контроллере получаешь id, вытаскиваешь AR и пытаешься сделать return json_encode? Как минимум надо отобразить через echo json_encode.

Answer 2

[akula22]

Вот уже вторые сутки бьюсь с этим аяксом, получилось вот что:

Есть блок, который при нажатие на ссылку раскрывается скратким описанием новости, и ниже есть кнопка подробнее.

<td>
				<?= Html::a($item->title, 'javascript:show("newsid", ' . (int)$item->link . ')') ?> 
			</td>
			<tr>
				<td>
					<div style="display:none" id="newsid_<?= (int)$item->link ?>">
						<?= $item->description ?>

						<?= Html::a('подробнее', ['/site/default/footballnews', 'id'=>(int)$item->link], [ 
							'id' => 'link_fnews',
							'class' => 'btn btn-small', 
        					'data' => [ 
        					    'data-method' => 'post',
       						], 
    					]) ?>  
					</div>
				</td>

при нажатие подробнее срабатывает функция JS

<?php
$js = "$('#link_fnews').on('click', function(e) 
    {
    	e.preventDefault();
    	var link = $(this).attr('href');
		var id = link.split('?id=');  //  парсю строку и получаю чистый ID новости

    	$('#link_fnews').html('<i class=\"fa fa-spinner fa-pulse\"></i>');   //  здесь гружу анимацию(loading)
        
        $.post
        (
        	link, 
        	function(data)
        	{

        		$('#link_fnews').html('');  //  убираю анимацию
        		$('#newsid_'+id[1]).append(data)   //  грузим новость в блок с айди новостью
        	}
		);
    }
)";
$this->registerJs($js, $this::POS_READY);
?>

в контроллере я получаю новость по айди и возвращаю ее echo $content;

Если я запрашиваю первую новость, то все хорошо, все как надо, а если любую другую то меня кидает на станицу /site/default/footballnews?id=379255 и там текст новости, почему это происходит? как исправить
и второй вопрос, можно ли оптимизировать мой код?

Comments

[akula22]

в ссылку добавил 'onclick' => 'return false', теперь перехода нет, но и новости не грузит кроме первой

[akula22]

Кажись понял.... осталось с оптимизацией придумать, как то топорно все

[akula22]

Все вопрос решен

[Евгений Дождиков]

akula22: Мда, этот твой пост никто не увидел, кроме тебя.