Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.06.2015, 14:13
Аватар для Neiro
Новичок на форуме
Отправить личное сообщение для Neiro Посмотреть профиль Найти все сообщения от Neiro
 
Регистрация: 19.06.2015
Сообщений: 2

Передача параметров из ссылок при их циклической генерации
Есть такой код на станице HTML (применяется Razor):

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.PetName)
        </td>
        <td>
            <a href="#" id="linkCarInfo" data-num=@item.Id>Описание</a>
        </td>
    </tr>
}
, генерируются ссылки для описания авто, которое должно выводиться на странице ниже в отдельном блоке div:
<div id="carInfo"></div>
.

Для получения описания авто необходимо вызвать скрипт что-то вроде этого:
$(document).ready(function () {
    $("#linkCarInfo").click(function () {
        var id = $(this).data("num");
        Car.getCarInfo(id);
    });
});

Car = {
    getCarInfo: function (id) {
        $.ajax({
            dataType: "Json",
            contentType: "application/json; charset=utf-8",
            asynch: false,
            url: "/Home/CarInfo/" + id,
            success: function (output, status, xhr) {
                var car = eval(output);
                Car.viewCarInfo(car);
            },
            error: function (error) {
                alert("Error: " + error);
            }
        });
    },

    viewCarInfo: function (car) {
        var result = "Модель: " + car.model + "<br/>";
        result += "Максимальная скорость: " + car.maxSpeed + "<br/>";
        result += "Разгон до 100 км/ч за" + car.acceleration + " сек<br/>";
        
        document.getElementById("carInfo").innerHTML = result;
    }
}


В итоге работает только при нажатии на первую ссылку. При нажатии на последующие ноль реакции. Изучаю ASP.net MVC и по JQuery знаний пока мало (как и по JS) .

Сам(и) вопрос(ы):
Как правильно делать обработку таких ссылок или как их генерировать, чтоб потом под один обработчик запихнуть и считывать там только ID. Конечно интересно решение ненавязчивого JS, без подвески аттрибута onclick или вызова функции JS в ссылке.
Ответить с цитированием
  #2 (permalink)  
Старый 19.06.2015, 22:15
Аватар для dd_smol
Кандидат Javascript-наук
Отправить личное сообщение для dd_smol Посмотреть профиль Найти все сообщения от dd_smol
 
Регистрация: 08.03.2015
Сообщений: 131

id – на страницы должен быть уникальным. Судя же по вашему коду, приведённому выше, он выводится несколько раз в цикле, а jQuery обработчик события назначает только одному вывод id заменить на class назначить обработчик события через метод each.
@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.PetName)
        </td>
        <td>
            <a href="#" class="linkCarInfo" data-num=@item.Id>Описание</a>
        </td>
    </tr>
}


$(document).ready(function () {
    $(".linkCarInfo").each(function() {
		$(this).click(function () {
			Car.getCarInfo($(this).data("num"));
		});	
	});
});
Ответить с цитированием
  #3 (permalink)  
Старый 19.06.2015, 22:50
Аватар для dd_smol
Кандидат Javascript-наук
Отправить личное сообщение для dd_smol Посмотреть профиль Найти все сообщения от dd_smol
 
Регистрация: 08.03.2015
Сообщений: 131

Так на мой взгляд более симпатично смотрится.
jQuery(function($) {
	var getCarInfo = function(id) {
		if ( !id ) return;
		$.getJSON('/Home/CarInfo/' + id, function(data) {
			$('#carInfo').html(
				"Модель: " + data.model + "<br/>" +
				"Максимальная скорость: " + data.maxSpeed + "<br/>" +
				"Разгон до 100 км/ч за" + data.acceleration + " сек<br/>"
			);
		});
	};
	
	$('.linkCarInfo').each(function() {
		$(this).click(function() {
			getCarInfo( $(this).data('num') );
		});
	});
});
Ответить с цитированием
  #4 (permalink)  
Старый 23.06.2015, 11:24
Аватар для Neiro
Новичок на форуме
Отправить личное сообщение для Neiro Посмотреть профиль Найти все сообщения от Neiro
 
Регистрация: 19.06.2015
Сообщений: 2

Спасибо. Заработало
Догадывался, то что из-за уникальности id на странице не работает, но как исправить не знал
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Передача значений нескольких параметров из js в php TomTykver AJAX и COMET 2 13.05.2015 22:19
Передача нескольких параметров JS tenatin Общие вопросы Javascript 8 06.03.2014 16:37
Передача параметров из одного фрейма в другой Игорь12345 Events/DOM/Window 15 17.06.2009 15:48
не работает вперед/назад при передаче параметров странице hoid Я не знаю javascript 10 03.06.2009 16:09
JQuery передача параметров в callback Cepin jQuery 8 08.05.2009 21:19