use jquery append function

  • Resolved T.oby

    (@toby-1)


    12 years, 1 month ago

    Hi, I am still a bit confused of using jquery in WordPress. I found a method to wrap the $ shortcut to use jquery (jquery noConflict wrappers). For the simple task of appending a table I tried the following example which unfortunately did not work:

    <table id="table1">
<thead><th>col1</th></thead>
<tbody></tbody>
</table>
<script>
var table = document.getElementById('table1');
(function($) {
  $(table).find(tbody).append( "<tr><td>data1</td></tr>" );
})(jQuery);
</script>

    (The example only shows the second way of wrapping the $ operator. I also tried the first which did not work.)

    Not sure if it helps but a more simple example without a table worked:

    <p>I would like to say: </p>
</div>
<script>
(function($) {
  $( "p" ).append( "<strong>Hello</strong>" );
})(jQuery);
</script>

    Any help is highly appreciated. Thanks.

    Toby

Viewing 7 replies - 1 through 7 (of 7 total)
  • Thread Starter T.oby

    (@toby-1)

    12 years, 1 month ago

    A slimmer version of the code above:

    $("#table1 tbody").append("<tr><td>data1</td></tr>");

    works in a jsfiddle example. However not in WordPress.

    Thanks for any help

    Moderator bcworkz

    (@bcworkz)

    12 years, 1 month ago

    The first example without the wrapper does not work in jsfiddle either. Have you tried the last example in the wrapper?

    For simple code just replace the $ with jQuery and forget the wrapper.
    jQuery("#table1 tbody").append("<tr><td>data1</td></tr>");

    Thread Starter T.oby

    (@toby-1)

    12 years, 1 month ago

    Thanks! I have tried all three versions (two wrappers and no wrapper) with the last example, which did not work. I also tried deactivating all plugins to test it.

    Moderator bcworkz

    (@bcworkz)

    12 years, 1 month ago

    Did you remember to enqueue the jQuery library? Are you using the correct action hook to do so? Also check your page HTML source to confirm that it is properly referenced.

    FYI, I placed your first example code on a WP page that has jQuery loaded, then substituted the example code from my previous post for the wrapper code. The page displayed text exactly as it appeared in jsfiddle.

    I saw all your posts in your other thread. I suspect your issues are related, I’m putting off studying your other posts until this part is resolved, as it may resolve both.

    Thread Starter T.oby

    (@toby-1)

    12 years, 1 month ago

    Thanks! I created a file called code.js with:

    jQuery("#table1 tbody").append("<tr><td>data1</td></tr>");

    and called it in WP with:

    <script type="text/javascript" src="/code.js"></script>

    This worked and I did not have to include any enqueues in my functions.php. However doing the same for the simple click button example (use jquery post onsubmit function) this did not work. I also tried in the button click example to enqueue jquery and add a hook for the script (not sure if I did it correctly).

    Thanks for your help

    Moderator bcworkz

    (@bcworkz)

    12 years ago

    Perhaps you didn’t have to enqueue, but that is correct way to do it, especially with external files. Not enqueuing seems to work for short code snippets, but eventually fails as the code gets more complex. Enqueuing external files will work for the most complex code, or the simplest, but it’s not that hard to get it wrong so it doesn’t work.

    Be sure to specify array(jquery) as the dependency parameter, and be sure you are using the correct hook for where the code is being executed: front end, back end, and login all have their own action hooks. If you’re not sure, post your enqueue code so I can have a look. Let me know where the code is to be applied.

    Finally, examine the page HTML source in your browser to ensure the reference path to the external file is correct.

    This all applies to your onsubmit problem as well, I’m still going to delay studying that problem until you are able to properly enqueue this append code and confirm it’s working.

    Thread Starter T.oby

    (@toby-1)

    12 years ago

    Thanks for your detailed answer. For the table example it only worked when I put the code in the file. But I did not have to do any hooks. For the other code with the button click example my code was wrong. I should have only used jQuery(“button”).click() and put the code after the button. Thanks for your help!

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘use jquery append function’ is closed to new replies.

Tags