Include jQuery in JavaScript

Question

I've got two bits of code that I'd like to work together but I don't manage to integrate this jQuery snippet into the JavaScript correctly …

JavaScript:

(function(){

// Creates the plugin
tinymce.create('tinymce.plugins.mygallery', {

    // Creates control instances based on the control's ID.
    createControl : function(id, controlManager) {
        if (id == 'mygallery_button') {

            // Creates the button
            var button = controlManager.createButton('mygallery_button', {
                title : 'MyGallery Shortcode', // Title of the button
                image : '../wp-includes/images/smilies/icon_mrgreen.gif', // Path to the button's image
                onclick : function() {

                    // Triggers the thickbox
                    var width = jQuery(window).width(), H = jQuery(window).height(), W = ( 720 < width ) ? 720 : width;
                    W = W - 80;
                    H = H - 184;
                    tb_show( 'My Gallery Shortcode', '#TB_inline?width=' + W + '&height=' + H + '&inlineId=mygallery-form' );
                }
            });
            return button;
        }
        return null;
    }
});

// Registers the plugin
tinymce.PluginManager.add('mygallery', tinymce.plugins.mygallery);


// Executes this when the DOM is ready
jQuery(function(){


// Creates a form to be displayed everytime the button is clicked
    var form = jQuery('<div id="mygallery-form"><table id="mygallery-table" class="form-table">\
        <form id="myForm">\
            <div id="input1" style="margin-bottom:4px;" class="clonedInput">\
                Name: <input type="text" name="name1" id="name1" />\
            </div>\
            <div>\
                <input type="button" id="btnAdd" value="add another name" />\
                <input type="button" id="btnDel" value="remove name" />\
            </div>\
        </form>\

        </div>');

    […]
});
})()

jQuery:

$(document).ready(function() {
        $('#btnAdd').click(function() {
            var num     = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
            var newNum  = new Number(num + 1);      // the numeric ID of the new input field being added

            // create the new element via clone(), and manipulate it's ID using newNum value
            var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);

            // manipulate the name/id values of the input inside the new element
            newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum);

            // insert the new element after the last "duplicatable" input field
            $('#input' + num).after(newElem);

            // enable the "remove" button
            $('#btnDel').attr('disabled','');

            // business rule: you can only add 5 names
            if (newNum == 5)
                $('#btnAdd').attr('disabled','disabled');
        });

        $('#btnDel').click(function() {
            var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
            $('#input' + num).remove();     // remove the last element

            // enable the "add" button
            $('#btnAdd').attr('disabled','');

            // if only one element remains, disable the "remove" button
            if (num-1 == 1)
                $('#btnDel').attr('disabled','disabled');
        });

        $('#btnDel').attr('disabled','disabled');
});

FYI: The JS creates a popup with a form (WordPress) and with the jQuery snippet I'd like to implement the feature that the user can add more input fields dynamically.

Thanks for your help!

What's your question? Consider using jsfiddle.net to illustrate any errors you may have. — adamdport
– adamdport, Commented Sep 7, 2012 at 17:50
Just for reference.. There is no difference between jQuery and Javascript. They are in fact the same exact language. However jQuery is a library that is built off of Javascript, so you can easily develop the front end of your applications with little worry over compatibility issues, or having to spend a lot of time writing large chunks of code for what each function within jQuery does with a simple .functionName() So Putting jQuery in Javascript or Javascript in jQuery is a redundant question. — chris
– chris, Commented Sep 7, 2012 at 17:58

Lian · Accepted Answer · 2012-09-07 17:51:39Z

You can put the jQuery snippet after your javascript code. That shouldn't be the problem since your jQuery code is merely binding events.

However, I can't tell where #btnAdd and #btnDel are. The problem may be that the elements are created after the jQuery code is run, hence when you called this: $('#btnAdd').click(function(){...}); the element #btnAdd was not there.

Try this: $(document).on('click', '#btnAdd', function(){...});

This will bind the click event to document (which is always present) instead of #btnAdd. To improve the performance though, you should bind it to a parent of #btnAdd that you know for sure is present when document is ready.

Collectives™ on Stack Overflow

Include jQuery in JavaScript

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related