Question

first post, im using the cakephp framework with ajax to create a reply button. the problem is that when a user clicks the reply button more then once the textbox keeps loading. how can i make it toggle so that when a user clicks it for the second time it closes the reply text box. right now i can just disable the button with thiss.remove(); but id rather close the text box. my code is below . thanks

<script type="text/javascript">
jQuery('.reply-button').live('click', function() {
    var a = jQuery(this).data('comment_id');
    var b = jQuery(this).data('video_id');
    var c = jQuery(this).data('comment_quote');
    var d = jQuery(this).data('reply_name');
    var e = jQuery(this).data('quote_body');
    var f = jQuery(this).data('topic_name');
    var thiss = jQuery(this);
    jQuery.ajax({
        type: "POST",
        url: "<?= $this->Html->url(array('controller' => 'comments', 'action' => 'reply')); ?>",
        data: { comment_id: a, video_id: b, comment_quote: c, reply_name: d , quote_body: e , topic_name: f },
        success: function(html) {
            thiss.parent().parent().parent().append(html);
        }
    });
});

Answer 1

If your textbox has an id or class attribute I’d use that to determine if it’s visible/hidden/already loaded and based on that hide/show/load it.

For example say the textbox has an id of reply you can do:

jQuery('.reply-button').live('click', function() {

    // Check if the textbox is on the page or if we need to load it via an ajax call
    if (jQuery('#reply').length == 0)
    {
        // The textbox isn't loaded on the page so call the ajax and append it     
        var a = jQuery(this).data('comment_id');
        var b = jQuery(this).data('video_id');
        var c = jQuery(this).data('comment_quote');
        var d = jQuery(this).data('reply_name');
        var e = jQuery(this).data('quote_body');
        var f = jQuery(this).data('topic_name');
        var thiss = this;

        jQuery.ajax({
            type: "POST",
            url: "<?= $this->Html->url(array('controller' => 'comments', 'action' => 'reply')); ?>",
            data: { comment_id: a, video_id: b, comment_quote: c, reply_name: d , quote_body: e , topic_name: f },
            success: function(html) {
                thiss.parent().parent().parent().append(html);
            }
        });        
    }
    else
    {
        // The textbox is on the page so check if its visible/showing
        if (jQuery('#reply').is(':visible'))
        {
            // The textbox is visible so hide it
            jQuery('#reply').hide();
        }
        else
        {
            // The textbox is hidden so show it
            jQuery('#reply').show();
        }
    }
});

Edit: I also change your var thiss = jQuery(this); to var thiss = this; as this is already a jQuery object so it doesn’t need to go through jQuery(this) to turn it into one.