How to change the html of a div and add dynamic content to it

Question

I have a slider working with images and variables set that grab data from that slide. That data is manipulated by me to create certain functionality.

I currently have a set of images that move across(slider) on my body of the page I have a social bar that is always foxed to the right of the page.

What I am trying to do is grab the data and change the urls, and text inside the social buttons each time the slide is changed using the callback function provided by the slider. Here is my code:

var $mainContainer = $('div#container');
  var $tmbContainer = $('.rsThumbsContainer');
  var $tmbContainerT = $('.rsThumbsContainer').find('.rsThumb');
  var $slider = $('#gallery-t-group');
  var $body = $('body');
  var $close = $('<div id="close"><p class="icon-close"></p></div>');        

$tmbContainerT.each(function () {
      //console.log(slider.currSlide);
        $(this).on('click', function(event) {       
            $('body').addClass('rsSlider-active');
            sliderR();
            var $gallery = $('#gallery-t-group').find('.portfolio');

            $gallery.each(function () {
                var src = this.href;
                var content = $(this).find('.perma_link').val();
                var textContent = $(this).find('img').attr('alt'); // same as $(this.element).attr("title"); before you modify it using this.title +=
                var image = $(this).find('img').attr('src'); // this is the URL of the thumbnail
                var imageAlt = $(this).find('img').attr('alt');
                var $tumbl = $(this).find('a.tumbl-button');
                $tumbl.attr("href","http://www.tumblr.com/share/photo?source="+ encodeURIComponent(image) +"&caption="+ encodeURIComponent(textContent) +"&clickthru="+ encodeURIComponent(content) +"");

                slider.ev.on('rsAfterSlideChange', function(event) {
                $('#twit').html('<div id="twitter" data-url="'+content+'" data-text="'+textContent+'"></div>');
            $('#twitter').attr("data-url",content);
            $('#twitter').attr("data-text",textContent);
            $('#twitter').sharrre({
                    share: {
                        twitter: true
                    },
                    template: '<a class="box" href="#"><div class="count" href="#">{total}</div><div class="share"><span></span>Tweet</div></a>',
                    enableHover: false,
                    enableTracking: true,
                    buttons: { twitter: {via: '_JulienH'}},
                    click: function(api, options){
                        api.simulateClick();
                        api.openPopup('twitter');
                    }
                });
            });

            });
            slider.updateSliderSize(true);
        });

      });

This is where all my social buttons get added:

<div class="socialbar-vertical">
<div id="socio-box">
<div id="twit"></div>
  <div id="facebook" data-url="http://sharrre.com/" data-text="Make your sharing widget with Sharrre (jQuery Plugin)"></div>
  <div id="googleplus" data-url="http://sharrre.com/" data-text="Make your sharing widget with Sharrre (jQuery Plugin)"></div>
</div>
</div>

Currently this is all I have that changes the content of a div but it always uses the first clicked div:

$('#twit').html('<div id="twitter" data-url="'+content+'" data-text="'+textContent+'"></div>');

what I want to do is keep changing the attr's of that div everytime the slide changes.

Am I doing something completely wrong here or missing a trick?

IDs must be unique on context page, looks like you are using some duplicate IDs here so cannot works as expected — A. Wolff, Jul 16 '13 at 14:39
Will not affect what? I mean if you have more than one element with ID 'twit', this line will work only for the first element: `$('#twit').html(...)` But as i don't know what are `$tmbContainerT` i'm just speculating here — A. Wolff, Jul 16 '13 at 15:02
I added what `$tmbContainerT` is above to the edit of the code — M dunbavan, Jul 16 '13 at 15:13

Dennis Guse · Answer 1 · 2013-07-16T19:29:18.573

0

a.) Why dont you just store the #twit.attr before you replace the div and then assign the value after replacement.

//Make a copy of all attributes of #twit
//TODO Replace #twit
//TODO set all attributes to the new #twit

b.) Another option is to stop replacing #twitter completely and instead re-using it (including its children). Might be less resource consuming.

edited Jul 16 '13 at 19:29

answered Jul 16 '13 at 14:38

Dennis Guse

883
10
34

I am not sure entirely how this would work! Can that replace the attr('data-url') on the fly each time or does it replace all attr's in that div? – M dunbavan Jul 16 '13 at 14:52
Here is a solution to copy all "attr" of from one html element to another one. http://stackoverflow.com/questions/6753362/jquery-how-to-copy-all-the-attributes-of-one-element-and-apply-them-to-another – Dennis Guse Jul 16 '13 at 19:27

How to change the html of a div and add dynamic content to it

1 Answers1