- Screen name: abramhum
abramhum's Profile
16 Posts
24 Responses
0
Followers
Show:
- Expanded view
- List view
Private Message
- Hi:I hope to implement an singleton to replace the usage of $(this); following is my code snippet
- jQuery.single = (function (element) {
- var collection = jQuery([1]);
- return function (element) {
- collection[0] = element;
- return collection;
- };
- });
- $('#btnTestSingle').bind('click', function () {
- var html = jQuery.single(this).next().html();
- console.log(html);
- return false;
- });
however the error message show the next() is not a function.Is there any instruction can help to fix that, thanks a lot.- 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:- <asp:TextBox ID="txbPerFName" TabIndex="1" runat="server" Width="70px" Enabled="false" CssClass="handleTooltip">
- </asp:TextBox>
- $(".handleTooltip.disabled").on({
- "click": function () {
- console.log("testok");
- console.log($(this).prop("disabled"));
- if ($(this).prop("disabled")) {
- $(this).tooltip({ items: ".handleTooltip", content: "Check Item" });
- $(this).tooltip("option", "position", { my: "right-3 top-15", at: "left bottom" });
- $(this).tooltip("open");
- }
- },
- "mouseout": function () {
- console.log("testdisableok");
- if ($(this).prop("disabled")) {
- $(this).tooltip("disable");
- }
- }
- });
Is that possible for jQuery to get the click event for an diabled html element?Thanks a lot.- Hi:I meet a problem about how to get the x-template from html file.the following is my x-template code snippet
- <script type="text/x-template" id="TableTemplate">
- <thead>
- <tr>
- <th width="250px">Model</th>
- <th width="250px">Name</th>
- <th width="70px">Share</th>
- <th width="150px">Price Range</th>
- <th width="150px">Brand</th>
- <th width="100px">Options</th>
- </tr>
- </thead>
- <tbody>
- <tr propertyName="trModel">
- <td><span propertyName="Model"></span>
- </td>
- <td><span propertyName="Name"></span></td>
- <td>
- <button type="button" propertyName="btnName" onclick="doFunction();">Try</button>
- </td>
- <td><span propertyName="PriceRange"></span></td>
- <td><span propertyName="Brand"></span></td>
- <td><select propertyName="Options"></select></td>
- </tr>
- </tbody>
- </script>
And I store the upper code in a templates.html, and then try following code:- $.get('./templates.html', function(template) {
- });
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.- Hi:I recently read the codes in bootstrap, and see the codes snippet as following:
- +function ($) {...}(jQuery);
the main problem is I didn't see +function before, and also can not find out anyexplain about this usage, what is that means, and when to use it.Is there any material about that? Thanks a lot.- Hi:I have a problem about deep copy. Instead of using javascript slice(1), is there anyother way to deep copy a string via jQuery, such as
- var str=deepcopy(old_string)
Thanks a lot.- 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, butit indeed a huge work. I didn't see a book really analyze it in deep. And furthermore, I can't makesure it really can help me to know jQuery better. For me, jQuery Code is still many unknown andpowerful, like some issues about promises using.So my problem is, is reading V8 really help to understand more about javascript, and can thenhelp to lean jQuery Code inside more? And if yes, how to do a right step to learn them.Thanks a lot.
- 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:- 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"
]
}
]
}
};
- $("#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); - ......//the same as ajax success part
it working, but the problem is why it can work, because if I just using- 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.
- Hi:
I have a problem about the ajax and function closure.
The following is my code snippets.- 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);
}
it work well, just like following:- Handler(6, 1).then(function (data) {
var cs = JSON.parse(data.d);
}
- 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:- 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:- <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:- 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.- 22-Oct-2017 10:04 PM
- Forum: Using jQuery
Hi:
I meet a problem when using selector. The code snippet is as following:- var nodeID = document.getElementById(nodeid);
if (nodeID != null) {
var handling = $("#" + nodeid);
handling .empty();
nodeID.parentElement.removeChild(nodeID);
}
- handling.parentElement.removeChild(nodeID);
is there any way to call javascript prototype function when using selector,
thanks a lot.- I have a problem about the usage of bind function. Here is the example:
- // 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 :
- 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.
- 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:- 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 );
- $('<a>', {.....} )
is anyone know the reason. Thank a lot.- 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:- 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;
});
},
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- 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- 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 toinvoke each function in treetable individually.The main code snippet is as following:- $.fn.treetable = function(method) {
- if (methods[method]) {
- return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
- } else if (typeof method === 'object' || !method) {
- return methods.init.apply(this, arguments);
- } else {
- return $.error("Method " + method + " does not exist on jQuery.treetable");
- }
- };
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 andverbose. Something like that:- $.fn.myownfunction=function(options)
- {
- this.treetable(options)
- }
Seems useful, but It means I can not add my own options in initial step. Otherwise, I need to do the same things like- $.fn.myownfunction=function(method)
- {
- if (methods[method]) {
- return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
- } else if (typeof method === 'object' || !method) {
- return methods.init.apply(this, arguments);
- } else {
- return $.error("Method " + method + " does not exist on jQuery.myownfunction");
- }
- }
- methods = {
- init:function(options, force){
- ....
- ......
- this.treetable(options, force);
- }
- otherfunction:
- .....
- ..............
- }
A work around, but not effectively. Is there any other good way to fix the subject? thanks a lotHi:
I try to develop an template to add table automatically, and meeting an problem,
my code snippet is as following:
<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
- 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.
- Dear all:I try to improve the ability of javascript, and meet a problem about closure, like following example:
- function Y(f) {
- return ((function(x) {
- return f(function(v) {
- return x(x)(v);
- });
- })(function(x) {
- return f(function(v) {
- return x(x)(v);
- });
- }));
- }
- var factorial = Y(function(fac) {
- return function(n) {
- return (n == 0 ? 1 : n * fac(n - 1));
- }
- });
- 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 confuseabout 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 andmake it work well. Is any one know the exact answer for that, and how to make that, thanks a lot.- «Prev
- Next »
- // Parent class
- this.indenter.html(this.expander);
Moderate user : abramhum - var Handler = function (size, cur) {
- function getNodeViaAjax(parentNodeID) {
© 2013 jQuery Foundation
Sponsored by
and others.