jquery-mobile：无法在对话框中更改输入值

Question

I'm having trouble dinamicaly setting the value of textboxes on a dialog opened by a listview item with JQueryMobile.

I can change the value, verified by alert before and after, but the value displayed doesn't change.

The concept is a listview displaying the items of a shopping list. If the user clicks one of the items a dialog should be displayed with a form for editing the product information.

I started by setting the href to the dialog page, and binding to the onclick event. The problem was that the event ran before the page loaded so no items where available.

Next I opened the dialog programaticaly on the "onclick" event.

I can change the value, but the change isn't displayed.

Relevant Snippets are bellow.

Thanks in advance for any help.

Best Regards

Joao

<ul data-role="listview" data-inset="true" data-split-theme="b" data-split-icon="star" id="shopping_list_listview" style="margin-bottom:0px"> 
<li>
     <a data-rel="dialog" data-transition="pop" href="#" onClick="loadData($(this))">
        <span class="product_name truncate" SAMPLE product</span>
     </a>
</li>

function loadData(obj)
        {

          $.mobile.changePage('product_dialog.html','pop',false,true) 

          var name = obj.find("span.product_name").text();

          alert ($("#popup-product-name").val());

          $("#popup-product-name").val(name);

          alert ($("#popup-product-name").val());

        }

Answer 1

Do it this way, here is an example.

Working Demo

Markup

<!-- Page -->
<div data-role="page" id="p1">
 <p>Click on the text box to open dialog</p>
 <input type="text" id="two" /> <a data-role="button" href="#" id="btn">Move data to dialog</a>
</div>
<!-- /Page -->

<!-- Dialog -->
<div data-role="page" data-rel="dialog" id="dialog" data-theme="c" data-close-btn="right">
 <div data-role="header" data-position="fixed" data-theme="b">
  <h1>New values added!</h1>
 </div>

 <ul data-role="listview" id="list">
  <li><a href="#">old value</a>
  </li>
  <li><a href="#">some value</a>
  </li>
  <li><a href="#">text</a>
  </li>
 </ul>
</div>
<!-- /Dialog -->

Code

$(document).on('click', 'a#btn', function () {
 var value = $("#two").val();
 $.mobile.changePage("#dialog", {
    role: "dialog"
 });
 $('#list').find('a').text(value);
});