Data attributes html code

[dendic]

I have this html code:
<a data-id="test" title ="Add this item" class="open-AddBookDialog btn btn-primary" href="#addBookDialog">test</a> which opens a modal and passes data is passed from the parent to th modal. It works fine but I need the data passed to be the input from a textbox.

The script:
$(document).on("click", ".open-AddBookDialog", function (e) {
e.preventDefault();
var _self = $(this);
var myBookId = _self.data('id');
$("#bookId").val(myBookId);
$(_self.attr('href')).modal('show');
});

It takes the value of data-id and displays on my modal.
I need to make data-id receive a variable or an input from a text box.

 

[jpadie]

<div>
 <input type="text" name="myText" id="myText"/>
 <button id="myText_save">Save</button>
</div>
<script>
$('#myText_save').on('click', function(e){
  e.preventDefault();
  $('someReference').data('id', $('#myText').val());
});

if you need to do it inside the modal then:
1. store the calling element in a variable somewhere
2. interrupt the modal dialog's close event and write the value of the text box to the data-id attribute of the calling element (that is stored in the variable).

 

[dendic]

here is what I have but can't seem to get to work.
$(function() {
$('#btnLaunch').click(function() {
var myBookId = $(this).data('id' $('#myText').val());
$('#myModal.appttext').data('myBookId').dialog('open');

});

myText is the input box on my parent. appttext is the text box on my modal.
I wan to pass the data from myText to appttext

 

[jpadie]

the format of the command is

//to set a data attribute
$('#myElement').data('dataAttribute', 'dataValue');
//to retrieve a data attribute
var d = $('#myElement').data('dataAttribute');

so (still guessing at what you are trying to achieve) ...

$(document).ready(function(){
 $('#btnLaunch').on('click', function(e){
   e.preventDefault();
   $(this).data('id', $('#myText').val()); //assigns content of myText to the data-id attribute of the button
   $('#myModal .appttext').data('myBookId', $('#myText'.val()); //assigns content of myText to the data-id attribute of all elements with a class of appttext as a ancestor of the element with an id of myModal
   $('#myModal').dialog('open');
 });
});

note that this does not lock the two values together. it merely duplicates/copies the values at a point in time. If you want the reverse logic also to happen then you must either attach an onchange event to the .appttext elements or interrupt the dialog close routine with a callback.