CODEWITHSUNDEEP
javascriptjquery
user701254
user701254

Reputation: 3953

Prevent button permanently disappearing

In below code when I click 'Vote' a vote results screen is displayed but when I click 'Return to poll' the poll is redisplayed but the button 'Show Options' is no longer visible. Is there a way to prevent this button from being hidden when a 'Return to poll' is clicked.

Here is the fiddle : http://jsfiddle.net/E2gku/2/

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript" charset="utf-8" src="http://static.polldaddy.com/p/5968383.js"></script>
<noscript><a href="http://polldaddy.com/poll/5968383/">This is a test question ?</a></noscript>

<style>
.pds-pd-link {
display: none !important;
}
.pds-box {
    width: 200px !important;
}
.pds-input-label{
    width: auto! important;
}
.PDS_Poll{
    margin-bottom:15px;
}


</style>
<script type="text/javascript">



$(document).ready(function() {

    $('.pds-question').append('<input type="button" class="showanswer" value="Show Options"/>');

        $('.pds-vote').css('display' , 'none');
        $('.pds-answer').css('display' , 'none');
        $('.pds-vote-button').css('display' , 'none');
        $('.pds-view-results').css('display' , 'none'); 

    $('.showanswer').on('click', function () {

            $('.pds-vote').show();
             $('.pds-answer').show();
             $('.pds-vote-button').show();
             $('.pds-view-results').show();

        $('.showanswer').hide();
        $('.pds-question').append('<input type="button" class="hideanswer" value="Hide Options"/>');

        $('.hideanswer').on('click', function () {
                $('.pds-vote').hide();
                 $('.pds-answer').hide();
                 $('.pds-vote-button').hide();
                 $('.pds-view-results').hide();
                $('.showanswer').show();
                 $('.hideanswer').hide();
        });

});

});
</script>

Upvotes: 2

Views: 277

Answers (2)

Fabr&#237;cio Matt&#233;
Fabr&#237;cio Matt&#233;

Reputation: 70179

You can use event delegation to re-append the button when the user clicks to go back to the question:

$('body').on('click', '.pds-return-poll', function() {
    setTimeout(function(){
        $('.pds-question').append('<input type="button" class="showhideanswer" value="Hide Options"/>');
    }, 10);
});

I've also dried up your code, just a little:

$(document).ready(function() {
    $('.pds-answer, .pds-vote').css('display' , 'none');
    $('.pds-question').append('<input type="button" class="showhideanswer" value="Show Options"/>');

    $('body').on('click', '.pds-return-poll', function() {
        setTimeout(function(){
            $('.pds-question').append('<input type="button" class="showhideanswer" value="Hide Options"/>');
        }, 10);
    }).on('click', '.showhideanswer', function() {
        $('.pds-answer, .pds-vote').toggle();
        if (this.value == 'Show Options')
            $(this).val('Hide Options');
        else
            $(this).val('Show Options');
    });
});

JSFiddle.

The timeout is because your default function takes precedence, so interpret this timeout as a deferred object.

And obviously, as the button is being added dynamically, it will also require event delegation as in my code above (either that or re-binding the event handlers, your choice).

​edit: Fixed a bug in Firefox.

edit2: Dried it up a little more. Selectors are only being used once now so I discarded the selector caching, as the $(document).ready's selector can't be re-used inside the showhideanswer's click handler because, for some reason, your plugin's developer decided to create new elements when you go to the results page and back to the vote page instead of re-using the same elements.

Upvotes: 1

Zeta
Zeta

Reputation: 105925

Polldaddy doesn't hide your button, instead it will replace the .innerHTML of #PDI_container5968383 and thus remove your new button entirely. Have a look at the function PDV_go5968383() in the PD script:

function PDV_go5968383(){
    /* other code */
    // PDV_html5968383 is prepared HTML for the container
    _$("PDI_container5968383").innerHTML = PDV_html5968383;
    /* other code */
}

This will remove all your additions. You could add the buttons outside of the PD container and position them with CSS. This would prevent them from being removed.

Upvotes: 0

Related Questions