Calling php scripts using ajax

Question

I am making a chat script and an hoping to code it so that when a user submits a message, the script will run chat_new.php and then refresh #cbox. I use the code below to try and accomplish this, but unfortunately it won't reload. Just to rule it out, I tested without any jQuery and chat_new.php executes without problems, so it definitely is my ajax script. In addition, getUpdates() works just fine on it's own. I only have a problem when posting new messages through ajax.

<div id="cbox" align="left">
    <script>
    $(document).ready(function() {
        setInterval(function() {
            getUpdates()
        }, 2000);
    });

    function getUpdates() {
        $("#cbox").load("/lib/chat_post.php");
    }

    $("#submitmsg").click(function() {
        $.ajax({
            type: 'POST',
            url: '/lib/chat_new.php',
            data: {
                submitmsg: 'submitmsg',
                usermsg: 'usermsg'
            },
            success: function() {
                getUpdates()
            }
        });
    });
    </script>
</div>
<form name="message" method='post' id="cbox_input">
    <input name="usermsg" id='usermsg' type="text" size="63" maxlength="255" />
    <input name="submitmsg" id='submitmsg' type="submit" />
</form>

@DimalChandrasiri why request files that are working? Just adds unnecessary noise in the code within question that isn't needed — charlietfl
– charlietfl, Commented Jul 18, 2015 at 17:13

charlietfl · Accepted Answer · 2015-07-18 17:07:04Z

1

Several issues:

Your click handler exists before the element it references and is not inside document.ready. Therefore it can't find the element and never gets bound to it

Once that is fixed you need to prevent the default form submit process. Otherwise page will reload on submit

// put this inside ready()
$("#submitmsg").click(function (event) {
   event.preventDefault();
   //other code
})

answered Jul 18, 2015 at 17:07

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Miranda Roberts Over a year ago

Oh, this seemed to have fixed it right up! It now loads just as I want it, but I fear I may have improperly declared the data: because every message is now usermsg

charlietfl Over a year ago

Yes...you hard coded those. Simple fix data: $('#cbox_input').serialize()

MaggsWeb · Accepted Answer · 2015-07-18 17:04:23Z

1

This might be a simple as moving }); from the third line of your script, to just before </script> so that your function and your ajax call are inside $(document).ready(... and therefore only get processed once the DOM has loaded, and all HTML elements are on the page.

answered Jul 18, 2015 at 17:04

MaggsWeb

3,0071 gold badge17 silver badges23 bronze badges

Collectives™ on Stack Overflow

Calling php scripts using ajax

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related