Adding to div with jQuery & HTML

Question

So I'm having some issues with my code. I'm trying to remove a link (a) and then after that add a new link (a) with different text.

Here's the code

HTML:

<label for="name" class="control-label">Username:</label> 
@<a href="<?php echo $username ?>">
    <p class="text-info-username">
        <?php echo strtolower($username) ?><i class="icon-star"></i></a></p>
<div class="controls-username">
    <a href='#' id="edit-username" class="btn"><i class="fa fa-pencil"></i> Edit</a>
</div>

Script:

$('#edit-username').click(function() {
 var text = $('.text-info-username').text();
 var input = $('<input type="text" placeholder="' + text + '" id="editTextBox" />')

 $('.text-info-username').text('').append(input);
 $('#edit-username').remove();
 $('<a href='#' id="update" class="btn">Update</a>').appendTo('.controls-username');
 $('<br /><br />').insertAfter('.controls-username');

});

The typical implementation of this would be to have both links in the HTML and .hide()/.show() them with jQuery so only one shows up at a time. — Manuel Arwed Schmidt
– Manuel Arwed Schmidt, Commented Feb 21, 2015 at 8:48
Shouldn't you be using the .html method instead of the .text to append html? — Rob Tillie
– Rob Tillie, Commented Feb 21, 2015 at 8:50

winhowes · Accepted Answer · 2015-02-21 08:49:41Z

3

I think you had an issue with your quotations. Here's a revised version of your JS:

$('#edit-username').click(function() {
 var text = $('.text-info-username').text();
 var input = $('<input type="text" placeholder="' + text + '" id="editTextBox" />');

 $('.text-info-username').text('').append(input);
 $('#edit-username').remove();
 $('<a href="#" id="update" class="btn">Update</a>').appendTo('.controls-username');
 $('<br /><br />').insertAfter('.controls-username');

});

Also a jsFiddle: http://jsfiddle.net/qhcf39oo/

answered Feb 21, 2015 at 8:49

winhowes

8,1255 gold badges31 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Manuel Arwed Schmidt Over a year ago

Missing semicolon in line 3

Chris Over a year ago

Yeah, I just noticed it myself as well. Thanks for your response!

Manuel Arwed Schmidt · Accepted Answer · 2015-02-21 09:22:20Z

Multiple concerns:

Your HTML element nesting is wrong with the first -Tag.
Your missing a semicolon in javascript after the definition of input.
Fiddling with the html from javascript is not really good. Its harder to debug later on and not necessary. Use an approach of already delivering the html with the initial pageload and use css/javascript to hide and unhide (show) them appropriately.

I've made an quick jsFiddle for you:

$('#button-edit-username').click(function() {

  // Hide the user list
  $('.text-info-username').hide();

  // Show a form with pre-filled contents
  var text = $('.text-info-username').text();
  $('#editTextBox').attr('placeholder', text);
  $('#editForm').show();

  // Swap the visible link
  $('#button-edit-username').hide();
  $('#button-update').show();

});

$('#button-update').click(function() {

  // Hide the form again
  $('#editForm').hide();

  // Show the user list again
  $('.text-info-username').show();

  // Swap the visible link
  $('#button-update').hide();
  $('#button-edit-username').show();


  // Report success.. implement save function here
  var newName = $('#editTextBox').val();
  alert('Successfully edited .. '+ newName +' !');    

});

You can see the full example at https://jsfiddle.net/8xhwugvu/, showing such an approach.

JSFiddle

Collectives™ on Stack Overflow

Adding to div with jQuery & HTML

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related