Search jQuery

jQuery Forum

Screen name:
queryj

queryj's Profile

19 Posts

99 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

Confused by the greater than sign in $('> ul > li', $transfer)
[8Replies]
- 14-Oct-2013 06:45 PM
- Forum: Using jQuery
I understand the greater than sign (>) means immediate child of the previous element, such as

table>tr>td, which means td(s) of tr of table. It is different from table>tbody>tr>td.

But what does the greater than sign mean when it is not preceded by anything like first greater than sign in
1. $('> ul > li', $transfer)
Can any one explain? Thank you!

My custom filter with background-color does not work
[7Replies]
- 13-Oct-2013 02:35 PM
- Forum: Using jQuery
So, I am playing with custom filter and followed the example here:

http://net.tutsplus.com/tutorials/javascript-ajax/quick-tip-dissecting-jquery-filters/

I am not sure why if I try to filter my p element through the css background-color attribute, it does not work.

Please take a look at the following jsfiddle of mine.

http://jsfiddle.net/ZU2Xj/2/

Any explanation why? Thank you!

jQuery UI Sortable in two different containers?
[6Replies]
- 11-Oct-2013 10:39 AM
- Forum: Using jQuery
I am using jquery ui's sortable through drag and drop.

Is there anyway to make items in two different containers drag n drop as if they were in the same container?

You will see what I mean by viewing the following jsfiddle:

http://jsfiddle.net/queryj/XdqqD/

As you can see, I have rows in both tbody and tfoot, and I've made all of them sortable through drag n drop.

But, I want to be able to drag a tr in tfoot and drop it into tbody and vice versa, will this be possible?

Thank you.

Should we check if an element exist before we act on it?
[9Replies]
- 10-Oct-2013 03:38 PM
- Forum: Using jQuery
This is a like a best practice question.

So, for example, if I want to do something to a tr in tfoot of my table, ① should I check if tfoot exists first?

I notice in my Firebug console, if I don't check if tfoot exists, I will get an error which says:

TypeError: $(...).find(...).val(...) is undefined

② Assuming it is always a good idea to check if an element exists before we act on it, then what is the best way to check if it exists?

ⓐ if ($('tfoot')) ?
ⓑ if ($('tfoot').length > 0) ?
ⓒ if ($('tfoot') === 'object') ?
ⓓ if ($('tfoot') !== 'undefined')?

Does the jquery ui library slice images?
[1Reply]
- 10-Oct-2013 09:23 AM
- Forum: Using jQuery UI
First go to http://jqueryui.com/sortable/ in FireFox.

Aim your cursor at the drag handle image in, for example, Item 1 and right click. And then click View Backgound Image.

You will be directed to the png file located at:\

http://code.jquery.com/ui/1.10.3/themes/smoothness/images/ui-icons_888888_256x240.png

And you will see that the drag handle image in Item 1 through 7 is located at the 4th row and the 9th column in the png image above.

So, how do they chop off that handle icon off the png image and use it as the drag handle?

Am I misunderstanding the trick? Or is it some kind of new technology I am unaware of? Please help me understand it. Thank you.

The minified version is very slow, whereas the debug version is much faster
[6Replies]
- 07-Oct-2013 08:44 PM
- Forum: Using jQuery
I know this sounds counter-intuitive, but I did notice it. In my asp.net web application, if I use the jquery min.js version, the page loads really slow, and firefox literally asks me if I want to stop the script from running.

But if I use the full, debug version, firefox never complains. Yes, my web page has a lot of jquery code.

Can anybody explain why? Thank you.

Map over jQuery in case of overwrite
[2Replies]
- 03-Oct-2013 09:27 AM
- Forum: Using jQuery
At the top of the latest jQuery source code, you can see the following few lines:
1. ```
// Map over jQuery in case of overwrite 
```
```
_jQuery = window.jQuery, 
```
```
// Map over the $ in case of overwrite 
```
```
_$ = window.$,
```
I don't understand what they do. Neither _jQuery nor _$ is used in the source code. Any idea? Thank you!

Can an event handler use a global variable?
[9Replies]
- 25-Sep-2013 11:13 AM
- Forum: Using jQuery
I am a little confused about this. Strictly speaking, it is not a global variable, which you will see below.

Suppose I have a bunch of input elements on my web form, and I need to wire up change event handler to each of them. And each of them will use a value from a text box.
1. <p>A value that will be used by change event of a bunch of input elements that follow.</p>
  <input type="text" id="someValue" />
  
  <p>Below are some inputs of which change event will be wired.</p>
  
  <input type="text" id="input1" />
  <input type="text" id="input2" />
  <input type="text" id="input3" />
  
  $(function(){
  MyChangeEventHandlers();
  });
  
  function MyChangeEventHandlers()
  {
  var theImportantValue = $('#someValue').val();
  
  $('#input1').change(function(){
  var myValue = theImportantValue + ' something else';
  // do something else;
      });
  
  $('#input2').change(function(){
  var myValue = theImportantValue + ' something different than input1';
  // do something else;
      });
  
  $('#input3').change(function(){
  var myValue = theImportantValue + ' something different from either input1 or input2';
  // do something else;
      });
  }
Will this work?

The question is: When the change event of input1, input2 or input3 fires, will it be aware of the value cached in theImportantValue, which is obtained outside of the event handler?

I know that I can simply put var theImportantValue = $('#someValue').val(); inside each change event handler and no questions are asked, but I try my best not to repeat my code.

name: function() vs function name ()

[8Replies]

03-Sep-2013 08:23 AM
Forum: Using jQuery

A lot of jQuery functions are implemented as name: function () {}.

For example, the following is the definition of the jQuery function grep.

grep: function( elems, callback, inv ) { var retVal, ret = [], i = 0, length = elems.length; inv = !!inv; // Go through the array, only saving the items // that pass the validator function for ( ; i < length; i++ ) { retVal = !!callback( elems[ i ], i ); if ( inv !== retVal ) { ret.push( elems[ i ] ); } } return ret; },

Why not simply define it as

function grep( elems, callback, inv ) { var retVal, ret = [], i = 0, length = elems.length; inv = !!inv; // Go through the array, only saving the items // that pass the validator function for ( ; i < length; i++ ) { retVal = !!callback( elems[ i ], i ); if ( inv !== retVal ) { ret.push( elems[ i ] ); } } return ret; },

Some jQuery functions are indeed defined as function functionName(arguments) { body of function}.

What's the difference?

What's the 1-liner to retrieve table cell data into an array?
[2Replies]
- 30-Aug-2013 03:59 PM
- Forum: Using jQuery
I have a table with multiple columns and multiple rows.

td of the same column have the same css class.

Now, I want to get values of all td's of one column into an array.
1. <table>
2. <tr><td class="C1"></td><td class="C2"></tr>
3. <tr><td class="C1"></td><td class="C2"></tr>
4. <tr><td class="C1"></td><td class="C2"></tr>
5. <tr><td class="C1"></td><td class="C2"></tr>
6. </table>
The following will not work:
1. var myArray = $('.C1').text();
That will only give me a concatenated string of all the values in cells of column 1. I know I can iterate like so:
1. var myArray = new Array();
2. $('.C1').each(function(){
3. myArray.push($(this).text());
4. })
But, I am interested in a one-liner of code that does this.

Any idea?

Failure wiring change event handler through calculated css class
[6Replies]
- 12-Jul-2013 11:37 AM
- Forum: Using jQuery
I have a lot of textboxes in an html table. They have the same class name if they are in the same column. But they have different class name from textboxes in other columns. So like this:

textboxes in column 1 has class Column1TextBox
textboxes in column 2 has class Column2TextBox
textboxes in column 3 has class Column3TextBox

I need to wire change event handler to each of these textboxes.

So, I attempted to do it like so:
1. for (var i=1; i<$('table>th').length + 1; i++)
  {
  $('input.Column' + i + 'TextBox').change(function() { alert("Hooray!"}; );
  }
It does not work. Of course simply repetitively doing the following will work, no doubt about that.
1. $('input.Column1TextBox').change(function() { alert("Hooray!"}; );
2. $('input.Column2TextBox').change(function() { alert("Hooray!"}; );
3. $('input.Column3TextBox').change(function() { alert("Hooray!"}; );
4. $('input.Column4TextBox').change(function() { alert("Hooray!"}; );
5. $('input.Column5TextBox').change(function() { alert("Hooray!"}; );
I am trying to be less repetitive. Any ideas? Thanks.

What does $([]) do?
[9Replies]
- 18-Mar-2013 10:11 AM
- Forum: Using jQuery
I see it at here:

http://jqueryui.com/dialog/#modal-form

allFields = $( [] ).add( name ).add( email ).add( password ),

What does it do?

Thanks.

How to I re-use a short snippet of code?
[1Reply]
- 23-Oct-2012 10:11 AM
- Forum: Using jQuery
In my asp.net mvc web app, I display user input validation message like this:

$("#errormessage").html("Some message goes here.").addClass("error").show().delay(5000).fadeOut();

The underlined part never changes. I always apply my css class .error and always display it for 5 seconds and let it fade out.

How do I shorten the underlined part to something like highlightAndFadeOut(5000)?

Is this where user defined plugin comes to rescue? How? Thanks!

Problem using jqGrid with ASP.NET form application
[1Reply]
- 30-Aug-2012 04:49 PM
- Forum: Using jQuery Plugins
I am wondering if anyone here has successfully used jqGrid in asp.net form application. I am following the example here:

http://praveen1305.blogspot.com/2009/05/jqgrid-with-asp-net-web-forms.html

I have a button on the web form. Upon clicking, I try to load data into the jqGrid. I have my web method in Default.aspx.cs (NOT in a web service):

[WebMethod]
public static MainGrid GetDataForJqGrid(string sidx, string sord, int page, int rows)
{
// Contruct my MainGrid object and return it.
MainGrid grid = new MainGrid();
... ...
return grid;
}

In Default.aspx, I have this:

<input type="button" id="mybutton" value="Go">

<table id="mygrid"> </table>
<div id="pager"> </div>

$().ready(function () {

$("#mybutton").click(function () {

$("#mygrid").jqGrid({
url: "/Default.aspx/GetDataForJqGrid",
datatype: 'json',
mtype: 'POST', // GET doesn't work either.
colNames: [ ... ... ],
colModel: [...... ...... ],
pager: $("#pager"),
rowNum: 10,
rowList: [5, 10, 20, 50],
sortname: "Name",
sortorder: "asc",
viewrecords: true,
gridComplete: function () { },
height: "100%",
autowidth: true,
caption: "My Grid Data"
}).navGrid("#pager", { edit: false, add: false, del: false, search: false });
});

GetDataForJqGrid method never gets hit in debug mode. So obviously I get an empty grid in the web form.

Has anyone successfully used jqGrid with your asp.net web form application? How to you have jqGrid post to your server side method? Do I have to use a web service? Please share your thoughts, thank you.

Button's click event fires, but can't trigger ajax call
[4Replies]
- 19-Aug-2012 09:02 PM
- Forum: Using jQuery
In a page of my asp.net mvc website, I load data into a jqGrid when the page loads, works perfectly without any problem.

Now I added a button for users to search employees by last name. The click event fires, because I can see my alert("Last name is " + lastName) popup. But the ajax call is ignored.

<input type="text" id="keyword" />
<input type="button" id="search" value="Search" />

$(document).ready(function () {

$("#search").click(function () {
var keyword = $.trim($("#keyword").val());
//alert("Last name is " + keyword);
$.ajax({
url: '/Path/To/WebMethod/',
dataType: 'json',
type: 'POST',
success: function (result) {
...
...
});

As I said, the alert shows up just fine (I have commented it out for this post). But the ajax call that follows never gets triggered off.

I searched and also tried $("#button").on("click", function() { //blah blah }); It still does not work.

jqGrid: possible to re-assign colNames and colModel upon paging?
[1Reply]
- 17-Aug-2012 10:38 AM
- Forum: Using jQuery Plugins
Hi jqGrid users:

My colNames and colModel change upon each paging. If you wonder why, it is because the grid data comes from dynamic crosstab, so I never know in advance how many columns I will have.

I do know the maximum number of columns I can have.

So, here is what I am doing: Get all possible column names into colNames (and colModel) and feed it to my jqGrid.

In loadComplete (or gridComplete), I code to hide those columns that do not contain data.

Then in onPaging, I code to show all colNames.

This works Okay.

But, if would be nicer if I can re-assign colNames and colModel to jqGrid upon paging, something like this:
1. onPaging: function (pgButton) {
  //$.ajax call to get colNames and colModel and assign them to this current jqGrid
  }
Is there anyway to do this with jqGrid?

Error in jquery.ui.core.js, line 209?
[4Replies]
- 15-Aug-2012 04:26 PM
- Forum: Using jQuery UI
I use jqGrid-4.3.3 in my asp.net mvc 3 app with jquery-ui-1.8.21.custom package. When I run my website in IE8, I got this error in an IE pop:

'3' is null or not an object in jquery.ui.core.js, line 209 character 3, which I show here:

function visible( element ) {
return !$( element ).parents().andSelf().filter(function() {
return $.curCSS( this, "visibility" ) === "hidden" ||
$.expr.filters.hidden( this );
}).length;
}

$.extend( $.expr[ ":" ], {
data: function( elem, i, match ) {
return !!$.data( elem, match[ 3 ] ); // This is line 209.
},

focusable: function( element ) {
return focusable( element, !isNaN( $.attr( element, "tabindex" ) ) );
},

tabbable: function( element ) {
var tabIndex = $.attr( element, "tabindex" ),
isTabIndexNaN = isNaN( tabIndex );
return ( isTabIndexNaN || tabIndex >= 0 ) && focusable( element, !isTabIndexNaN );
}
});

How to retrieve string dynamically generated on the server side?
[24Replies]
- 16-Dec-2010 10:53 AM
- Forum: Using jQuery
I am an ASP.NET developer and I am new to jQuery.

From WebForm1.aspx, I have successfully retrieved a string that is dynamically generated in WebForm2.aspx and spit out to a Literal control in a div. This is what I did.

//In WebForm1.aspx, I have:
1. $.post("WebForm2.aspx", { para1: "value1", para2: "value2" },
2. function(data) { $("#mydiv").html($("div#div1", data).html()) });
That's pretty simple and easy to understand for you jQuery gurus out there.

Now, I am trying to do the same thing within the single web form. That is, in WebForm1.aspx, I have this jQuery script to post to the same web form (i.e., WebForm1.aspx), but it is not working. Postback works OK, but I am not able to retrieve the dynamically generated string and spit it out to mydiv.

What's the jQuery way to do this? Any example? I searched, but I've only found examples which try to get static string values, which I know how to do. Thank you.

$.post("...") in dynamically created javascript code does not execute
[0Replies]
- 02-Nov-2010 03:54 PM
- Forum: Using jQuery
In my asp.net web application, my code-behind spits out the following Javascript function for a segment of the text in a web form. When clicking on that text, I want to fire this dynamically generated MyFunction function.

function MyFunction()
{
   debugger;
   $.post("MyWebForm.aspx");
}

I put a break point in the Page_Load event handler in MyWebForm.aspx.cs, but the breakpoint isn't hit. When I debug it, by putting "debugger" before the jQuery ajax post as you seen above, I do see that it goes through this line: $.post("MyWebForm.aspx"); but it does not post to MyWebForm.aspx.

If I hard code this MyFunction in my web form, and when I click on it, it does post to MyWebForm.aspx. So, I am pretty sure it has something to do with MyFunction being dynamically generated.

I have to generate MyFunction dynamically from my code behind, so please don't ask me not to do it.

I am new to jQuery, but pretty good in ASP.NET development.

If you could share your ideas, thank you very much.

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend