Passing multiple datas through bootstrap modal

Question

I'm trying to do the same with multiple data, with data-todo attribute, but it doesn't work. Could you help me?

JAVASCRIPT:

$(document).on("click", ".open-EditTodo", function () {
    var todoId = $(this).data('id');
    var todoName = $(this).data('todo');
    $(".modal-body #todoId").val( todoId );
    $(".modal-body $todoName").val( todoName );
});

HTML:

<a href="#editTodoDialog" class="open-EditTodo btn btn-warning" data-toggle="modal" data-id="$todo_id" data-todo="$todo_name">EDIT</a>

<div class="modal fade" tabindex="-1" role="dialog" style="margin-top: 200px;" id="editTodoDialog">
  <div class="modal-dialog" align="center">
    <div class="modal-content" style="width: 350px;">
      <div class="modal-header" align="left">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Edit to-do:</h4>
      </div>
      <div class="modal-body" align="center" style="height: 65px;">
        <form class="form-inline" role="form" method="post" action="todo.php">
          <div class="form-group">
            <input type="text" name="todoName" id="todoName" value="" class="form-control" style="width: 230px;">
            <input type="hidden" name="todoId" id="todoId" value="">
            <button type="submit" class="btn btn-warning"><span class="glyphicon glyphicon-edit"></span> Edit</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

By the way, data-id works just fine, but data-todo doesn't.

Solution 1

You can put those two data items together.

Ex:

<a id="todolink" href="#editTodoDialog" class="open-EditTodo btn btn-warning" data-toggle="modal" data-todo='{"id":12,"todo":"xyz"}'>EDIT</a>

Now you can retrieve the array like this:

var todoId = $('#todolink').data('todo').id;

var todo = $('#todolink').data('todo').todo;

Solution 2

This will work perfectly you have some syntax problem in displaying data.

$(".modal-body $todoName").val( todoName );

here instead of $todoName it will be,

$(".modal-body #todoName").val( todoName );

otherwise, there is no other problem means you can use two different data attribute to pass data.