將新的HTML代碼應用到佈局中

Question

這裏是我的Codepenlink

我創建了一個按鈕來顯示佈局中某個區域後面的html代碼。

而當我想編輯textarea中的代碼，例如更改類或添加更多的id ...然後我按提交將新的HTML代碼更新回該區域，但它不起作用，佈局也變成純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); 
});