Add query string to data-href

Question

I want to add a string after an url inside data-href using jQuery. I want to make sure that my Facebook comments plugin creates a separate thread for each page that loads the comments plugin.

What should be added after the data-href url is ?st=<?php echo $post->post_name;?> - but not sure how to implement this in PHP from WordPress into a jQuery code.

right now:

<div class="fb-comments" data-href="https://myurl.com" data-width="100%" data-numposts="3" data-colorscheme="light"></div>

what it should look like with post_slug being the slug that WordPress creates for each individual post.

<div class="fb-comments" data-href="https://myurl.com/?st=post_slug" data-width="100%" data-numposts="3" data-colorscheme="light"></div>

Stephan · Accepted Answer · 2015-07-20 10:18:04Z

1

// Select all elements. It seems they are multiple.
var elems = $('fb-comments'); 

// Get first or you can iterate over above array.
var elem = elems[0];

// Append whatever text you want.
//    `$(elem).data('href')` gets current value.
//    `$(elem).data('href', 'new_val')` sets current value.
$(elem).data('href', $(elem).data('href') + '?st=<?php echo $post->post_name;?>');

edited Jul 20, 2015 at 10:18

Stephan

43.2k69 gold badges245 silver badges342 bronze badges

answered Jul 20, 2015 at 8:44

Medet Tleukabiluly

12k3 gold badges38 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Stephan Over a year ago

Can you describe your solution please?

Medet Tleukabiluly Over a year ago

@Stephan added comments

Jai · Accepted Answer · 2015-07-20 09:06:32Z

0

If you have jQuery in your page then you can use this script block:

<script>
    jQuery(function($){
        $('.fb-comments').each(function(){ // loop if there are more blocks
           var oldDataHref = $(this).data('href'); // get the data-href of current "fb-comments"
           var newDataHref = oldDataHref + '?st=<?php echo $post->post_name;?>'; // make a new data-href
           $(this).attr('data-href', newDataHref); // set the data-href here.
        });
    });
</script>

edited Jul 20, 2015 at 9:06

answered Jul 20, 2015 at 8:48

Jai

74.8k12 gold badges77 silver badges104 bronze badges

2 Comments

meight08 Over a year ago

I tried your code, it looks very logical and clean... But the url in data-href still remains the original link for some reason. Any ideas?

Jai Over a year ago

@meight08 $(this).attr('data-href', newDataHref); use this line.

Light · Accepted Answer · 2015-07-20 08:39:53Z

0

Using jquery:

var str = "new url";

$(".fb-comments").prop("data-href",str);

answered Jul 20, 2015 at 8:39

Light

1,09710 silver badges33 bronze badges

Comments

Josh Stevens · Accepted Answer · 2015-07-20 08:40:38Z

0

you need to use json_encode — this returns the JSON representation of a value. You then can manipulate the data-href with the jQuery.

example below.

$(document).ready(function() {
      // convert the value
      var value = <?php echo json_encode($post->post_name); ?>
      // get the existing value of data-href
      var href = $('.fb-comments').attr('data-href');
      // create new link with extending php value 
      var newLink = href + '?st=' + value;
      // change the data-href value
      $(".fb-comments").attr('data-href',encodeURIComponent(newLink));
    });

answered Jul 20, 2015 at 8:40

Josh Stevens

4,2811 gold badge20 silver badges24 bronze badges

Comments

Hito · Accepted Answer · 2015-07-20 10:01:50Z

0

Get the link

var link = document.document.getElementById("fb-comments");

Change the attribute

link.setAttribute('data-href', "new one");

You can use getAttribute() to get the original and edit it. Change the "class" to "id" in your html.

edited Jul 20, 2015 at 10:01

answered Jul 20, 2015 at 8:37

Hito

81311 silver badges24 bronze badges

3 Comments

meight08 Over a year ago

Does it not matter that I'm trying to target data-href and not just href? Not an expert with jQuery, but I added this above the fb-comments div <script> var x = document.getElementsByClassName("fb-comments"); link.setAttribute('href', "myurl.com/?st=ind"); </script> Wasn't sure how to use getAttribute() in here.

Hito Over a year ago

Sorry, yes you need to use the attribute name you need. And the get one will give you the original value which you can edit with some string operations like concat().

meight08 Over a year ago

Unfortunately the data-href url remains the original one :(

Collectives™ on Stack Overflow

Add query string to data-href

5 Answers 5

2 Comments

2 Comments

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

2 Comments

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related