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

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

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

首先：创建一个名为openDialog（）的JS方法，此方法可以将对话框的上下文作为参数，或者它可能只需要记录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");
}

然后在每个＆＃34;显示＆＃34;中调用此方法你有按钮

<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>

然后，当您创建行的新入口时，您可以专门查看每个ID并确定显示的内容

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

Answer 3

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

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

<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>

静态或通过AJAX定义每行所需的内容

 var order1 = {
     field1: 'Spicy Sandwich',
     field2: 'Sandwich Only Lettuce'
 };

 var order2 = {
     field1: 'Epic Pizza',
     field2: 'Pizza Without Pinneaple'
 };

 var orders = [order1, order2];

编辑代码以填充对话框

$(".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");
});

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

3 个答案: