2015-02-26 3 views
-1

Пожалуйста, посмотрите на код ajax ниже. Как вы можете видеть, мне удалось отобразить кнопку в каждой строке таблицы, и это здорово, проблема заключается в том, что каждая кнопка связывает только ссылку dataurl, Мне действительно нужно сделать так, чтобы каждая кнопка связывалась с другим местом, но только событие все еще доступно. Например. если строка исчезает, мне нужно, чтобы кнопка исчезла? Таким образом, функция Increment не работает.Кнопка Ссылка в таблице ajax

Благодаря Сэм

Херес Аякса код

$.ajax({ 
    type: 'GET', 
    crossDomain: true, 
    dataType: 'json', 
    url: 'api link for seatwave', 
    success: function(json) { 
     //var json = $.parseJSON(data); 
     for (var i = 0; i < json.results.TicketGroups.length; i++) { 
      var section = json.results.TicketGroups[i].TicketTypeName; 
      var no = json.results.TicketGroups[i].Qty; 
      var price = json.results.TicketGroups[i]. 
      Price; 
      var button = 
       "<button class='btn btn-info' data-url='LINK'>Click Here</button>"; 
      $("#tableid").append("<tr><td>seatwave</td><td>" + section + 
       "</td><td>N/A</td><td>N/A</td><td>" + no + 
       "</td><td>£"+price + 
       "</td><td>" + button + "</td></tr>"); 
      $("#tableid").find(".btn.btn-info").click(function() { 
       location.href = $(this).attr("data-url"); 
      }); 
     } 
     sortTable(); 
    }, 
    error: function(error) { 
     console.log(error); 
    } 
}); 
+0

пожалуйста, напишите пример таблицы, созданной после аякса – Banana

+0

Трудно понять, о чем вы спрашиваете. 'ссылка на другое место'? Если строка удалена, почему бы не удалять кнопку, которая находится в строке? Также какова проблема с приростом? – charlietfl

+0

, но если его удалено и автоинкрементция отдельно от вопроса, и указанная строка находится посередине таблицы, все приращение будет испорчено? –

ответ

0

вы выбираете все кнопки каждой итерации цикл;

//this line selects all elements with classes .btn.btn-info 
$("#tableid").find(".btn.btn-info") 

поэтому после его выполнения все ваши кнопки будут иметь ссылку последней созданной кнопки.

было бы проще, если бы вместо линии:

var button = "<button class='btn btn-info' data-url='LINK'>Click Here</button>"; 

вы обертывают кнопку с объектом JQuery, и прикрепить обработчик щелчка к нему:

var button = $("<button class='btn btn-info' data-url='LINK'>Click Here</button>"); 
button.click(function() { 
    location.href = $(this).attr("data-url"); 
}); 

и при добавлении кнопка на йот вы можете сделать это следующим образом:

//this will retrieve the html element from the jquery object 
"</td><td>" + button[0] + "</td></tr>" 
+0

Кнопки не будут иметь ссылку на последнюю созданную кнопку. Предполагая, что его атрибут data-url является фактической ссылкой, событие click должно быть уникальным для каждой кнопки. Каждое событие клика должно иметь доступ к URL-адресу данных отдельного элемента, который был нажат.Можете ли вы опубликовать jsfiddle того, что вы имеете в виду, потому что, глядя на то, что у вас здесь, я не вижу, как это будет работать. –

+0

Извините, я был в Dreamweaver, не обращая внимания на реальный мир, heres js fiddle, его кое-что на том, как я хочу, чтобы он работал, но, очевидно, данные автоматически заполняются, поэтому каждая ссылка должна быть уникальной http://jsfiddle.net/4t5h6nxh/2/ –

0

Я не знаю, если я вас правильно, но я тонкий k вы хотите установить значение вашего атрибута data-url='LINK'.

Например, вы можете установить его сразу в строке, например, так:

var link = isEventAvailable ? json.results.getLink() : undefined; 
var button = link ? "<button class='btn btn-info' data-url='" + link + "Click Here</button>" : return "whatever action"; 

так что приведенные выше проверки, имеется ли событие или нет, если да, вы получите ссылку от куда вы хотите, если не устанавливайте его на фальсифицированное значение, js часто использует для этого undefined. Теперь установите кнопку кнопки на кнопку только в том случае, если ссылка была установлена ​​иначе, чем вы хотите.

Другой маршрут:

var button = "<button class='btn btn-info' data-url='LINK'>Click Here</button>"; 
button.attributes.getNamedItem("data-url").value = link; 

Это неприятная, но достаточно многословен, так что вы можете проверить его в API: Element.attributes NamedNodeMap

А потом увидеть атрибут объекта

Смежные вопросы