I'm trying to create a messaging system that uses ajax that doesn't have to reload when the message is submitted. I have a .js file that uses an onclick to open the form to insert your message and then a differant function to submit the form. Is this not working because I am doing something wrong or because you cant use JQuery and Javascript in the same file.

Here is my code:

//I have a button that calls this function with an onclick in my HTML file
function createMessage() {
var form = document.createElement("form");
form.name = "form_input";
form.method = "POST";
form.action = "messages.php";
//I also have a container div in my HTML
container.appendChild(form);

var textarea = document.createElement("textarea");
textarea.name = "message_input";
textarea.action = "messages.php"
textarea.method = "POST";
textarea.cols = 84; 
textarea.rows = 16; 
textarea.id = "message_input";
form.appendChild(textarea); 

var div = document.createElement("div");
div.id = "second_picture";
container.appendChild(div);

var submit = document.createElement("button");
submit.innerHTML = 'Send';
submit.id = 'send_message';
submit.name = 'submit';
form.appendChild(submit); 
submit.onclick = submitMessage;
};

function submitMessage() {
$(function() {  
    $("#send_message").click(function() {    
        var message = $("input#message_input").val();    
        var dataString = 'message_input='+ message; 

        $.ajax({  
            type: "POST",  
            url: "messages.php",  
            data: dataString,  
            success: function() {  
                alert('Ok.');  
            }  
        });  
        return false;  
    });  
});  
};

I'm trying to create a messaging system that uses ajax that doesn't have to reload when the message is submitted. I have a .js file that uses an onclick to open the form to insert your message and then a differant function to submit the form. Is this not working because I am doing something wrong or because you cant use JQuery and Javascript in the same file.

Here is my code:

//I have a button that calls this function with an onclick in my HTML file
function createMessage() {
var form = document.createElement("form");
form.name = "form_input";
form.method = "POST";
form.action = "messages.php";
//I also have a container div in my HTML
container.appendChild(form);

var textarea = document.createElement("textarea");
textarea.name = "message_input";
textarea.action = "messages.php"
textarea.method = "POST";
textarea.cols = 84; 
textarea.rows = 16; 
textarea.id = "message_input";
form.appendChild(textarea); 

var div = document.createElement("div");
div.id = "second_picture";
container.appendChild(div);

var submit = document.createElement("button");
submit.innerHTML = 'Send';
submit.id = 'send_message';
submit.name = 'submit';
form.appendChild(submit); 
submit.onclick = submitMessage;
};

function submitMessage() {
$(function() {  
    $("#send_message").click(function() {    
        var message = $("input#message_input").val();    
        var dataString = 'message_input='+ message; 

        $.ajax({  
            type: "POST",  
            url: "messages.php",  
            data: dataString,  
            success: function() {  
                alert('Ok.');  
            }  
        });  
        return false;  
    });  
});  
};

• javascript
• jquery

• you can make use of both in one file. – Tushar Gupta - curioustushar Commented Sep 15, 2013 at 1:20
• 8 jQuery is javascript, and you can mix jQuery calls and pure Javascript as you wish, provided you are careful about the objects you are working with. – user1864610 Commented Sep 15, 2013 at 1:21
• Please explain what 'not working' means. What is happening? How does that differ from what you expect? – user1864610 Commented Sep 15, 2013 at 1:22

3 Answers 3

Long story short: You are doing something wrong. jQuery is a Javascript library, you cannot use jQuery without Javascript, therefore the two can be used in the same file.

Short story long: Your mistake might be that you try to use jQuery functions before jQuery is loaded. Or, you might have not initialized a variable. For example I do not see where you initialized the container variable. I understand you have a container div, but that's html. We are talking about JS objects now.

Your problem isn't your jQuery and JavaScript, being on the same page it's your code.

Event Handling Problems

If you use onclick it lets you apply only 1 handler to an event, so it's considered a best practice to use window.addEventListener or jquery's event handlers, which let you attach multiple listeners to the same object.

Event Propagation Problems

You return false in the end of your click event handler you're telling the browser to only do this and not let the event bubble up to any other things that might be listening for events on that element. In this case if you're trying to do 2 different things when someone presses the submit button (or whatever) it probably won't work because you've added return false. In this case it will probably block a form from submitting for example.

Incorrect DOMReady Wrapping

function submitMessage() {
    $(function() {
        /* ... */
    });
}

You don't need to wrap the inside of this function with $(function() {. Usually you wrap the entire file in that and you can still do that here (if it's needed)

You can use them in the same file. jQuery IS Javascript I would not, though, just because it can be kinda confusing. Here is a good link.