Wicket
  1. Wicket
  2. WICKET-4252 Ajax refactoring
  3. WICKET-4236

Use JQuery as a backing library for Wicket's JavaScript code

    Details

    • Type: Sub-task Sub-task
    • Status: Resolved
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: 6.0.0-beta1
    • Fix Version/s: 6.0.0-beta1
    • Component/s: wicket, wicket-extensions
    • Labels:
      None

      Description

      wicket-ajax.js has accumulated a lot of custom written code to be able to serve the needs of Wicket Ajax behaviors and components.
      This custom javascript code can be greatly simplified by using any bigger JavaScript library that is specialized in handling browser differences.

        Issue Links

          Activity

          Martin Grigorov created issue -
          Martin Grigorov committed 1203152 (65 files)
          Reviews: none

          WICKET-4236 Use JQuery as a backing library for Wicket's JavaScript code

          wicket trunk
          Hide
          Peter Ertl added a comment - - edited

          Ok, I asked Martin a few questions and would to share his answers here:

          Q: what the heck does

          (function(undefined)

          { ... }

          ()

          do?

          A: it's a neat trick to get a reference to 'undefined' which for sure is undefined

          Q: what does the string literal

          'use strict';

          in the first line of a function do?

          A: it disables a few quirks in javascript and forces you to be a better programmer. see: http://stackoverflow.com/questions/1335851/what-does-use-strict-do-in-javascript-and-what-is-the-reasoning-behind-it


          Q: what does the leading semicolon at the beginning of the js file mean?

          A: http://stackoverflow.com/questions/1873983/what-does-the-leading-semicolon-in-javascript-libraries-do

          Show
          Peter Ertl added a comment - - edited Ok, I asked Martin a few questions and would to share his answers here: Q: what the heck does (function(undefined) { ... } () do? A: it's a neat trick to get a reference to 'undefined' which for sure is undefined — Q: what does the string literal 'use strict'; in the first line of a function do? A: it disables a few quirks in javascript and forces you to be a better programmer. see: http://stackoverflow.com/questions/1335851/what-does-use-strict-do-in-javascript-and-what-is-the-reasoning-behind-it Q: what does the leading semicolon at the beginning of the js file mean? A: http://stackoverflow.com/questions/1873983/what-does-the-leading-semicolon-in-javascript-libraries-do
          Martin Grigorov committed 1203187 (33 files)
          Reviews: none

          WICKET-4236 Use JQuery as a backing library for Wicket's JavaScript code

          Make it possible to override the backing library (jquery) and our implementations.
          This way is anyone ever wants to use YUI/ExtJS/Dojo/... instead of JQuery it will be possible.
          This way also the developer can setup a different version of JQuery.

          wicket trunk
          Martin Grigorov committed 1203201 (1 file)
          Reviews: none

          WICKET-4236 Use JQuery as a backing library for Wicket's JavaScript code

          Commit forgotten file

          Martin Grigorov committed 1203565 (2 files)
          Reviews: none

          WICKET-4236 Use JQuery as a backing library for Wicket's JavaScript code

          Replace the usage of Function.bind with jQuery.proxy()

          Martin Grigorov committed 1203607 (2 files)
          Martin Grigorov made changes -
          Field Original Value New Value
          Parent WICKET-4252 [ 12532151 ]
          Issue Type Improvement [ 4 ] Sub-task [ 7 ]
          Martin Grigorov committed 1204854 (23 files)
          Reviews: none

          WICKET-4236 Use JQuery as a backing library for Wicket's JavaScript code

          Rename Wicket.inCtx() to Wicket.bind() to be more close to the previous impl

          wicket trunk
          Martin Grigorov committed 1204912 (2 files)
          Reviews: none

          WICKET-4236 Use JQuery as a backing library for Wicket's JavaScript code

          Reimplement Wicket.Form.serializeInput() with jQuery.
          The difference in the test expectation is that jQuery doesn't encode '+' to '%20'

          Martin Grigorov committed 1204915 (1 file)
          Reviews: none

          WICKET-4236 Use JQuery as a backing library for Wicket's JavaScript code

          Reimplement Wicket.Form.serializeSelect() with jQuery.

          Martin Grigorov made changes -
          Link This issue is required by WICKET-1707 [ WICKET-1707 ]
          Martin Grigorov committed 1206826 (1 file)
          Reviews: none

          WICKET-4236
          Use JQuery as a backing library for Wicket's JavaScript code

          Pass the failure handler to W.Ajax.Request constructor
          Replace deprecated QUnit.equals() with .equal()

          Martin Grigorov committed 1206829 (4 files)
          Reviews: none

          WICKET-4236
          Use JQuery as a backing library for Wicket's JavaScript code

          Replace deprecated QUnit.equals() with .equal()

          Martin Grigorov committed 1206853 (2 files)
          Reviews: none

          WICKET-4236 Use JQuery as a backing library for Wicket's JavaScript code
          WICKET-4227 dropping ajax request causes componentnotfoundexception

          Martin Grigorov committed 1206855 (2 files)
          Reviews: none

          WICKET-4236
          Use JQuery as a backing library for Wicket's JavaScript code

          Fix the name of .js file for DebugWindow

          Hide
          Anton Vodonosov added a comment -

          About slow performance in WICKET-1707.

          I am having the same problem (testing with IE8), and after reading this ticket decided to compare performance with jQuery: jQuery.replaceWith(), and also variations suggested in http://bugs.jquery.com/ticket/7898.

          Results: replacing my table 10 times take 4 seconds for Wicket.replaceOuterHtml, and 10 seconds for any variation of jQuery methods. Mine jQuery version is 1.6.1.

          Show
          Anton Vodonosov added a comment - About slow performance in WICKET-1707 . I am having the same problem (testing with IE8), and after reading this ticket decided to compare performance with jQuery: jQuery.replaceWith(), and also variations suggested in http://bugs.jquery.com/ticket/7898 . Results: replacing my table 10 times take 4 seconds for Wicket.replaceOuterHtml, and 10 seconds for any variation of jQuery methods. Mine jQuery version is 1.6.1.
          Hide
          Martin Grigorov added a comment -

          Thanks for this reference!

          Did you try with empty() ? You sound like it didn't help for you. If this is the case then maybe jQuery guys need to know about it.
          The idea of this ticket is to delegate such problems to more experienced JS developers.

          Show
          Martin Grigorov added a comment - Thanks for this reference! Did you try with empty() ? You sound like it didn't help for you. If this is the case then maybe jQuery guys need to know about it. The idea of this ticket is to delegate such problems to more experienced JS developers.
          Hide
          Anton Vodonosov added a comment -

          Yes, I tried with empty(), but it my case it changes nothing.

          I also tried with native DOM: function replaceChild - it works faster.

          var elem = document.getElementById('id6d')
          var parent = elem.parentNode;
          parent.replaceChild($(gText).get(0), elem)

          Repeating this 10 times takes 2 seconds on my system (comparing to 4 seconds for Wicket.replaceOuterHtml and 10 seconds for jQuery methods)

          Show
          Anton Vodonosov added a comment - Yes, I tried with empty(), but it my case it changes nothing. I also tried with native DOM: function replaceChild - it works faster. var elem = document.getElementById('id6d') var parent = elem.parentNode; parent.replaceChild($(gText).get(0), elem) Repeating this 10 times takes 2 seconds on my system (comparing to 4 seconds for Wicket.replaceOuterHtml and 10 seconds for jQuery methods)
          Hide
          Martin Grigorov added a comment -

          Please attach your tests to the ticket.
          And update jQuery's ticket if you want.

          Show
          Martin Grigorov added a comment - Please attach your tests to the ticket. And update jQuery's ticket if you want.
          Hide
          Anton Vodonosov added a comment -

          reported this to jQuery http://bugs.jquery.com/ticket/7898 too.

          Show
          Anton Vodonosov added a comment - reported this to jQuery http://bugs.jquery.com/ticket/7898 too.
          Hide
          Anton Vodonosov added a comment - - edited

          I have a piece of HTML stored in global variable gText.

          Here are several functions which replace an element with ID 'id6d' by this HTML 10 times and display the total time.

          IE8, jQuery 1.6.1, Wicket 1.4.19.

          <code>
          // this takes 4 seconds
          function test() {
          var start = new Date().getTime();
          for (var i = 0; i < 10; i++)

          { Wicket.replaceOuterHtml(document.getElementById('id6d'), gText) }

          var end = new Date().getTime();
          alert('total time: ' + (end - start));
          }

          // this takes 10 seconds
          function test2() {
          var start = new Date().getTime();
          for (var i = 0; i < 10; i++)

          { $('#id6d').empty().replaceWith(gText); }

          var end = new Date().getTime();
          alert('total time: ' + (end - start));
          }

          // this takes 10 seconds
          function test3() {
          var start = new Date().getTime();
          for (var i = 0; i < 10; i++)

          { var elem = $('#id6d'); var parent = elem.parent(); elem.remove(); parent.append(gText); }

          var end = new Date().getTime();
          alert('total time: ' + (end - start));
          }

          // this takes 2 seconds
          function test4() {
          var start = new Date().getTime();
          for (var i = 0; i < 10; i++)

          { var elem = document.getElementById('id6d') var parent = elem.parentNode; parent.replaceChild($(gText).get(0), elem) }

          var end = new Date().getTime();
          alert('total time: ' + (end - start));
          }
          </code>

          Show
          Anton Vodonosov added a comment - - edited I have a piece of HTML stored in global variable gText. Here are several functions which replace an element with ID 'id6d' by this HTML 10 times and display the total time. IE8, jQuery 1.6.1, Wicket 1.4.19. <code> // this takes 4 seconds function test() { var start = new Date().getTime(); for (var i = 0; i < 10; i++) { Wicket.replaceOuterHtml(document.getElementById('id6d'), gText) } var end = new Date().getTime(); alert('total time: ' + (end - start)); } // this takes 10 seconds function test2() { var start = new Date().getTime(); for (var i = 0; i < 10; i++) { $('#id6d').empty().replaceWith(gText); } var end = new Date().getTime(); alert('total time: ' + (end - start)); } // this takes 10 seconds function test3() { var start = new Date().getTime(); for (var i = 0; i < 10; i++) { var elem = $('#id6d'); var parent = elem.parent(); elem.remove(); parent.append(gText); } var end = new Date().getTime(); alert('total time: ' + (end - start)); } // this takes 2 seconds function test4() { var start = new Date().getTime(); for (var i = 0; i < 10; i++) { var elem = document.getElementById('id6d') var parent = elem.parentNode; parent.replaceChild($(gText).get(0), elem) } var end = new Date().getTime(); alert('total time: ' + (end - start)); } </code>
          Martin Grigorov made changes -
          Status Open [ 1 ] Resolved [ 5 ]
          Resolution Fixed [ 1 ]

            People

            • Assignee:
              Martin Grigorov
              Reporter:
              Martin Grigorov
            • Votes:
              1 Vote for this issue
              Watchers:
              3 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved:

                Development