Can JQuery and Javascript be used in the same .js file?

Question

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;  
    });  
});  
};

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
– 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
– user1864610, Commented Sep 15, 2013 at 1:22

Lajos Arpad · Accepted Answer · 2013-09-15 01:31:25Z

2

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.

answered Sep 15, 2013 at 1:31

Lajos Arpad

80.3k42 gold badges122 silver badges234 bronze badges

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

Comments

Jamund Ferguson · Accepted Answer · 2013-09-15 02:55:24Z

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)

"and can't be used with others" - You can't have multiple onclick on the same element, but onclick can be used side by side with addEventListener().

Community · Accepted Answer · 2017-05-23 12:23:28Z

0

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.

edited May 23, 2017 at 12:23

CommunityBot

11 silver badge

answered Sep 15, 2013 at 1:25

tjons

4,7695 gold badges30 silver badges36 bronze badges

Collectives™ on Stack Overflow

Can JQuery and Javascript be used in the same .js file?

3 Answers 3

Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Linked

Related