Twitter Bootstrap Question posted in

Twitter bootstrap – How to pass PHP variables to JavaScript onclick and then insert them into Bootstrap Modal

I want to create a bootstrap modal for social sharing buttons in my wordpress blog. For the modal to be visible, I have to place it outside the post (loop) but its trigger (button) inside the post. I want to pass the URL and Title of the post to the Sharing Buttons inside the modal.
I have created two variables inside the post to get its URL and title:

 <?php 
 // Get current post URL 
 $URL = get_permalink();     
 // Get current post title
 $Title = str_replace( ' ', '%20', get_the_title());  ?>

Then, I created the trigger inside the post to display the modal

<button class="btn btn-link btn-lg" id="socialbtn" data-toggle="modal" data-target="#myModal">Share</button>

And in the modal body, I have many buttons, like

<a class="ssk ssk-text ssk-facebook" href="https://www.facebook.com/sharer.php?u=***URL of the post***">Facebook</a>    
<a class="ssk ssk-text ssk-twitter" href="https://twitter.com/share?url=$URL&text=$Title$" >Twitter</a>

What I want to do is to replace the $URL in href of Facebook and Twitter with the URL of the post and likewise the title.
I know that I have to use JavaScript, but I’m unable to figure out the correct syntax.
Will be thankful for help. 🙂

Tags:

6

Answers


  1. Chosen as BEST ANSWER
    0

    I did it like this: In the trigger button, I set the data attributes as follows:

    <button class="btn btn-link btn-lg" id="socialbtn" data-url="<?php echo $URL; ?>" data-title="<?php echo $Title; ?>">Share</button>

    then got the facebook and twitter URLs in separate variables and then set the href attributes as follows:

    <script>
$(document).on("click", "#socialbtn", function () {
     var url = $(this).data('url');
     var title = $(this).data('title');
     var fburl = "https://www.facebook.com/sharer.php?u="+url;
     var twurl = "https://twitter.com/share?url="+url+"&text="+title;
     $("#facebook").attr("href", fburl);
     $("#twitter").attr("href", twurl);
</script>

    And in the modal body, used the anchor tags as follows:

    <a class="ssk ssk-text ssk-facebook" id="facebook" href="#">Facebook</a>
<a class="ssk ssk-text ssk-twitter" id="twitter" href="#">Twitter</a>

  2. 0

    You have to output them using PHP:

    <a class="ssk ssk-text ssk-facebook" href="https://www.facebook.com/sharer.php?u=<?php echo $URL; ?>">Facebook</a>

<a class="ssk ssk-text ssk-twitter" href="https://twitter.com/share?url=<?php echo $URL; ?>&text=<?php echo $Title; ?>" >Twitter</a>
    Login or Signup to reply.
  3. 0

    $(“.ssk-facebook”).attr(“href”, “YourNewURL”);

    $(“.ssk-twitter”).attr(“href”, “YourNewURL”);

    Login or Signup to reply.
  4. 0 
    $( "#socialbtn" ).click(function() {

   $(".ssk-facebook").attr("href", "https://www.facebook.com/sharer.php?u=<?= $URL ?>");

   $(".ssk-twitter").attr("href", "https://twitter.com/share?url=<?= $URL ?>&text=<?= $Title ?>");

});
    Login or Signup to reply.
  5. 0

    Use data attribute to add link with every post’s share button:-

    HTML

    <!-- Share button (PLACE IT INSIDE YOUR LOOP) -->
<a data-url="<?php echo url; ?>" data-title="<?php echo $title;?>" class="open-share btn btn-primary" href="#">share</a>

<!-- Model popup (PLACE IT AFTER LOOP) -->
<div class="modal hide" id="sharepopup">
 <div class="modal-header">
    <button class="close" data-dismiss="modal">×</button>
    <h3>Share </h3>
  </div>
    <div class="modal-body">
<a id="facebook" class="ssk ssk-text ssk-facebook">Facebook</a>

<a id="twitter" class="ssk ssk-text ssk-twitter" >Twitter</a>

    </div>
</div>

    JS

    <script>
$(document).on("click", ".open-share", function () {
     var url = $(this).data('url');
     var title = $(this).data('title');
       $('#facebook').attr("href", "http://facebook.com?share="+url);
       $('#facebook').attr("title", "http://twitter.com?share"+title);
       $('#twitter').attr("href", url);
       $('#twitter').attr("title", title);
// Initialize popup with Javascript.
     $('#sharepopup').modal('show');
});


</script>
    Login or Signup to reply.
  6. 0

    You have to identify which button the user have clicked on.

    You can archive that by using unique IDs OR by adding hidden inputs or divs containing the correct hrefs for each post.

    Then select those “href-container” relatively to the button and change the modal. (“closest(), parent(), nextAll() etc.)

    Do you need code examples?

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search