CODEWITHSUNDEEP
jquerycontenteditable
mark5
mark5

Reputation: 563

Editable content script

I'm trying to do something similar to a linkedin profile page where users can edit information instantly. Is there any better way to write this script? I'm thinking to use this for all editable items on the same page. Basically what it does so far is to hide the preview field & show the form where users can edit information & save it.

$('.editable-field .edit-info').click(function(){
  $(this).parents().eq(1).find('.view-text').removeClass('show').addClass('hide')
  $(this).parents().eq(1).find('.edit-text').removeClass('hide').addClass('show');
});

$('.cta-btn .cancel').click(function(){
  $(this).parents().eq(1).removeClass('show').addClass('hide');
  $(this).parents().eq(2).find('.view-text').removeClass('hide').addClass('show');
});

$('.cta-btn .save').click(function() {
  //save value here
  $(this).parents().eq(1).removeClass('show').addClass('hide');
  $(this).parents().eq(2).find('.view-text').removeClass('hide').addClass('show');
});

HTML structure

<div class="editable-field">
  <a class="edit-info">Edit</a>
  <div class="view-text">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
    <div class="month">August</div>
  </div>

  <div class="edit-text hide">
    <form class="text-field">
      <textarea>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</textarea>
      <select id="month" name="month"/ >
        <option>Jan</option>       
      </select>

    </form>

    <div class="cta-btn">
      <button class="save">Save Changes</button>
      <button class="cancel">Cancel</button>
    </div>
  </div>  

</div>

Upvotes: 0

Views: 51

Answers (1)

John C
John C

Reputation: 3112

You could use .parents('.editable-field'), .siblings and toggle to shorten it to the below. .toggle() will hide a visible element and show a hidden one one. If that is all your show and hide classes do I would recommend using that instead. -

$('.editable-field .edit-info').click(function() {
  edit($(this));
});

$('.cta-btn .cancel').click(function() {
  edit($(this));
});

$('.cta-btn .save').click(function() {
  //save value here
  $('.view-text p').text($('.edit-text textarea').val());
  edit($(this));
});

function edit($this) {
  $this.parents('.editable-field').find('.view-text').toggle()
    .siblings('.edit-text').toggle();
}
.show {
  display: block;
}
.hide {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="editable-field">
  <a class="edit-info">Edit</a>
  <div class="view-text">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
    <div class="month">August</div>
  </div>

  <div class="edit-text hide">
    <form class="text-field">
      <textarea>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</textarea>
      <select id="month" name="month" />
      <option>Jan</option>
      </select>

    </form>

    <div class="cta-btn">
      <button class="save">Save Changes</button>
      <button class="cancel">Cancel</button>
    </div>
  </div>

</div>

Upvotes: 1

Related Questions