Question

Following is the code:-

    <script type="text/javascript">

var timer = 150;
var currentWindow;
$(document).ready(function() 
{
    $("#creditme").button({
        icons: { primary: "ui-icon-check" }
    }).hide();
    $("#viewad").button({
        icons: { primary: "ui-icon-play" }
    }).hide();
    $("#progressbar").progressbar({value: 0}).hide();

    var time;
    var id;
    var title;
    var url;

    $('.googlep-advertisement').bind('click', function()
    {       
        id = $(this).attr('id');
        title = $(this).text();
        url = $('#yturl-'+id).text();
        timer = $('#ytime-'+id).text();
        $("#dialog-message").dialog({
            modal: true,
            width: 700,
            title: title,
            resizable: false,
            draggable: false,
            beforeClose: function() { clearAd(); }
        });
        if (!$("#progressbar").is(":visible") && !$("#creditme").is(":visible")) 
        {
            $("#viewad").show();
        }
    });


    $("#viewad").bind('click',function() {
       $.get("googlep_credit.php" + '?start=' + id);
       $("#viewad").hide();
       $("#progressbar").progressbar('value', 0).show();
       currentWindow = window.open(url, 'videoad', 'height=480,width=640', false);
       window.blur();
       window.focus();
       progresscount(timer);
    });
    $("#creditme").click(function() {
        $.get("googlep_credit.php" + '?id=' + id);
        $("#creditme").hide();
        $("#dialog-message").dialog('close');
        $("#"+id).parent().parent('tr').fadeOut('slow');
    });
    function progresscount(time) 
{
    if(time == 0) 
    {
        if(isWindowClosed() == true)
        {
            alert('You closed the popup before timer reached zero or you are using popup-blocking software.');  
            $("#dialog-message").dialog('close');
        }
        else
        {
            $("#creditme").html('<g:plusone callback="plusone_vote" href="'+url'"></g:plusone>');
            $("#creditme").show();
        }   
        $("#progressbar").hide();
    } 
    else 
    {
        time--;
        $("#progressbar").progressbar('value', parseInt((timer - time) * 100 / timer));
        setTimeout(function() { progresscount(time) }, 100);
    }
}
});

function isWindowClosed()
{
    if (!currentWindow || typeof currentWindow == 'undefined' || currentWindow && currentWindow.closed) 
    {
        return true;
    }
    else
    {
        return false;
    }
}



function clearAd()
{

}
</script>
<style>
.dialog-message {

}
</style>

<div id="dialog-message" class="dialog-message" title="View Video" style="display:none">
    <p>

        <center>
            <button id="viewad" style="ui-helper-hidden">Click here to view the video</button>
            <div id="progressbar"></div>
            <button id="creditme" style="ui-helper-hidden">Test</button>
        </center>
    </p>
</div>

Nothing wrong with the code.
The problem is:-
http://dl.dropbox.com/u/14384295/70.jpeg

When checked with google chrome inspect element,
The code appears as
http://dl.dropbox.com/u/14384295/71.jpeg

Correctly working will appear as > http://dl.dropbox.com/u/14384295/72.jpeg

It seems that the code is not being converted by the google js which is in the portion. I am sorry if i have been confusing.

I may probably be doing the addition of ‘url’ var incorrectly

Answer 1

I’m pretty sure your problem lies in this line:

$("#creditme").html('<g:plusone callback="plusone_vote"></g:plusone>');

You are dynamically adding the <g:plusone> element after the Google +1 script has been run, so nothing happens.

To solve it, simply put the +1 markup in the html from the beginning so the +1 script can find it and render it, and only call $("#creditme").show(); when you need to show it.

<button id="creditme" style="ui-helper-hidden">
    <g:plusone callback="plusone_vote"></g:plusone>
</button>

If you want to dynamically change the URL after page load, check out the examples from the Google documentation. It will allow you to load the button explicitly.