将新的HTML代码应用到布局中 [英] Apply new HTML code into the layout

问题描述

这是我的 Codepen link

我已经创建了一个按钮来显示布局中特定区域后面的html代码。

当我想编辑textarea中的代码，例如更改类或添加更多id ...然后我按提交将新的HTML代码更新回该区域，但它不起作用，并且布局更改为纯HTML代码也是。

所以我不知道是否有可能在不重新加载页面的情况下将新的HTML代码提交回布局，我正考虑应用表单并使用AJAX，但到目前为止还是不知道如何使用它。 $ b

解决方案

$ b

//生成html $（document）.on（'click'，' .btn-success'，function（）{var target = $（'。example-form'）。find（'form'）; $（'。bs-example-modal-lg'）。on（'shown.bs.modal'，function（e）{var htmlString = $（target）.html（）; $（＃codeContainer）.val （htmlString）;}）;}）; //将新的HTML应用于布局$（body）on（'click'，.modal.bs-example-modal-lg .btn-primary，function（） {var htmlcode = $（＃codeContainer）。val（）; $（。example-form form）。html（htmlcode）;}）;

< pre-class =snippet-code-css lang-css prettyprint-override> .btn-html {margin：10px 0;}。example-form {padding：10px; border：1px solid＃343434;}

< link href =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css =stylesheet/>< script src =https://ajax.googleapis.com/ ajax / libs / jquery / 1.11.1 / jquery.min.js>< / script>< script src =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min .js>< / script>< div class =container> < div class =row> < div class =col-md-12> < div class =btn-html> < button class =btn btn-successdata-toggle =modaldata-target =＃myModal>显示HTML< / button> < / DIV> < div class =example-form> <形式> < div class =form-group> < label for =exampleInputEmail1>电子邮件地址< / label> < input type =emailclass =form-controlid =exampleInputEmail1placeholder =Email> < / DIV> < div class =form-group> < label for =exampleInputPassword1>密码< / label> < input type =passwordclass =form-controlid =exampleInputPassword1placeholder =Password> < / DIV> < div class =form-group> < label for =exampleInputFile>文件输入< / label> < input type =fileid =exampleInputFile> < p class =help-block>在此示例块级帮助文本。< / p> < / DIV> < div class =checkbox> <标签> <输入类型=复选框>检查我出去< / label> < / DIV> < button type =submitclass =btn btn-default>提交< / button> < /形式> < / DIV> < / DIV> < / div><！ - Modal - >< div class =modal fade bs-example-modal-lgid =myModaltabindex = - 1role =对话框aria-labelledby =myModalLabel> < div class =modal-dialogrole =document> < div class =modal-content> < div class =modal-header> < button type =buttonclass =closedata-dismiss =modalaria-label =Close>< span aria-hidden =true>& times;< / span> < /按钮> < h4 class =modal-titleid =myModalLabel>在布局后显示HTML代码< / h4> < / DIV> < div class =modal-body> < textarea id =codeContainerrows =25style =width：100％;>< / textarea> < / DIV> < div class =modal-footer> < button type =buttonclass =btn btn-defaultdata-dismiss =modal>关闭< /按钮> < button type =buttonclass =btn btn-primarydata-dismiss =modalaria-label =关闭>保存更改< /按钮> < / DIV> < / DIV> < / div>< / div>

Here is my Codepenlink

I've created a button to show the html code behind a certain area in the layout.

And when I want to edit the code in the textarea such as change the class or add more id... then I press submit to update the new HTML code back into the area but it didn't work and the layout change into a pure HTML code also.

So I don't know if it possible to submit new HTML code back into the layout without reload the page, I'm thinking about apply a form and using AJAX but so far still have no idea how to use it.

解决方案

Please try this:

//generate html
$(document).on('click', '.btn-success', function() {
  var target = $('.example-form').find('form');
  $('.bs-example-modal-lg').on('shown.bs.modal', function(e) {
    var htmlString = $(target).html();
    $("#codeContainer").val(htmlString);
  });
});

//apply new html to layout
$("body").on('click', ".modal.bs-example-modal-lg .btn-primary", function() {
  var htmlcode = $("#codeContainer").val();
  $(".example-form form").html(htmlcode);
});

.btn-html {
  margin: 10px 0;
}

.example-form {
  padding: 10px;
  border: 1px solid #343434;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="btn-html">
        <button class="btn btn-success" data-toggle="modal" data-target="#myModal">Show HTML</button>
      </div>
      <div class="example-form">
        <form>
          <div class="form-group">
            <label for="exampleInputEmail1">Email address</label>
            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
          </div>
          <div class="form-group">
            <label for="exampleInputPassword1">Password</label>
            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
          </div>
          <div class="form-group">
            <label for="exampleInputFile">File input</label>
            <input type="file" id="exampleInputFile">
            <p class="help-block">Example block-level help text here.</p>
          </div>
          <div class="checkbox">
            <label>
              <input type="checkbox"> Check me out
            </label>
          </div>
          <button type="submit" class="btn btn-default">Submit</button>
        </form>
      </div>
    </div>
  </div>
</div>

<!-- Modal -->
<div class="modal fade bs-example-modal-lg" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Show HTML code behind layout</h4>
      </div>
      <div class="modal-body">
        <textarea id="codeContainer" rows="25" style="width: 100%;"></textarea>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" data-dismiss="modal" aria-label="Close">Save changes</button>
      </div>
    </div>
  </div>
</div>

这篇关于将新的HTML代码应用到布局中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！