CODEWITHSUNDEEP
jqueryhtml
Tom
Tom

Reputation: 1618

Dynamically change text

Is it possible to dynamically change the ordering in this HTML ?

<li><a href="#step-4">
  <label class="stepNumber">4</label>
  <span class="stepDesc">
     Finish<br />
     <small>LAST STEP</small>
  </span>                   
</a></li>

I have a button with id 'finish' that when clicked will submit some data via ajax. Once this is done, I'd like to change the above words:

Finish should become finished LAST STEP should be come completed.

Any way I can do this ?

Thanks

$('#finish').click(function() {

});

Upvotes: 9

Views: 2173

Answers (7)

Sameer Shaikh
Sameer Shaikh

Reputation: 7814

$('#finish').click(function() {
  $('.stepNumber .stepDesc').html('Finished<br/><small>completed</small>');
});

Hope this works..

Upvotes: 2

Dipesh Rana
Dipesh Rana

Reputation: 367

$('#finish').click(function() {
$('.stepDesc').html('Finished<br /><small>COMPLETED</small>')
});

Upvotes: 1

Joel Almeida
Joel Almeida

Reputation: 8037

Try this:

$(document).ready(function() {
   $('#finish').on('click',function(event) {
       $('.stepDesc')[0].innerHTML = 'Finished<br /><small>COMPLETED</small>'
   });
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li><a href="#step-4">
  <label class="stepNumber">4</label>
  <span class="stepDesc">
     Finish<br />
     <small>LAST STEP</small>
  </span>                   
</a></li>

<button id="finish">Finish</button>

And just for future reference. If it's only to change text use text() instead of innerHTML due to performance. So probably any other answer here using text() is better in performance compared to mine, but I'll let mine stay here for diversity.

Upvotes: 4

Pedro Lobito
Pedro Lobito

Reputation: 98901

I guess you can use:

$("#finish").click(function() {
 $("#step").text("COMPLETED");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="finish"> Finish </button>
<li><a href="#step-4">
  <label class="stepNumber">4</label>
  <span class="stepDesc">
     Finish<br />
     <small id="step">LAST STEP</small>
  </span>                   
  </a></li>

Upvotes: 3

Guruprasad J Rao
Guruprasad J Rao

Reputation: 29683

Your ajax success would be as below:

$('#finish').click(function() {
    $.ajax({
         ...
         ...
         success:function(data)
         {
             $('span.stepDesc').text('Finished');
             $('span.stepDesc small').text('Completed');

         }
     });
});

Upvotes: 11

Vel
Vel

Reputation: 9331

Are you trying this?

$('#finish').click(function() {
   $('.stepDesc small').text('Completed')
});

Upvotes: 1

Sougata Bose
Sougata Bose

Reputation: 31749

Change the text to finished and then append the small tag.This would help - 

$('#finish').click(function() {
   $('span.stepDesc').text('Finished').append('<br><small>Completed</small>');
});

Upvotes: 2

Related Questions