はここレイアウト

Question

に新しいHTMLコードを適用することは、私は、レイアウト内の特定の領域の背後にあるHTMLコードを表示するボタンを作成しました私のCodepenlink

です。

クラスを変更したり、IDを追加したりするなど、テキストエリアのコードを編集したいときは、新しいHTMLコードを領域に戻すためにsubmitを押しますが、それはうまくいかず、レイアウト純粋なHTMLコードにも変更してください。

ページをリロードせずに新しいHTMLコードをレイアウトに戻すことができるかどうかわかりません。フォームを適用し、AJAXを使用することを考えていますが、これまでどのように使用するかはまだ分かりません。

Answer 1

これを試してください：

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

Answer 2

問題では、すでにあなたは何をしなければならないことは、どこかのローカルストレージやデータベースにマークアップを保存し、ページをリロード

かあるので、それを変更しようとしている時間によって、ページをロードしたあります...

ページマークアップの特定の部分でのみ変更を許可している場合は、jqueryを使用して変更を適用できます。あなたはしかし、あなたは間違った方法を使用している、このようにそれを行うには正しい軌道に乗っているよう

//apply new html to layout 
$(".btn-primary").click(function() { 
    var htmlcode = $("#codeContainer").text(); 
    $(".example-form form").text(htmlcode); 
}); 

の

あなたのjqueryのが見えます。これに

変更を：

//apply new html to layout 
$(".btn-primary").click(function() { 
    var htmlcode = $("#codeContainer").text(); 
    $(".example-form form").html(htmlcode); 
});