0

Basically. I have a javascript loop that posts to a php script. To append on the response to a DIV in a log. The response has a button inside it. The problem is, when a new response is made and appended, the jquery button function makes all the previous appended buttons larger. (Probably because it's calling the jquery button() function again on the same DIV elements.)

Is there a way to apply the button() jquery ui function to a button when it's loaded? (Instead of applying it to every element with the same name?)

This php is quite similar to the following (but this is shortened.) Just to give you an idea of what the php script does.

<?php

    echo "<script type='text/javascript'>
        function addButton(x) {
            x = this;
            $(x).button({            
                icons: {                
                    primary: 'ui-icon-alert'                    
                }
            });
        }
        </script><div id='chat_wrap' class='message".$id."' hidden='true'>";


if ($query_run = mysql_query($finalchatq)) {
    if (mysql_num_rows(mysql_query($finalchatq)) > 0) {
        $counter = 0;
        $amount = array();
        while ($query_rows = mysql_fetch_assoc($query_run)) {
            $time1 = $query_rows['time'];
            $time2 = substr_replace($time1, " : ", 10, 1);
            $time = str_ireplace('.', '/', $time2);
            $text = str_ireplace('removem', '', $query_rows['text']);
            $id = $query_rows['id'];

            if($query_rows['type']=='notice') {

            echo "<div  selectable='false'><div id='date'><div id='notice'>NOTICE:</div>Sent At: ".$time."</div><div id='Nchat_message'><div id='chat_text'>".$text."</div><img id='charhead' src='camperhead.php?id=".$query_rows['who']."' id='charhead'></img></div>";
            echo "<div id='controls'>";

            if(userIsA('admin')||userIsA('mod')) {
                echo "<input hidden='hidden' name='idtodel' value='".$id."'></input><input type='button' value='DELETE' id='delete_button'></input>";
            } else {

            }

            echo "</div></div></div><br/><br/>";         
        }
        if($query_rows['type']=='normal'){      
            echo "<div selectable='false'><div id='date'><div id='by'>".getUserFieldById($query_rows['who'], 'camper_name').":</div>Sent At: ".$time."</div><div id='chat_message'><div id='chat_text'>".$text."</div><img id='charhead' src='camperhead.php?id=".$query_rows['who']."' id='charhead'></img>";
            echo "<div id='controls'>";

            if(userIsA('admn')||userIsA('md')) {
                echo "<button id='delete_button' class='dpp2'  onclick='delCom(".$id.")'>Delete</button>";
            } else {
                echo "<button id='report_button' onload='addButton(this)' onclick='reportCom(".$id.")'>REPORT</button>";
            }
    echo "</div></div></div></div></div><br/><br/>";
        }
    }
    echo "</div>";
}
}
}

?>

I hope I've made my question clear enough, if you have any concerns please post a comment and I'll reply as soon as I can.

Matt
  • 6,993
  • 4
  • 29
  • 50
Jordan Richards
  • 532
  • 3
  • 18
  • Yes, do it within the callback of the ajax request or method that is appending them. – Kevin B Aug 06 '12 at 15:31
  • Kevin B, thanks for your fast reply. However, I'm not too sure on how I'd do that. If I said $('#div').button(), then I'd still have the same problem where the previously appended buttons would be effected. If I applied the function to the response, it would apply the button function to the whole message, which would not be right. – Jordan Richards Aug 06 '12 at 15:34
  • You should stop using `mysql_*` functions. They're being deprecated. Instead use [PDO](http://php.net/manual/en/book.pdo.php) (supported as of PHP 5.1) or [mysqli](http://php.net/manual/en/book.mysqli.php) (supported as of PHP 4.1). If you're not sure which one to use, [read this SO article](http://stackoverflow.com/questions/13569/mysqli-or-pdo-what-are-the-pros-and-cons). – Matt Aug 06 '12 at 15:36
  • apply it to the response, filtered to the elements you want to be buttons. `var response = $(response); response.find("[id=date]").datepicker();`. By the way, ID's must be unique, otherwise you won't be able to select them by id directly using `$("#date")` because it will only return the first element with that id. – Kevin B Aug 06 '12 at 15:36
  • possible repeat of this http://stackoverflow.com/questions/3028912/adding-jqueryui-buttons-to-dynamically-added-content – Waygood Aug 06 '12 at 16:00

1 Answers1

0

Try using the .on() function in jQuery to define it when created http://api.jquery.com/on/

fishcx
  • 117
  • 6