jQuery Forum

using singleton to replace $(this)
[7Replies]
- 20-Jun-2019 10:50 PM
- Forum: Using jQuery
Hi:

I hope to implement an singleton to replace the usage of $(this); following is my code snippet
2. jQuery.single = (function (element) {
3. var collection = jQuery([1]);
4. return function (element) {
5. collection[0] = element;
6. return collection;
8. };
9. });
11. $('#btnTestSingle').bind('click', function () {
12. var html = jQuery.single(this).next().html();
13. console.log(html);
14. return false;
15. });
however the error message show the next() is not a function.
Is there any instruction can help to fix that, thanks a lot.

How to get click event for an diabled html element
[3Replies]
- 18-Feb-2019 08:58 PM
- Forum: Using jQuery UI
Hi:
I try using jQuery to get the click event for an diabled html element, but it seems not work.
The code snippet is following:
2. <asp:TextBox ID="txbPerFName" TabIndex="1" runat="server" Width="70px" Enabled="false" CssClass="handleTooltip">
3. </asp:TextBox>
5. $(".handleTooltip.disabled").on({
6. "click": function () {
7. console.log("testok");
8. console.log($(this).prop("disabled"));
9. if ($(this).prop("disabled")) {
10. $(this).tooltip({ items: ".handleTooltip", content: "Check Item" });
11. $(this).tooltip("option", "position", { my: "right-3 top-15", at: "left bottom" });
12. $(this).tooltip("open");
13. }
14. },
15. "mouseout": function () {
16. console.log("testdisableok");
17. if ($(this).prop("disabled")) {
18. $(this).tooltip("disable");
19. }
20. }
21. });
Is that possible for jQuery to get the click event for an diabled html element?
Thanks a lot.

How to get x-template from html file
[5Replies]
- 02-Aug-2018 10:38 PM
- Forum: Using jQuery
Hi:
I meet a problem about how to get the x-template from html file.
the following is my x-template code snippet
2. <script type="text/x-template" id="TableTemplate">
3. <thead>
4. <tr>
5. <th width="250px">Model</th>
6. <th width="250px">Name</th>
7. <th width="70px">Share</th>
8. <th width="150px">Price Range</th>
9. <th width="150px">Brand</th>
10. <th width="100px">Options</th>
11. </tr>
12. </thead>
14. <tbody>
15. <tr propertyName="trModel">
16. <td><span propertyName="Model"></span>
17. </td>
18. <td><span propertyName="Name"></span></td>
19. <td>
20. <button type="button" propertyName="btnName" onclick="doFunction();">Try</button>
21. </td>
22. <td><span propertyName="PriceRange"></span></td>
23. <td><span propertyName="Brand"></span></td>
24. <td><select propertyName="Options"></select></td>
25. </tr>
26. </tbody>
28. </script>
And I store the upper code in a templates.html, and then try following code:
2. $.get('./templates.html', function(template) {
4. });
But I didn't know how to do the next step to get the exact DOM element x-template from templates.html.
Is anyone know how to make that, thanks a lot.

About the usage of +function ($) {...}(jQuery);
[3Replies]
- 10-Jun-2018 09:06 PM
- Forum: Using jQuery
Hi:
I recently read the codes in bootstrap, and see the codes snippet as following:
1. +function ($) {...}(jQuery);
the main problem is I didn't see +function before, and also can not find out any
explain about this usage, what is that means, and when to use it.
Is there any material about that? Thanks a lot.

how to using jQuery to meet a string deep copy
[3Replies]
- 27-Dec-2017 06:44 PM
- Forum: Using jQuery
Hi:

I have a problem about deep copy. Instead of using javascript slice(1), is there any
other way to deep copy a string via jQuery, such as
1. var str=deepcopy(old_string)
Thanks a lot.

About jQuery Code inside learning and V8
[4Replies]
- 17-Nov-2017 10:10 AM
- Forum: Using jQuery
Hi:

I try to learn more jQuery Code inside in these days, and recently find some issues about V8.
Some How, some people suggest reading V8 can help more understanding about javascript, but
it indeed a huge work. I didn't see a book really analyze it in deep. And furthermore, I can't make
sure it really can help me to know jQuery better. For me, jQuery Code is still many unknown and
powerful, like some issues about promises using.
So my problem is, is reading V8 really help to understand more about javascript, and can then
help to lean jQuery Code inside more? And if yes, how to do a right step to learn them.
Thanks a lot.

About Ajax and echo/json/ problem
[2Replies]
- 02-Nov-2017 08:53 PM
- Forum: Using jQuery
Hi:
I meet a problem about the usage of Ajax when seeing the example about treetable, the code example
is in http://jsfiddle.net/djlerman/bbj8k9pe/, and the main problem is about Ajax and url: '/echo/json/',
the code snippet is as following:
1. function getNodeViaAjax(parentNodeID) {
      $("#loadingImage").show();
      debugger;
      // ajax should be modified to only get childNode data from selected nodeID
      // was created this way to work in jsFiddle
      $.ajax({
          type: 'POST',
          url: '/echo/json/',
          data: {
              json: JSON.stringify( jsonData )
          },
          success: function(data) {
              $("#loadingImage").hide();
  
              var childNodes = data.nodeID[parentNodeID];
  
              if(childNodes) {
                  var parentNode = $("#example-basic").treetable("node", parentNodeID);
  
                  for (var i = 0; i < childNodes.length; i++) {
                      var node = childNodes[i];
  
                      var nodeToAdd = $("#example-basic").treetable("node",node['ID']);
  
                      // check if node already exists. If not add row to parent node
                      if(!nodeToAdd) {
                          // create row to add
                          var row ='<tr data-tt-id="' +
                              node['ID'] +
                              '" data-tt-parent-id="' +
                              parentNodeID + '" ';
                          if(node['childNodeType'] == 'branch') {
                              row += ' data-tt-branch="true" ';
                          }
  
                          row += ' >';
  
                          // Add columns to row
                          for (var index in node['childData']) {
                              var data = node['childData'][index];
                              row += "<td>" + data + "</td>";
                          }
  
                          // End row
                          row +="</tr>";
  
                          $("#example-basic").treetable("loadBranch", parentNode, row);
                      }
  
                  }
  
              }
  
          },
          error:function(error){
              $("#loadingImage").hide();
              alert('there was an error');
          },
          dataType: 'json'
      });
  }
          var jsonData = {
              "nodeID": {
                  "1": [
  
                     {
                         "ID": "1.1",
                         "childNodeType": "branch",
                         "childData": [
                           "1.1: column 1",
                           "1.1: column 2"
                         ]
                     },
                    {
                        "ID": "1.2",
                        "childNodeType": "leaf",
                        "childData": [
                          "1.2: column 1",
                          "1.2: column 2"
                        ]
                    },
                    {
                        "ID": "1.3",
                        "childNodeType": "leaf",
                        "childData": [
                          "1.3: column 1",
                          "1.3: column 2"
                        ]
                    }
  
                  ],
                  "1.1": [
  
                      {
                          "ID": "1.1.1",
                          "childNodeType": "leaf",
                          "childData": [
                            "1.1.1: column 1",
                            "1.1.1: column 2"
                          ]
                      },
                      {
                          "ID": "1.1.2",
                          "childNodeType": "leaf",
                          "childData": [
                            "1.1.2: column 1",
                            "1.1.2: column 2"
                          ]
                      }
  
                  ],
                  "2": [
  
                      {
                          "ID": "2.1",
                          "childNodeType": "leaf",
                          "childData": [
                            "2.1: column 1",
                            "2.1: column 2"
                          ]
                      },
                      {
                          "ID": "2.2",
                          "childNodeType": "leaf",
                          "childData": [
                            "2.2: column 1",
                            "2.2: column 2"
                          ]
                      },
                      {
                          "ID": "2.3",
                          "childNodeType": "leaf",
                          "childData": [
                            "2.3: column 1",
                            "2.3: column 2"
                          ]
                      }
  
                  ],
                  "3": [
  
                      {
                          "ID": "3.1",
                          "childNodeType": "leaf",
                          "childData": [
                            "3.1: column 1",
                            "3.1: column 2"
                          ]
                      },
                      {
                          "ID": "3.2",
                          "childNodeType": "leaf",
                          "childData": [
                            "3.2: column 1",
                            "3.2: column 2"
                          ]
                      },
                      {
                          "ID": "3.3",
                          "childNodeType": "leaf",
                          "childData": [
                            "3.3: column 1",
                            "3.3: column 2"
                          ]
                      }
  
                  ]
              }
          };
And since '/echo/json/' is a specify way for jsfiddle, so I modify the codes as belows:
1. $("#loadingImage").show();
              var test = JSON.stringify(jsonData);
              var data = JSON.parse(test);
  
              // ajax should be modified to only get childNode data from selected nodeID
              // was created this way to work in jsFiddle
  
              $("#loadingImage").hide();
  
              var childNodes = data.nodeID[parentNodeID];
              if (childNodes) {
                  var parentNode = $("#example-basic").treetable("node", parentNodeID);
2. ......//the same as ajax success part
it working, but the problem is why it can work, because if I just using
1. var data = JSON.parse(jsonData);
it will not work. I don't know the exact reason, is any one know about that, thanks a lot.

About Ajax and function closure problem
[4Replies]
- 26-Oct-2017 05:54 AM
- Forum: Using jQuery
Hi:

I have a problem about the ajax and function closure.
The following is my code snippets.
1. var Handler = function (size, cur) {
                      return $.ajax({
                          type: 'POST',
                          dataType: "json", //for post method
                          url: './Demo.aspx/Demo',
                          contentType: 'application/json; charset=utf-8',
                          data: JSON.stringify({ p1: size, p2: cur }),
                          error: function (error) {
                              console.log(error);
                          }
                      });
                  }
  
  $.when(Handler(6, 1)).done(function (data) {
      var cs = JSON.parse(data.d);
  }
The problem is $.when is not working, and data in function(data) is undefined, but, if I just use $.then,
it work well, just like following:
1. Handler(6, 1).then(function (data) {
  var cs = JSON.parse(data.d);
  }
This is very strange, is there any reason for that. My jQuery version is 1.12. Thanks a lot.

about jquery.on in jquery.treetable.js
[2Replies]
- 22-Oct-2017 11:56 PM
- Forum: Using jQuery Plugins
Hi:

I dive into jquery.treetable.js source codes recently, and find a question about the using of $.on(), $.off().

The code snippet is as following:
JQuery Part:
1. this.indenter.html(this.expander);
  target = settings.clickableNodeNames === true ? this.treeCell : this.expander;
  
  target.off("click.treetable").on("click.treetable", handler);
  target.off("keydown.treetable").on("keydown.treetable", function (e) {
      if (e.keyCode == 13) {
          handler.apply(this, [e]); //keycode 13 = Enter
      }
  });
Html Part:
1. <table id="myTreeTable" border="1" style="border-collapse: collapse;" cellpadding="5" class="table treetable"><thead>
      <tr>
          <th>Model</th>
          <th>Name</th>
          <th>Share</th>
          <th>Price Range</th>
          <th>Brand</th>
      </tr>
  </thead><tbody><tr id="tree_tr_0" data-node-id="1" class="branch expanded">
      <td columname="Model"><span class="indenter" style="padding-left: 0px;"><a href="#" title="Closing"> </a></span>Iphone 18</td>
      <td columname="Name">iOS</td>
      <td>
      <button id="btnCreateTreeTable" type="button">Try</button>
      </td>
      <td columname="Price Range">$800 - $1000</td>
      <td columname="Brand">Apple</td>
  </tr><tr id="tree_tr_1" data-node-id="2" data-parent-id="1" class="leaf collapsed" style="display: table-row;">
      <td columname="Model"><span class="indenter" style="padding-left: 19px;"></span>Iphone 18</td>
      <td columname="Name">iOS</td>
      <td>
      <button id="btnCreateTreeTable" type="button">Try</button>
      </td>
      <td columname="Price Range">$800 - $1000</td>
      <td columname="Brand">Apple</td>
  </tr><tr id="tree_tr_2" data-node-id="3" class="leaf collapsed">
      <td columname="Model"><span class="indenter" style="padding-left: 0px;"></span>Lumia </td>
      <td columname="Name">Windows Phone</td>
      <td>
      <button id="btnCreateTreeTable" type="button">Try</button>
      </td>
      <td columname="Price Range">$200 - $600</td>
      <td columname="Brand">Nokia</td>
  </tr><tr id="tree_tr_3" data-node-id="4" class="leaf collapsed">
      <td columname="Model"><span class="indenter" style="padding-left: 0px;"></span>Nexus 23</td>
      <td columname="Name">Android</td>
      <td>
      <button id="btnCreateTreeTable" type="button">Try</button>
      </td>
      <td columname="Price Range">$600 - $800</td>
      <td columname="Brand">Samsung</td>
  </tr></tbody></table>
And I try to use following codes to replace the origin one:
1. target.off("click", "#myTreeTable").on("click", "#myTreeTable", handler);
  target.off("keydown", "#myTreeTable").on("keydown", "#myTreeTable", function (e) {
      if (e.keyCode == 13) {
          handler.apply(this, [e]); //keycode 13 = Enter
      }
  });
But the result is the function failed to bind to target, it not working when click the
<a href="#" title="Closing">...</a> . I don't know why it not working well. My jQuery version is v1.12.4. Is there any one know the exact answer? Thanks a lot.

How to call javascript original function while using selector
[3Replies]
- 22-Oct-2017 10:04 PM
- Forum: Using jQuery
Hi:

I meet a problem when using selector. The code snippet is as following:
1. var nodeID = document.getElementById(nodeid);
  if (nodeID != null) {
      var handling = $("#" + nodeid);
      handling .empty();
      nodeID.parentElement.removeChild(nodeID);
  }
I hope I can use
1. handling.parentElement.removeChild(nodeID);
but it in fact not working and return error.
is there any way to call javascript prototype function when using selector,
thanks a lot.

About the usage of jQuery bind function
[5Replies]
- 16-Oct-2017 06:34 AM
- Forum: Using jQuery
I have a problem about the usage of bind function. Here is the example:
1. // Parent class
  function Widget(width, height) {
  this.width = width || 50;
  this.height = height || 50;
  this.$elem = null;
  }
  
  Widget.prototype.render = function($where) {
  if (this.$elem) {
      this.$elem.css({
        width: this.width + "px",
        height: this.height + "px"
      }).appendTo($where);
  }
  };
  
  // Child class
  function Button(width, height, label) {
  // "super" constructor call
  Widget.call(this, width, height);
  this.label = label || "Default";
  this.$elem = $("<button>").text(this.label);
  }
  
  // make `Button` "inherit" from `Widget`
  Button.prototype = Object.create(Widget.prototype);
  // override base "inherited" `render(..)`
  Button.prototype.render = function($where) {
  // "super" call
  Widget.prototype.render.call(this, $where);
  this.$elem.click(this.onClick.bind(this));
  };
  
  Button.prototype.onClick = function(evt) {
  console.log("Button '" + this.label + "' clicked!");
  };
  
  $(document).ready(function() {
  var $body = $(document.body);
  var btn1 = new Button(125, 30, "Hello");
  var btn2 = new Button(150, 40, "World");
  btn1.render($body);
  btn2.render($body);
  });
The upper code snippet is from the book [You Don’t Know JS: this & Object Prototypes], and the problem is the code :
1. this.$elem.click(this.onClick.bind(this));
And the codes is put on https://jsfiddle.net/abramhum/k0btuvuz/ . The upper code can bind the Button.prototype.onClick to this.$elem, but I didn't know exactly how it works, and furthermore, since bind is depreciated and replaced by on, so, if I hope to use on to replace it, how to do that. Thanks a lot.

About the usage of selector in jquery.dataTables.js
[2Replies]
- 16-Oct-2017 04:01 AM
- Forum: Using jQuery Plugins
Hi:

I meet a problem when reading the source codes in jquery.dataTables.js.
I try to find out how this plugin add the pagination number and div to the table,
and then I see something strange which rarely to see, the code snippet is as
following:
1.     if ( btnDisplay !== null ) {
              node = $('<a>', {
                      'class': classes.sPageButton+' '+btnClass,
                      'aria-controls': settings.sTableId,
                      'aria-label': aria[ button ],
                      'data-dt-idx': counter,
                      'tabindex': settings.iTabIndex,
                      'id': idx === 0 && typeof button === 'string' ?
                          settings.sTableId +'_'+ button :
                          null
                  } )
                  .html( btnDisplay )
                  .appendTo( container );
The problem is the instruction following
1. $('<a>', {.....} )
the result is it set the attribute to a, but I doesn't see any explain about this usage,
is anyone know the reason. Thank a lot.

About the usage of jquery data() in treetable
[5Replies]
- 12-Oct-2017 12:12 AM
- Forum: Using jQuery Plugins
Hi:

I recently try to read source codes in jquery treetable in deep, and found some problems I don't know.
here is the problem about the usage of jquery data, and the code snippet is following:
1. init: function(options, force) {
        var settings;
  
        settings = $.extend({
          branchAttr: "ttBranch",
          clickableNodeNames: false,
          column: 0,
          columnElType: "td", // i.e. 'td', 'th' or 'td,th'
          expandable: false,
          expanderTemplate: "<a href='#'> </a>",
          indent: 19,
          indenterTemplate: "<span class='indenter'></span>",
          initialState: "collapsed",
          nodeIdAttr: "ttId", // maps to data-tt-id
          parentIdAttr: "ttParentId", // maps to data-tt-parent-id
          stringExpand: "Expand",
          stringCollapse: "Collapse",
  
          // Events
          onInitialized: null,
          onNodeCollapse: null,
          onNodeExpand: null,
          onNodeInitialized: null
        }, options);
  
        return this.each(function() {
          var el = $(this), tree;
  
          if (force || el.data("treetable") === undefined) {
            tree = new Tree(this, settings);
            tree.loadRows(this.rows).render();
  
            el.addClass("treetable").data("treetable", tree);
  
            if (settings.onInitialized != null) {
              settings.onInitialized.apply(tree);
            }
          }
  
          return el;
        });
      },
the main problem is about el.addClass("treetable").data("treetable", tree);
why it can store the tree data via data("treetable", tree), and when I use chrome to debug
this code snippet, i didn't see any data-treetable attribute in "this" instruction content, even
to tree data.
And then what's more, when I click and invoke function node, the code snippet as below
1. node: function(id) {
  return this.data("treetable").tree[id];
  },
it really get the data from this.data("treetable").tree[id], but still I can not find any info about that
from chrome debug tools. Is anyone know the reason and how it did , and what's its principle?
Thanks

About getting the method's properties in treetable
[4Replies]
- 29-Sep-2017 10:31 AM
- Forum: Developing jQuery Plugins
Hi:

I try to enclose treetable into my library, but there comes a problem about how to
invoke each function in treetable individually.
The main code snippet is as following:
2. $.fn.treetable = function(method) {
3. if (methods[method]) {
4. return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
5. } else if (typeof method === 'object' || !method) {
6. return methods.init.apply(this, arguments);
7. } else {
8. return $.error("Method " + method + " does not exist on jQuery.treetable");
9. }
10. };
And the main problems is it using methods[method] to map the options to individual function,
but if I hope to use its all function in my library via the same way, it will be duplicated and
verbose. Something like that:
2. $.fn.myownfunction=function(options)
3. {
4. this.treetable(options)
5. }
Seems useful, but It means I can not add my own options in initial step. Otherwise, I need to do the same things like
2. $.fn.myownfunction=function(method)
3. {
4. if (methods[method]) {
5. return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
6. } else if (typeof method === 'object' || !method) {
7. return methods.init.apply(this, arguments);
8. } else {
9. return $.error("Method " + method + " does not exist on jQuery.myownfunction");
10. }
11. }
13. methods = {
14. init:function(options, force){
15. ....
16. ......
17. this.treetable(options, force);
18. }
19. otherfunction:
20. .....
21. ..............
22. }
A work around, but not effectively. Is there any other good way to fix the subject? thanks a lot

About append funciton of template
[2Replies]
- 28-Sep-2017 04:45 AM
- Forum: Using jQuery
Hi:
I try to develop an template to add table automatically, and meeting an problem,
my code snippet is as following:
1. <div style="margin: 20px auto; width: 500px;">
      <table id="jsonTable2" border="1" style="border-collapse: collapse;" cellpadding="5" class="table">
  
      </table>
  </div>
  
  <script type="text/x-template" class="myTemplate">
              <thead>
                  <tr>
                      <th>Model</th>
                      <th>Name</th>
                      <th>Share</th>
                      <th>Price Range</th>
                      <th>Brand</th>
                  </tr>
              </thead>
  
              <tbody>
                   <tr>
                      <td columName="Model"></td>
                      <td columName="Name"></td>
                      <td columName="Share"></td>
                      <td columName="Price Range"></td>
                      <td columName="Brand"></td>
                  </tr>
              </tbody>
          </script>
And then when I using following jquery codes to add node to jsonTable2
1. var myTemplate = $($("script.myTemplate").html());
                      var mythread = myTemplate.clone(true);
                      var mythread2 = mythread.children("thead");
                      $("#jsonTable2").append(mythread2);
it fail, I just want to add each node individually, but things not go right way.
Is there any way to cover that, thanks a lot.

About javascript function closure
[4Replies]
- 25-May-2017 11:00 PM
- Forum: Getting Started
Dear all:

I try to improve the ability of javascript, and meet a problem about closure, like following example:
2. function Y(f) {
3. return ((function(x) {
4. return f(function(v) {
5. return x(x)(v);
6. });
7. })(function(x) {
8. return f(function(v) {
9. return x(x)(v);
10. });
11. }));
12. }
14. var factorial = Y(function(fac) {
15. return function(n) {
16. return (n == 0 ? 1 : n * fac(n - 1));
17. }
18. });
20. console.log( factorial(5));
I don't know how the function Y(f) works. I have add console.log to see the detail , but still confuse
about that, so I put some codes in jsfiddle, https://jsfiddle.net/abramhum/6uqpd28s/
and try to fill in the function by myself, but I found I don't know how to create this function and
make it work well. Is any one know the exact answer for that, and how to make that, thanks a lot.

Response title

Attachments

jQuery Forum

Activity Trend