Как передать данные JSON в качестве параметров в функцию JavaScript при добавлении данных в div?

Question

Как передать данные JSON в качестве параметров в функцию JavaScript при добавлении данных в div?

0

jQuery + JavaScript + Rails 4

prefix = "onward_"

json_data = {"367278": 
               {"bus_schedules": 
                  { "id": 367278,
                    "origin_id": 134,
                    "destination_id": 506
                  },
                "drop_points": null,
                "board_points": null,
                "operator_name": "ABC"
                }
             }

json_data1 = JSON.stringify(json_data);

html = '<a href="#" id="'+prefix+'active_travel_filter_'+
       operator_ids[i]
       +'"onclick="removeTravelFilter('
       +'\''+prefix+'\''+',\'travels\''+',\''
       +json_data1+'\',\''+json_data1+'\')" 

   value="'+operator_ids[i]+'">'
           +getOperatorName[operator_ids[i]]+'</a>'

console.log(html);

$("#active_fiters_blk").append(html);

Вывод //console.log

<a href="#" id="onward_active_travel_filter_90" onclick="removeTravelFilter('onward_','travels','{"367278":{"bus_schedules":{"id":367278,"origin_id":134,"destination_id":506},"drop_points":null,"board_points":null,"operator_name":"ABC"}}','{"367278":{"bus_schedules":{"id":367278,"origin_id":134,"destination_id":506},"drop_points":null,"board_points":null,"operator_name":"ABC"}}')" value="90">ABC</a>

Но при добавлении в div я получаю этот формат, но он должен быть выше формата.

<a value="33" group)"}}')"="" group)"}}','{"367278":{"bus_schedules":{"id":367278,"origin_id":134,"destination_id":506},"drop_points":null,"board_points":null,"operator_name":"sre="" booking(ananth="" 367278":{"bus_schedules":{"id":367278,"origin_id":134,"destination_id":506},"drop_points":null,"board_points":null,"operator_name":"sre="" onclick="removeTravelFilter('onward_','travels','{" id="onward_active_travel_filter_33" href="#">ABC</a>

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

user3410226 13 май 2014, в 09:36

Источник

0

Почему вы хотите / должны хранить его как атрибут данных? Это обычно для передачи данных с сервера.
cookie monster 13 май 2014, в 07:00
0

Мне нужно передать полную json_data в другую функцию JS там я буду проверять вещи.
user3410226 13 май 2014, в 07:02
0

Не используйте встроенные обработчики событий и не создавайте свой пользовательский интерфейс со строками HTML. Создайте правильные элементы DOM и используйте JavaScript для привязки обработчика событий. Тогда вам даже не нужно конвертировать данные в JSON. Ваш текущий подход только усложнит внесение изменений в дальнейшем. Чтобы узнать больше об обработчиках событий, см. Quirksmode.org/js/introevents.html . Чтобы узнать больше о DOM: quirksmode.org/dom/intro.html . А поскольку вы используете jQuery, вы, вероятно, также выиграете от прочтения учебника по jQuery: learn.jquery.com .
Felix Kling 13 май 2014, в 07:21

Показать ещё 1 комментарий

Теги:

javascript

jquery

ruby-on-rails-4

2 ответа

0

Я бы сохранил словарь, связывающий имена идентификаторов привязки с соответствующими json-данными.

window.dataCache = {
   "onward_active_travel_filter_90": {...},
   ...
}

Как только элемент будет нажат, я выберу требуемый объект json.

$('a').click(function(){
   var id = this.id;
   var jsd = dataCache[id];
   //pass to target function
   foo(jsd);
});

Теперь, если якорь добавлен немного поздно в страницу dom, мне придется позаботиться о том, чтобы привязать обработчики событий соответствующим образом.

В jquery мы можем просто работать с обработчиком .on().

Объяснение:

Ну, мы обычно делаем что-то вроде $('element').click(function(){...}); , Обычно это выполняется в событии jquery dom ready:

$(function(){
    $('element').click(function(){...});
});

Расширение кода в событии dom dom выполняется после того, как DOM готов к использованию jquery. Следовательно, событие click будет привязано к любому element который существует в DOM в этот момент времени.

Любое последующее добавление element в веб-страницу обработчик события клика не привязается к нему.

Но нам нужна такая функциональность!

Следовательно, мы должны вручную позаботиться об этом. Смысл создания element связать обработчик события соответствующим образом, а затем добавить его в DOM.

Альтернативой этому является метод jQuery .on(). Однако он функционирует иначе, чем описано выше. Он прослушивает событие click, которое "пузырится" на целевом контейнере.

Пожалуйста, прочитайте документы .on() чтобы получить лучшую идею.

deostroll 13 май 2014, в 04:49

0

Я новичок в Javascript и JQuery вы можете уточнить, пожалуйста.
user3410226 13 май 2014, в 07:03
0

Вы не объяснили, как эти данные JSON входят в картину ...
deostroll 13 май 2014, в 07:04
0

Эти json_data получены из предыдущей функции js. там это идет от rails view.html.erb по <% = raw json_data.to_json%> ..... правильно.
user3410226 13 май 2014, в 07:07
0

Итак, этот фрагмент кода, который вы написали, находится в цикле for? Когда это называется?
deostroll 13 май 2014, в 07:10
0

Да, точно.....
user3410226 13 май 2014, в 07:12
0

обновленный ответ.
deostroll 13 май 2014, в 07:24
0

Да, я попробовал эту функцию .on, но вы знаете, что я добавляю ссылку, когда я нажимаю на ссылку, она всегда принимает последний идентификатор .... но я хочу событие onclick для каждой ссылки .... право
user3410226 13 май 2014, в 07:36
0

Здравствуй. Что это за переменная operator_ids ?
deostroll 14 май 2014, в 04:21

Показать ещё 6 комментариев

Ещё вопросы

Почему вы хотите / должны хранить его как атрибут данных? Это обычно для передачи данных с сервера.
Мне нужно передать полную json_data в другую функцию JS там я буду проверять вещи.
Не используйте встроенные обработчики событий и не создавайте свой пользовательский интерфейс со строками HTML. Создайте правильные элементы DOM и используйте JavaScript для привязки обработчика событий. Тогда вам даже не нужно конвертировать данные в JSON. Ваш текущий подход только усложнит внесение изменений в дальнейшем. Чтобы узнать больше об обработчиках событий, см. Quirksmode.org/js/introevents.html . Чтобы узнать больше о DOM: quirksmode.org/dom/intro.html . А поскольку вы используете jQuery, вы, вероятно, также выиграете от прочтения учебника по jQuery: learn.jquery.com .
Я новичок в Javascript и JQuery вы можете уточнить, пожалуйста.
Вы не объяснили, как эти данные JSON входят в картину ...
Эти json_data получены из предыдущей функции js. там это идет от rails view.html.erb по <% = raw json_data.to_json%> ..... правильно.
Итак, этот фрагмент кода, который вы написали, находится в цикле for? Когда это называется?
Да, я попробовал эту функцию .on, но вы знаете, что я добавляю ссылку, когда я нажимаю на ссылку, она всегда принимает последний идентификатор .... но я хочу событие onclick для каждой ссылки .... право
Здравствуй. Что это за переменная operator_ids ?

Cerbrus · Accepted Answer · 2014-05-13T05-05-00.000Z

HTML, который вы пытаетесь вставить, - это строка:

<a href="#" id="onward_active_travel_filter_0" onclick="removeTravelFilter('onward_','travels','{"367278":{"bus_schedules":{"id":367278,"origin_id":134,"destination_id":506},"drop_points":null,"board_points":null,"operator_name":"SRE Booking(Ananth Group)"}}','{"367278":{"bus_schedules":{"id":367278,"origin_id":134,"destination_id":506},"drop_points":null,"board_points":null,"operator_name":"SRE Booking(Ananth Group)"}}')" value="0">0</a>

Когда вы поместите это в DOM, ваш браузер будет смущен параметрами части onclick: onclick="removeTravelFilter('onward_','travels','{" Последняя цитата (") будет интерпретироваться как конец параметра onclick.

Если вы переключаете кавычки в свой JavaScript следующим образом:

html = "<a href='#' id='"+prefix+"active_travel_filter_"+operator_ids[i]+"' onclick='removeTravelFilter("+"\""+prefix+"\""+",\"travels\""+","+json_data1+","+json_data1+")' value='"+operator_ids[i]+"'>"+getOperatorName[operator_ids[i]]+"</a>"

Тогда вы должны быть в порядке:

<a href='#' id='onward_active_travel_filter_0' onclick='removeTravelFilter("onward_","travels",{"367278":{"bus_schedules":{"id":367278,"origin_id":134,"destination_id":506},"drop_points":null,"board_points":null,"operator_name":"SRE Booking(Ananth Group)"}},{"367278":{"bus_schedules":{"id":367278,"origin_id":134,"destination_id":506},"drop_points":null,"board_points":null,"operator_name":"SRE Booking(Ananth Group)"}})' value='0'>0</a>

Я не говорю, что это лучший способ передать эти параметры вашей функции, но он работает.

Синтаксическая ошибка: отсутствует) после появления списка аргументов .... ... moveTravelFilter ("вперед _", "путешествия", "{" 367278 ": {" bus_schedules ": {" id ": 367278," o ...
@ user3410226: О, похоже, я допустил небольшую ошибку в коде, можешь попробовать еще раз? Я отредактировал код моего ответа.
Да, это работает, но вы говорите о наилучшей практике ... можете ли вы сказать мне лучшую практику для этого
@ user3410226: Рекомендуется хранить json в переменной JavaScript и ссылаться на эту переменную в вызове функции, например: onclick='removeTravelFilter("onward_", "travels", myJson, myJson)