CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Shin
Shin

Reputation: 41

Apply new HTML code into the layout

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.

Upvotes: 1

Views: 72

Answers (2)

Hemant Kumar
Hemant Kumar

Reputation: 367

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>

Upvotes: 1

Ortund
Ortund

Reputation: 8245

The problem is you've already loaded the page by the time you're trying to change it so what you have to do is save the markup to local storage or a database somewhere and reload the page

or...

If you're only allowing changes within a certain portion of your page markup, you could use jquery to apply the changes.

Your jquery of 

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

looks like you're on the right track to do it this way, however, you're using the wrong method.

Change it to this:

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

Upvotes: 0

Related Questions