每行 Jquery Modal/Dialog 表单的不同文本

Question

如何更改 jdialog 消息中每一行的文本？ 如您所见，在 Order Details 列的每一行中都有一个 Show 按钮。 我希望每一行都有不同的文本。 我尝试更改名称值，并且我还在每个 td 元素中放入了按钮的代码，但它仍然不起作用。

正文的具体代码：

<div id="dialog-form" title="Order Details">
  <p class="validateTips">Spicy Sandwitch</p>
  <p class="validateTips">More</p>
  <form>
    <fieldset>
      <label for="name">More Comments</label>
      <p class="validateTips">Sandwitch only lettuce</p>
      <!-- Allow form submission with keyboard without duplicating the dialog button -->
      <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
    </fieldset>
  </form>
</div>
<div id="users-contain" class="ui-widget"

完整代码here

Answer 1

为了使对话框的内容从记录变为另一个

您没有解释如何加载自定义内容？但我会指导你如何自定义每条记录的对话内容。

首先：创建一个JS方法叫openDialog()，这个方法可以把对话框的上下文作为参数，也可以只取记录ID，通过AJAX什么的加载内容

function openDialog(content="", record_id=0)
{
 if(content.length > 0) // if you're passing content as a paramter
    dialog.html(content);
 if(record_id!=0) // if you're passing the record ID as a paramter
 {
    // load content via ajax or something
    dialog.html("loaded content via AJAX for user number "+record_id);
 }
 dialog.dialog("open");
}

然后在您拥有的每个“显示”按钮中调用此方法

<button id="create-user-1" onclick="openDialog('Hello User #1');">New Show</button>
<button id="create-user-2" onclick="openDialog('',2);">New Show</button>

更新实际上您的完整代码有点混乱，但根据您的要求，我尝试将我的解决方案应用于您的小提琴代码，这是我的工作示例 https://jsfiddle.net/doaa_magdy_55/qtvw75z6/20/#&togetherjs=jSCLnBoUen

Answer 2

atm 中出现的文本在您的 html 中是硬编码的

<p class="validateTips">Spicy Sandwitch</p>

除非您使用 javascript 更改它，否则无论您创建多少次新文本，“Spicy sandwitch”都将始终保持不变。我并没有真正阅读您的所有代码，因为它太大了，但是您可以做这样的事情来单独处理您的每个条目（将它们归因于 id）

<div id="dialog-form" title="Order Details">
  <p id="something1.0" class="validateTips">Spicy Sandwitch</p>
  <p id="something1.5" class="validateTips">More</p>
  <form>
    <fieldset>
      <label id="something2.0" for="name">More Comments</label>
      <p id="something3.0" class="validateTips">Sandwitch only lettuce</p>
      <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
    </fieldset>

然后，当您创建 row 的新入口时，您可以专门转到每个 id 并决定显示什么

$('#something1.0').text('new Spicy sandwitch');
$('#something2.0').text('moreeee'); 

Answer 3

对您的代码进行以下更改：

1. 使用引用定义对话框内的元素以保存动态内容

   <div id="dialog-form" title="Order Details">
        <p class="validateTips field1"></p>
        <p class="validateTips">More</p>
           <form>
               <fieldset>
                   <label for="name">More Comments</label>
                   <p class="validateTips field2"></p>
                   <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
               </fieldset>
           </form>
   </div>
   

2. 为每一行定义你想要的内容，静态或通过 AJAX

    var order1 = {
        field1: 'Spicy Sandwich',
        field2: 'Sandwich Only Lettuce'
    };
   
    var order2 = {
        field1: 'Epic Pizza',
        field2: 'Pizza Without Pinneaple'
    };
   
    var orders = [order1, order2];
   

3. 编辑代码以填充对话框

   $(".showDialog").button().on("click", function() {
       var row = $(this).closest('tr').index();
       $('#dialog-form .field1').html(orders[row].field1);
       $('#dialog-form .field2').html(orders[row].field2);
       dialog.dialog("open");
   });