Javascript error: Uncaught SyntaxError: Unexpected token }

Question

I am creating a chat for my site. It works fine, but a function isn't working inside of a HTML button. I have 3 files I use for it, and one line isn't working.

Before, I had an issue where I set the Javascript function, create the button, and it would say the function doesn't exist. I fixed that, by putting the function below the buttons.

Each button shows an online member, who is on your friends list.

The error I get in confusing me, as I have no idea how this is being caused.

Error: 'Uncaught SyntaxError: Unexpected token } users.php:3'

(users.php is the page I was on, if I change it that changes to the page name.)

With chrome, I can click on the error, that brings up this: 'window.script1357688207590=1;'

Scripts (sorry for being so long):

Script 1: (main script):

    var username = '[error]';
        $.ajax({
            url: 'bchat.php',
            type: 'post',
            data: { method: 'method2' },
            success: function(data){
                username = data;
            }
        });
        $.ajax({
            url: 'bchat.php',
            type: 'post',
            data: { method: 'method1' },
            success: function(data){
                if(data!='do not show chat'){
                    function ToggleChat(tof){
                        if(tof == true){
                            $('#chatWindow').css('visibility','visible');
                        }else{
                            $('#chatWindow').css('visibility','hidden');
                        }
                    }
                    $('body').append('\
                        <div id=chatWindow style="background:white; visibility

:hidden; position: fixed; bottom: 0; right: 0; margin-top:-30px; width:200px; height:350px;">\
                        <div style="width:100%; height:100%; border:solid black 1px;">\
                            <div style="hieght:20px; background:rgb(40,40,40); color:white;">\
                                '+data+'<span>  </span>'+username+'\
                                <button id=chat_close style="float:right; background:rgba(0,0,0,0); border:none; color:white;">\
                                    Close\
                                </button>\
                            </div>\
                            <div id=chatOnline style="overflow:auto;">\
                            </div>\
                        </div>\
                    </div>\
                    <div id=chat__window style="background:white; visibility:hidden; position: fixed; bottom: 0; right: 200; margin-top:-30px; margin-left:-400px; width:200px; height:350px;">\
                        \
                    </div>\
                    <div id=chat style="position: fixed; bottom: 0; right: 0;">\
                        <button id=chat_open style="border:none; padding:5px; color:whiteSmoke; background-image: -ms-linear-gradient(bottom, #4A4A4A 0%, #00070A 100%);background-image: -moz-linear-gradient(bottom, #4A4A4A 0%, #00070A 100%);background-image: -o-linear-gradient(bottom, #4A4A4A 0%, #00070A 100%);background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #4A4A4A), color-stop(1, #00070A));background-image: -webkit-linear-gradient(bottom, #4A4A4A 0%, #00070A 100%);background-image: linear-gradient(to top, #4A4A4A 0%, #00070A 100%); width:200px; height:30px;">\
                            '+data+' <span>  </span>Chat\
                        </button>\
                    </div>');
                $('#chat_open').click(function() {
                     ToggleChat(true);
                });
                $('#chat_close').click(function() {
                     ToggleChat(false);
                });
            }   
        }   
    });
    //
    //update online users
    //
    function updateOnline(){
        $.ajax({
            url: 'bchat.php',
            type: 'post',
            data: { method: 'method3' },
            success: function(data){
                $('#chatOnline').html(data);
            }
        });
    }
    updateOnline();
    setInterval(updateOnline,5000);

Script 2 (function script):

function chatWith(url,un){
                                $('#chat__window').html('<div style="width:100%; height:100%; margin-top:-30px; border:solid black 1px;"><div style="hieght:20px; background:rgb(40,40,40); color:white;">'+url+'<span>  </span>'+un+'<button id=chat_chatting_close style="float:right; background:rgba(0,0,0,0); border:none; color:white;">Close</button></div><div id=chat_chats style="overflow:auto;"></div></div>');
                                $('#chat__window').css('visibility','visible');
}

PHP script (bchat.php):

<?php
    include_once("./login_manager_php_file.php");
    if($username&&$userid){
        $method = $_POST['method'];
        if($method){
            if($method=='method1'){
                $url = $images['logged_in'];
                $html = "<img src='".$url."' width=7.5 height=7.5/>";
            }elseif($method=='method2'){
                echo $username;
            }elseif($method=='method3'){
                $friends_q = mysql_query("SELECT * FROM friends WHERE `with`='$username' OR `friender`='$username'");
                $thtml = '';
                if($friends_q){
                    while($friend = mysql_fetch_assoc($friends_q)){
                        if($friend['with']==$username){
                            $usern = $friend['friender'];
                        }else{
                            $usern = $friend['with'];
                        }
                        $url = '';
                        if(ifLoggedIn($usern)===true){
                            $url = $images['logged_in'];
                        }else{
                            $url = $images['logged_out'];
                        }
                        if(ifLoggedIn($usern)===true && $usern != $username){
                            $on = $url;
                            $html = "

                            <button onClick='
                                chatWith('$url','$usern');
                            '
                            style='border:none; background:rgba(0,0,0,0);'><img src='".$url."' width=7.5 height=7.5/>";
                            $thtml = $thtml.$html.$usern.'</button><br/>';
                        }
                    }
                }
                echo $thtml;
            }elseif($method==='method4'){
                if($_POST['usrn']){
                    $url = '';
                    if(ifLoggedIn($_POST['usrn'])===true){
                        $url = $images['logged_in'];
                    }else{
                        $url = $images['logged_out'];
                    }
                    echo "<img src='".$url."' width=7.5 height=7.5/>";
                }else{
                    echo '[error]';
                }
            }
        }
    }else{
        echo 'do not show chat';
    }
?>

Answer 1

Try to change the php to add an id attribute to the button, or class if there is going to be more than one. Also, remove the onclick attribute

<button class="btnChat" ...

Just realized you will need to add in the parameters as well. I would add those to data attributes on the button.

<button class="btnChat" data-url="$url" data-usern="$usern" 

You will need to make sure the $url and $usern are escaped properly

then in the script 2 file you can hook up the click event for that button:

$(function(){

  $('body').on('click','.btnChat',function(){
      chatWith($(this).data('url'),$(this).data('usern'));
  });

});