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

Question

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. :)

getbootstrap.com/javascript/#modals-related-target

Steve
– Steve

2016-01-05 12:21:33 +00:00
Commented Jan 5, 2016 at 12:21 — Steve
– Steve, Commented Jan 5, 2016 at 12:21

ManzoorWani · Accepted Answer · 2016-01-05 18:21:19Z

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>

mario.van.zadel · Accepted Answer · 2016-01-05 12:17:56Z

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>

answered Jan 5, 2016 at 12:17

mario.van.zadel

2,94716 silver badges24 bronze badges

2 Comments

Steve Over a year ago

There is one modal and multiple posts in the loop - the OP is looking for a way to set content in the modal depending on which button is clicked

ManzoorWani Over a year ago

Yes exactly, there is one modal and multiple posts.

inZane · Accepted Answer · 2016-01-05 12:19:00Z

0

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

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

answered Jan 5, 2016 at 12:19

inZane

436 bronze badges

1 Comment

Steve Over a year ago

This could be a hint in a comment, but it is no where near complete enough for an answer

Ishan Shah · Accepted Answer · 2016-01-05 12:23:13Z

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 ?>");

});

answered Jan 5, 2016 at 12:23

Ishan Shah

1,6862 gold badges20 silver badges43 bronze badges

Comments

Dennis Heiden · Accepted Answer · 2016-01-05 15:09:57Z

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?

answered Jan 5, 2016 at 15:09

Dennis Heiden

7978 silver badges16 bronze badges

Comments

NASEEM FASAL · Accepted Answer · 2016-01-05 17:01:57Z

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>

edited Jan 5, 2016 at 17:01

answered Jan 5, 2016 at 12:33

NASEEM FASAL

2295 silver badges13 bronze badges

5 Comments

ManzoorWani Over a year ago

Tried, but as I said there are many buttons (of different posts) on the page, it passes the url and title of only the first post on that page

NASEEM FASAL Over a year ago

Sorry ! I thought you have only one post, for making share button for different posts i suggest you to use data- tag with model. See the updated code . If everything is working please dont forget mark my answer as correct and vote for my answer.

ManzoorWani Over a year ago

Bro, The href of the facebook or twitter button vl not be just $('#facebook').attr("href", url); rather $url is to be added after facebook.com/sharer.php?u= I tried doing this: $("#facebook").attr("href", "facebook.com/sharer.php?u=<?= $url ?>") with with #facebook being a valid identifier, but it didn't work

NASEEM FASAL Over a year ago

Ok. I will update the code with facebook.com share prefix url.

NASEEM FASAL Over a year ago

Manzoor , If everything is working, please don't forget to mark my answer as right answer and give vote also.

Collectives™ on Stack Overflow

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

6 Answers 6

Comments

2 Comments

1 Comment

Comments

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

2 Comments

1 Comment

Comments

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related