Update fb-like-box onclick with jquery

Question

I want to update the facebook like box from the form input. After a check button is clicked. The new like box will appear in the div.

HTML

<input type="text" class="form-control" placeholder="facebook Page URL" 
id="fbURL" value="cnn">             

<button class="btn btn-primary" type="button" id="fbChk">check</button>

Javascript

$('#fbPage').append('<div id="fb-like" class="fb-like-box" 
data-href="http://www.facebook.com/RTnews" 
data-width="500" data-show-faces="true" 
data-stream="false" data-header="true"></div>');

    $("#fbChk").click(function() {
        var fbURL = $("#fbURL").val(); 
        $('#fbPage').html('<div id="fb-like" class="fb-like-box" 
         data-href="http://www.facebook.com/'+fbURL+'" 
         data-width="500" data-show-faces="true" 
         data-stream="false" data-header="true"></div>');
      });

When I run this script. Old facebox disappear without a new on show.

try pasting the `browser console` output, that will help diagnose the problem! — Arjun, Oct 10 '16 at 04:27

score 0 · Answer 1 · answered Oct 10 '16 at 04:30

0

This could easily be done with a frontend framework like react or so, but in jQuery I see two choices, when you click on the button $.hide() the first div and $.append() the second div or you can dispaly the second div and give the prop display: none . When you click the button, you can show the second div with $.show() and hide the first one..or try to use innerHTML() instead of $.html().

answered Oct 10 '16 at 04:30

Razvan Alex

1,706
2
18
21

Please show me the code. I'm not good at jquery much. – Wilf Oct 10 '16 at 05:09
Can you add a jsfiddle or a live demo to edit it for you? – Razvan Alex Oct 10 '16 at 05:59
JSFIddle doesn't show up the facebook like box. Don't know why. – Wilf Oct 10 '16 at 06:49

Update fb-like-box onclick with jquery

1 Answers1