CODEWITHSUNDEEP
javascriptphpjquerywordpress
ManzoorWani
ManzoorWani

Reputation: 1086

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

Upvotes: 0

Views: 1013

Answers (6)

ManzoorWani
ManzoorWani

Reputation: 1086

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>

Upvotes: 1

NASEEM FASAL
NASEEM FASAL

Reputation: 429

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>

Upvotes: 0

Dennis Heiden
Dennis Heiden

Reputation: 787

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?

Upvotes: 0

Ishan Shah
Ishan Shah

Reputation: 1676

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

});

Upvotes: 0

inZane
inZane

Reputation: 43

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

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

Upvotes: 0

mario.van.zadel
mario.van.zadel

Reputation: 2949

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>

Upvotes: 0

Related Questions