CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap-3
Sarthak Tuteja
Sarthak Tuteja

Reputation: 137

Jquery for dynamic content

I have a paragraph with some words written in span, which is editable once you click on it.The content would be dynamically called so my current approach is not working. Can you suggest me a solution or a better way to do it? Here is the fiddle: http://jsfiddle.net/9dq2p7dw/109/ Thanks :)

 <h4>Currently working in <span class="editor">xyz*</span><span style= 
"display:none;" class="edit"><input type="text" class="form-control input-
 sm" id="edited" style="width:100px;z-index: 100;background: white;display: 
  inline;"></span><button type="submit" id="submit" class="edit" 
  style="display: none;">save</button>


      for past <span>0-5 years*</span>.Studied Graduation from <span>ABC.</span>, 12th from <span>jnnj</span> with <span>80%</span>, 10th from <span>Bkbjkjnk</span> with <span>80%</span></h4>

and here is the jquery for it.

$(document).ready(function(){
    $('.bizcontent').click(function(){
      $('#myModal2').modal('toggle');

    });

    $(".editor").click(function(){
      $(".edit").show();
      $(".editor").hide();
      var edit = $("#edited").val();



    });

    $("#submit").click(function(){
      var edit = $("#edited").val();
      var ans = confirm("Update your input as "+ edit + " ?");

      if (ans== true) {

      $(".edit").hide();
      $(".editor").replaceWith("<span class='editor'>" + edit + "</span>");
      $(".editor").show();

    }

    else{
      $(".editor").show();
      $(".edit").hide();
    }


    });
});

Upvotes: 0

Views: 91

Answers (3)

arc
arc

Reputation: 4691

I would solve it in the following manner.

$(document).ready(function() {

  // how the input and the text should be displayed
  // {{text}} is replaced with the text
  var template = {
    input: '<edit><input type="text" class="form-control input-sm" style="width:100px;display:inline;" value="{{text}}" orig="{{text}}"/><button type="submit" class="edit">save</button></span>',
    text: '<span>{{text}}</edit>'
  }

  // for when you click on the span
  $("#theText").on('click', 'span', function() {
    var span = $(this)
    span.replaceWith(template.input.replace(/{{text}}/g, span.text()))
  })

  // when you click the button
  $("#theText").on('click', 'button', function() {
    var edit = $(this).parent()
    var newValue = edit.find('input').val()
    var origValue = edit.find('input').attr('orig')

    var value = confirm("Update your input as " + newValue + " ?") ? newValue : origValue

    edit.replaceWith(template.text.replace(/{{text}}/g, value))

  })

})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4 id="theText">Currently working in 
  
  <span>xyz*</span>for past <span>0-5 years*</span>.Studied Graduation from <span>ABC.</span>, 12th from <span>jnnj</span> with <span>80%</span>, 10th from <span>Bkbjkjnk</span> with <span>80%</span>

</h4>

Upvotes: 2

baj9032
baj9032

Reputation: 2592

your problem is solved u can see in snippet.


$(document).ready(function() {
    $('.bizcontent').click(function() {
      $('#myModal2').modal('toggle');
    });


    $(document).on('click', '.editor', function() {
      $(".edit").show();
      $(".editor").hide();
      var edit = $("#edited").val();
    });

    $('#submit').on('click', function() {
      var edit = $("#edited").val();
      var ans = confirm("Update your input as " + edit + " ?");
      if (ans == true) {
        $(".edit").hide();
        $(".editor").replaceWith("<span class='editor'>" + edit + "</span>");
        $(".editor").show();

      } else {
        $(".editor").show();
        $(".edit").hide();
      }
    });
  });
.hide {
  display: none;
}

.show {
  display: block
}

span {
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4>Currently working in <span class="editor">xyz*</span><span style= "display:none;" class="edit"><input type="text" class="form-control input-sm" id="edited" style="width:100px;z-index: 100;background: white;display: inline;"></span><button type="submit" id="submit" class="edit" style="display: none;">save</button>


          for past <span>0-5 years*</span>.Studied Graduation from <span>ABC.</span>, 12th from <span>jnnj</span> with <span>80%</span>, 10th from <span>Bkbjkjnk</span> with <span>80%</span></h4>

Upvotes: 1

YakuZa
YakuZa

Reputation: 526

Your problem was that .editor once clicked and edited, was later not clickable, right?

The solution for that is:

 $("body").on('click', '.editor', function(){
      $(".edit").show();
      alert("hi");
      $(".editor").hide();
      var edit = $("#edited").val();
  });

Note: $("body").on('click', '.editor', ....);

Upvotes: 0

Related Questions