如何传递和获取模态值

How to pass and get modal value

本文关键字:模态 获取 何传递      更新时间:2023-09-26

首先,我的引导模式如下:

<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog"> 
      <div class="modal-content">
         <-- modal
                  header -->
         <div class="modal-body">
            <form class="form-horizontal" id="composeForm" method="POST" action="composeMessage">
              <div class="form-group">
               <label class="col-sm-2 control-label">To</label>
                <div class="col-sm-8">
                  <input type="text" class="form-control" id="sendToId" name="requestId">
                </div>
              </div>
            <div class="line line-dashed b-b line-lg pull-in"></div>
               <div class="form-group">
                 <label class="col-sm-2 control-label">Message</label>
                 <div class="col-sm-8">
                   <div class="btn-toolbar m-b-sm btn-editor" 
                                    data-role="editor-toolbar" data-target="#editor"></div>
                   <div id="editor" class="form-control" style="overflow:scroll;
                               height:150px;max-height:150px" contenteditable="true"></div>
                   <textarea style="display:none" id="divText" name="message"></textarea>
                 </div>
                </div>
            </form>
          </div>
           <div class="modal-footer">
            <button type="button" id="sendSave" class="btn btn-primary">Save changes</button>
           </div>
       </div>
    </div>
</div>

到目前为止,我的Javascript是这样的:

$(function(){
var message;
 $("#myModal").on('show.bs.modal', function(event){
     var atag = $(event.relatedTarget);   //I'm using a tag to open modal
     var userNick = atag.data("nick");
     var userComp = atag.data("comp");
     var modal = $(this);
     /*
      skipped all dynamically setting values & changing attributes of tags
      */
    document.getElementById("divText").value = document.getElementById("editor").innerHTML;
    message = document.getElementById("divText").value;
 });
     $("button.btn.btn-primary").on('click', function(){
         alert(message);
     });
 });

首先,我在同一个JSP中有foreach循环,打开模态的锚标记就在其中。所以我有多个锚标记。

锚标签打开模式如下:

<a href="#myModal" data-target="#myModal" data-toggle="modal" 
                    data-nick="${f.recomUserNick}" data-comp="${f.compatibility}">  

我设法动态地设置值和更改属性,现在我正试图将数据从模态发送到控制器(SpringMVC)。

然而,我在获取"消息"时遇到了问题。在模态中,客户端写一些东西,我首先想获得它的字符串值,然后检查警报,看看以后是否可以将其发送到控制器。结果是,当我第一次打开模态,在其中写一些东西,然后单击按钮(在模态页脚中,id="sendSave")时,我无法获得消息。我关闭模态,再次打开它——在消息区,它有我写的内容。我单击按钮,然后在警报窗口中看到我的消息。

首先,当我重新打开模态时,我不想看到我以前写的东西,我想第一次得到字符串值,而不必再次打开模态。我在获取字符串值时没有问题,所以我认为问题在于我把代码放在哪里,所以我把代码转移了几个小时,但没有成功。你能告诉我该如何修复我的代码吗?提前谢谢。

您在$("#myModal").on('show.bs.modal'中设置了'message'变量。此时(在第一个节目中)消息还没有被键入。

如果您将该代码移动到click处理程序,它会在您键入消息后接收消息

 $("button.btn.btn-primary").on('click', function() {
    document.getElementById("divText").value = document.getElementById("editor").innerHTML;
    message = document.getElementById("divText").value;
    alert(message);
  });