accordion won't work with new content loaded

Question

I have tried to get this to work for a while now.

When I load new Ajax content into my accordion, then the new content won't work. The preloaded content works just fine, both before and after. I have added my code here I know you can't run the script with ajax, since my config and mysql runs local.

Here is my "update-data.php":

<?php
include('../../includes/config.inc.php');
if(isSet($_POST['content']))
{
$content=$_POST['content'];
$name=$_POST['name'];

$query = "INSERT INTO messages(msg,name) VALUES ('$content','$name')";
mysqli_query($sqlCon, $query);

//mysqli_query("insert into messages(msg) values ('$content')");
$sql_in= mysqli_query($sqlCon, "SELECT msg,msg_id,name FROM messages order by msg_id desc");
$r=mysqli_fetch_array($sql_in);
$msg=$r['msg'];
$name=$r['name'];
$msg_id=$r['msg_id'];
}

?>
<div class="accordionButton"><?php echo $msg_id; ?>:<?php echo $name; ?></div>
<div class="accordionContent" style="display: block;"><?php echo $msg; ?></div>

Thanks for your help

Here are the ajax call:

<script type="text/javascript">
$(function() {
    $(".comment_button").click(function() 
    {
    var element = $(this);
    var boxval = $("#content").val();
    var bval = $("#name").val();
    var dataString = {content:boxval,name:bval};

    if(boxval=='')
    {
    alert("Please Enter Some Text");
    } else {
    $("#flash").show();
    $("#flash").fadeIn(400).html('<img src="ajax.gif" align="absmiddle">&nbsp;<span class="loading">Loading Update...</span>');

    $.ajax({
        type: "POST",
        url: "<?php echo $total_path.'/update_data.php'; ?>",
        data: dataString,
        cache: false,
        success: function(html){

        $("div#wrapper_ac").prepend(html);
        $("div#wrapper_ac .accordionButton:first").slideDown("slow");
        document.getElementById('content').value='';
        document.getElementById('name').value='';
        $("#flash").hide();
        }
    });
    }
return false;
});
</script>

provide your javascript code since this seems to be a JS issue — lagbox, Apr 29 '14 at 09:14
Are they being added to your database? Did you echo out in the update file your queries and see if it is being posted right? And isn't it `... VALUES ('".$content."','".$name."')";` or am I wrong there? — Dorvalla, Apr 29 '14 at 09:27
@Dorvalla he is using the DB result to output the new data and that is being added to the DOM, it's just the javascript doesn't work. It's due to a listener issue I think. — dops, Apr 29 '14 at 09:29

score 1 · Accepted Answer · edited May 23 '17 at 12:20

1

You php is fine, just clean your inputs please and look into PDO

You can read about cleaning inputs here and PDO here

In your js I think your problem is your on statement

 $('.accordionButton').on('click', function() {
    // DO stuff
 });

I think it's just not bubbling up the DOM far enough to capture new data, it's adding he click event onto all accordion buttons and listening for them.

Change it to this

 $('#wrapper_ac').on('click', '.accordionButton', function() {
    // DO stuff
 });

This places the listener on #wrapper_ac so any click events that happen underneath will be caught.

Hope this helps

Edit: For more info on PDO check this site http://www.phptherightway.com/#databases

edited May 23 '17 at 12:20

Community

1
1

answered Apr 29 '14 at 09:26

dops

800
9
17

It worked! Thanks. About PDO I'm not sure that I understand? Im pretty new ;) – Chak Apr 29 '14 at 09:33
I've edited my answer and added another link at the bottom, it's an excellent into to PDO and explains why you want to be using it. – dops Apr 29 '14 at 09:42

accordion won't work with new content loaded

1 Answers1