Re: [jQuery] Re: Very Strange !!! The same HTML code works well, but append() it not !!!
Eric, you really need to put up a test page so we can try actually loading
it. Otherwise it's too hard to tell what might be wrong. I'm not even sure
what the problem is we're supposed to be looking at!
-Mike
On Mon, Dec 7, 2009 at 11:44 PM, Eric Zhong ericiszhongwen...@gmail.comwrote:
i have modified the code , but the result is the same, even if i write this
in one line !!! Help !!!
one line version:
html
head
script src=
http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js;/script
SCRIPT LANGUAGE=JavaScript
!--
$(function(){
// /*
var html_video ='table id=tb_all width=724pxtrtd
valign=toptable id=tb_video class=tb_widthtr
class=tb_headtdnbsp/tdtdfilename/tdtdlen(s)/tdtdsize(KB)/td/tr/table/td/tr/table';
$(body).append( html_video );
var data =
[
{name: 1, len: 432, size: 321},
{name: 2, len: 54543, size: 432},
{name: 3, len: 3243, size: 432},
{name: 4, len: 543, size: 432},
{name: 5, len: 543, size: 654},
{name: 6, len: 654, size: 654},
{name: 7, len: 765, size: 654},
{name: 8, len: 765, size: 765},
{name: 9, len: 53, size: 654}
];
var a = data;
if ( a != null ){
for(var i=0; ia.length; i++){
var d = a[i];
$(#tb_video).append('trtdinput type=checkbox
//tdtd' + d.name + '/tdtd' + d.len + '/tdtd' + d.size +
'/tdtr');
}
}
$(#tb_video).closest(tr).append('td width=80px
align=center style=vertical-align:topinput id=pl_bt_up type=button
value=↑ /input id=pl_bt_down type=button value=↓ //td');
// */
$(#pl_bt_up).click(function() {
var $all = $(#tb_video tr);
var $trs = $(#tb_video tr:has(input:checked));
if( $all.index($trs.get(0)) != 1 ){
$trs.each(function(){
$(this).prev().before($(this));
});
}
});
$(#pl_bt_down).click(function() {
var $all = $(#tb_video tr);
var $trs = $(#tb_video tr:has(input:checked));
if( $all.index( $trs.get($trs.length-1) ) != $all.length-1
){
for( i = $trs.length-1; i=0; i-- ) {
var $item = $( $trs.get(i) );
$item.insertAfter($item.next());
}
}
});
});
--
/SCRIPT
/head
body
!--
table id=tb_all width=724px
tr
td valign=top
table id=tb_video class=tb_width
tr class=tb_head
tdnbsp/td
tdfilename/td
tdlen(s)/td
tdsize(KB)/td
/tr
trtdinput type=checkbox
//tdtd1/tdtd222/tdtd432/td/tr
trtdinput type=checkbox
//tdtd2/tdtd333/tdtd543/td/tr
trtdinput type=checkbox
//tdtd3/tdtd444/tdtd654/td/tr
trtdinput type=checkbox
//tdtd4/tdtd555/tdtd765/td/tr
trtdinput type=checkbox
//tdtd5/tdtd666/tdtd876/td/tr
trtdinput type=checkbox
//tdtd6/tdtd777/tdtd432/td/tr
trtdinput type=checkbox
//tdtd7/tdtd888/tdtd543/td/tr
trtdinput type=checkbox
//tdtd8/tdtd999/tdtd265/td/tr
/table
/td
td width=80px align=center style=vertical-align:top
input id=pl_bt_up type=button value=↑ /
input id=pl_bt_down type=button value=↓ /
/td
/tr
/table
--
/body
/html
2009/12/8 seasoup seas...@gmail.com
javascript cant read strings over line breaks.
$(#tb_video).append(' \
tr \
tdinput
type=checkbox //td \
td' + d.name + '/td \
td' + d.len + '/td \
td' + d.size + '/td \
tr ');
must be
$(#tb_video).append('tr'+
'tdinput type=checkbox
//td'+
'td' + d.name + '/td'+
'td' + d.len + '/td'+
'td' + d.size + '/td'+
'tr ');
On Dec 7, 6:30 pm, Eric Zhong
Re: [jQuery] Re: Very Strange !!! The same HTML code works well, but append() it not !!!
Hi Eric,
Please forgive me for not explaining clearly.
Here is what I meant by a test page: post your HTML page on a website
somewhere and give us the URL to that page. Then we can click the link and
load your page, just like any other web page. That makes it much easier to
help you troubleshoot.
Here, since I didn't explain myself well, I went ahead and uploaded your
files to my own site:
http://mg.to/test/zhong/OK.html
http://mg.to/test/zhong/Error.html
Now when I load the page I can see the strange behavior you noticed.
I also noticed that the two pages display slightly differently from each
other. Do you see how the Error page has more spacing between the rows than
the OK page? This made me think there is something different in the
dynamically generated code.
To find the difference, I used the View Source Chart extension for Firefox:
https://addons.mozilla.org/en-US/firefox/addon/655
along with the Araxis Merge file comparison program:
http://www.araxis.com/
I opened your OK.html file in Firefox and selected View Source Chart from
the View menu.
I also opened a new file comparison window in Araxis Merge. (Araxis Merge is
an excellent but fairly expensive commercial product. You could use any file
comparison or diff program, though.)
Then I did a select all and copy, and pasted the result into the left
panel in Araxis Merge.
I did the same thing with your Error.html file and pasted the result into
the right panel in Araxis Merge.
This showed me the difference between the straight HTML version and the
JavaScript-generated version.
I saved the comparison report here for you to look at:
http://mg.to/test/zhong/compare.html
Scroll down in that page and take a look around line 116 on the left, line
256 on the right. Do you see the extra /tr and tr tags there, and the
same thing in the lines below that?
In the JavaScript-generated version, there is an *extra* empty table row in
between each of your table rows.
This is why your up and down buttons are acting strangely. They probably
*are* moving the table row(s) up and down as expected, but those empty table
rows are interfering with that. I'm sure if you get rid of the empty rows it
will work as you want.
This also explains why there is a small difference in layout between the two
versions. Do you see where the JavaScript version has more spacing between
the rows (at least in Firefox)? That is caused by the empty rows.
I'll let you sort out what part of your JavaScript code is causing those
extra rows to be added.
Hope that helps,
-Mike
On Tue, Dec 8, 2009 at 1:59 AM, Eric Zhong ericiszhongwen...@gmail.comwrote:
thanks for your reply, my english is poor , i can't understand what is
test page, you meant src file or description for the result ???
description:
1. when you use HTML code, it runs well , you can select one or more
select box and click up or down button, the selected line will up and down
immediately.
2. but when you use jQuery to append() the code , you do the same action ,
the selected line, will move or not some times, and when you multiselect
lines, you will see the strange result, it's hard to say with my poor
english, sorry !!!
i attach 2 files, one is OK, and another is Error. you can run it (double
click) , and to opt and to see what difference.
2009/12/8 Michael Geary m...@mg.to
Eric, you really need to put up a test page so we can try actually loading
it. Otherwise it's too hard to tell what might be wrong. I'm not even sure
what the problem is we're supposed to be looking at!
-Mike
On Mon, Dec 7, 2009 at 11:44 PM, Eric Zhong
ericiszhongwen...@gmail.comwrote:
i have modified the code , but the result is the same, even if i write
this in one line !!! Help !!!
one line version:
html
head
script src=
http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js;/script
SCRIPT LANGUAGE=JavaScript
!--
$(function(){
// /*
var html_video ='table id=tb_all width=724pxtrtd
valign=toptable id=tb_video class=tb_widthtr
class=tb_headtdnbsp/tdtdfilename/tdtdlen(s)/tdtdsize(KB)/td/tr/table/td/tr/table';
$(body).append( html_video );
var data =
[
{name: 1, len: 432, size: 321},
{name: 2, len: 54543, size: 432},
{name: 3, len: 3243, size: 432},
{name: 4, len: 543, size: 432},
{name: 5, len: 543, size: 654},
{name: 6, len: 654, size: 654},
{name: 7, len: 765, size: 654},
{name: 8, len: 765, size: 765},
{name: 9, len: 53, size: 654}
];
var a = data;
if ( a != null ){
for(var i=0; ia.length; i++){
var d = a[i];
$(#tb_video).append('trtdinput type=checkbox
//tdtd' + d.name + '/tdtd' + d.len +
Re: [jQuery] Re: Very Strange !!! The same HTML code works well, but append() it not !!!
Michael, thank you very much
I find the bug, the last tr should be /tr.
$(#tb_video).append('tr
tdinput type=checkbox //tdtd' + d.name + '/tdtd' + d.len +
'/tdtd' + d.size + '/tdtr');
this bug trouble me more than 2 days, thank you again, you not only give a
good tools which aid me to find the bug, also you show me a way to find bug
!
I kill another bug use View Source Chart less than 2 minute which trouble
me in a long time too.
Thank You !!!
2009/12/9 Michael Geary m...@mg.to
Hi Eric,
Please forgive me for not explaining clearly.
Here is what I meant by a test page: post your HTML page on a website
somewhere and give us the URL to that page. Then we can click the link and
load your page, just like any other web page. That makes it much easier to
help you troubleshoot.
Here, since I didn't explain myself well, I went ahead and uploaded your
files to my own site:
http://mg.to/test/zhong/OK.html
http://mg.to/test/zhong/Error.html
Now when I load the page I can see the strange behavior you noticed.
I also noticed that the two pages display slightly differently from each
other. Do you see how the Error page has more spacing between the rows than
the OK page? This made me think there is something different in the
dynamically generated code.
To find the difference, I used the View Source Chart extension for Firefox:
https://addons.mozilla.org/en-US/firefox/addon/655
along with the Araxis Merge file comparison program:
http://www.araxis.com/
I opened your OK.html file in Firefox and selected View Source Chart from
the View menu.
I also opened a new file comparison window in Araxis Merge. (Araxis Merge
is an excellent but fairly expensive commercial product. You could use any
file comparison or diff program, though.)
Then I did a select all and copy, and pasted the result into the left
panel in Araxis Merge.
I did the same thing with your Error.html file and pasted the result into
the right panel in Araxis Merge.
This showed me the difference between the straight HTML version and the
JavaScript-generated version.
I saved the comparison report here for you to look at:
http://mg.to/test/zhong/compare.html
Scroll down in that page and take a look around line 116 on the left, line
256 on the right. Do you see the extra /tr and tr tags there, and the
same thing in the lines below that?
In the JavaScript-generated version, there is an *extra* empty table row in
between each of your table rows.
This is why your up and down buttons are acting strangely. They probably
*are* moving the table row(s) up and down as expected, but those empty table
rows are interfering with that. I'm sure if you get rid of the empty rows it
will work as you want.
This also explains why there is a small difference in layout between the
two versions. Do you see where the JavaScript version has more spacing
between the rows (at least in Firefox)? That is caused by the empty rows.
I'll let you sort out what part of your JavaScript code is causing those
extra rows to be added.
Hope that helps,
-Mike
On Tue, Dec 8, 2009 at 1:59 AM, Eric Zhong ericiszhongwen...@gmail.comwrote:
thanks for your reply, my english is poor , i can't understand what is
test page, you meant src file or description for the result ???
description:
1. when you use HTML code, it runs well , you can select one or more
select box and click up or down button, the selected line will up and down
immediately.
2. but when you use jQuery to append() the code , you do the same action
, the selected line, will move or not some times, and when you multiselect
lines, you will see the strange result, it's hard to say with my poor
english, sorry !!!
i attach 2 files, one is OK, and another is Error. you can run it (double
click) , and to opt and to see what difference.
2009/12/8 Michael Geary m...@mg.to
Eric, you really need to put up a test page so we can try actually loading
it. Otherwise it's too hard to tell what might be wrong. I'm not even sure
what the problem is we're supposed to be looking at!
-Mike
On Mon, Dec 7, 2009 at 11:44 PM, Eric Zhong ericiszhongwen...@gmail.com
wrote:
i have modified the code , but the result is the same, even if i write
this in one line !!! Help !!!
one line version:
html
head
script src=
http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js;/script
SCRIPT LANGUAGE=JavaScript
!--
$(function(){
// /*
var html_video ='table id=tb_all width=724pxtrtd
valign=toptable id=tb_video class=tb_widthtr
class=tb_headtdnbsp/tdtdfilename/tdtdlen(s)/tdtdsize(KB)/td/tr/table/td/tr/table';
$(body).append( html_video );
var data =
[
[jQuery] Re: Very Strange !!! The same HTML code works well, but append() it not !!!
javascript cant read strings over line breaks.
$(#tb_video).append(' \
tr \
tdinput
type=checkbox //td \
td' + d.name + '/td \
td' + d.len + '/td \
td' + d.size + '/td \
tr ');
must be
$(#tb_video).append('tr'+
'tdinput type=checkbox
//td'+
'td' + d.name + '/td'+
'td' + d.len + '/td'+
'td' + d.size + '/td'+
'tr ');
On Dec 7, 6:30 pm, Eric Zhong ericiszhongwen...@gmail.com wrote:
html
head
script src=http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/
jquery.js/script
SCRIPT LANGUAGE=JavaScript
!--
$(function(){
// /*
var html_video = ' \
table id=tb_all width=724px \
tr \
td valign=top \
table id=tb_video
class=tb_width \
tr class=tb_head \
tdnbsp/td \
tdfilename/td \
tdlen(s)/td \
tdsize(KB)/td \
/tr \
/table \
/td \
/tr \
/table'
$(body).append( html_video );
var data =
[
{name: 1, len: 432, size: 321},
{name: 2, len: 54543, size: 432},
{name: 3, len: 3243, size: 432},
{name: 4, len: 543, size: 432},
{name: 5, len: 543, size: 654},
{name: 6, len: 654, size: 654},
{name: 7, len: 765, size: 654},
{name: 8, len: 765, size: 765},
{name: 9, len: 53, size: 654}
];
var a = data;
if ( a != null ){
for(var i=0; ia.length; i++){
var d = a[i];
$(#tb_video).append(' \
tr \
tdinput
type=checkbox //td \
td' + d.name + '/td \
td' + d.len + '/td \
td' + d.size + '/td \
tr ');
}
}
$(#tb_video).closest(tr).append(' \
td width=80px align=center
style=vertical-align:top \
input id=pl_bt_up type=button value=↑ / \
input id=pl_bt_down type=button value=↓ /
\
/td ');
// */
$(#pl_bt_up).click(function() {
var $all = $(#tb_video tr);
var $trs = $(#tb_video tr:has(input:checked));
if( $all.index($trs.get(0)) != 1 ){
$trs.each(function(){
$(this).prev().before($(this));
});
}
});
$(#pl_bt_down).click(function() {
var $all = $(#tb_video tr);
var $trs = $(#tb_video tr:has(input:checked));
if( $all.index( $trs.get($trs.length-1) ) !=
$all.length-1 ){
for( i = $trs.length-1; i=0; i-- ) {
var $item = $( $trs.get(i) );
$item.insertAfter($item.next());
}
}
});
});
--
/SCRIPT
/head
body
!--
table id=tb_all width=724px
tr
td valign=top
table id=tb_video class=tb_width
tr class=tb_head
tdnbsp/td
tdfilename/td
tdlen(s)/td
tdsize(KB)/td
/tr
trtdinput
Re: [jQuery] Re: Very Strange !!! The same HTML code works well, but append() it not !!!
Don't be so sure about that. I thought the same thing you did, but we were
both wrong: you *can* write multline strings in JavaScript.
Backslash-newline works inside a string just like it does outside one in
normal JS code.
You do have to be careful; there can't be any whitespace after the
backslash. That would give you an unterminated string literal error.
That said, I have no idea what the actual problem is. I would take a look at
it if there were a test page I could load (hint to Eric!).
-Mike
On Mon, Dec 7, 2009 at 11:19 PM, seasoup seas...@gmail.com wrote:
javascript cant read strings over line breaks.
$(#tb_video).append(' \
tr \
tdinput
type=checkbox //td \
td' + d.name + '/td \
td' + d.len + '/td \
td' + d.size + '/td \
tr ');
must be
$(#tb_video).append('tr'+
'tdinput type=checkbox
//td'+
'td' + d.name + '/td'+
'td' + d.len + '/td'+
'td' + d.size + '/td'+
'tr ');
On Dec 7, 6:30 pm, Eric Zhong ericiszhongwen...@gmail.com wrote:
html
head
script src=http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/
jquery.js/script
SCRIPT LANGUAGE=JavaScript
!--
$(function(){
// /*
var html_video = ' \
table id=tb_all width=724px \
tr \
td valign=top \
table id=tb_video
class=tb_width \
tr class=tb_head \
tdnbsp/td \
tdfilename/td \
tdlen(s)/td \
tdsize(KB)/td \
/tr \
/table \
/td \
/tr \
/table'
$(body).append( html_video );
var data =
[
{name: 1, len: 432, size: 321},
{name: 2, len: 54543, size: 432},
{name: 3, len: 3243, size: 432},
{name: 4, len: 543, size: 432},
{name: 5, len: 543, size: 654},
{name: 6, len: 654, size: 654},
{name: 7, len: 765, size: 654},
{name: 8, len: 765, size: 765},
{name: 9, len: 53, size: 654}
];
var a = data;
if ( a != null ){
for(var i=0; ia.length; i++){
var d = a[i];
$(#tb_video).append(' \
tr \
tdinput
type=checkbox //td \
td' + d.name + '/td \
td' + d.len + '/td \
td' + d.size + '/td \
tr ');
}
}
$(#tb_video).closest(tr).append(' \
td width=80px align=center
style=vertical-align:top \
input id=pl_bt_up type=button value=↑ / \
input id=pl_bt_down type=button value=↓ /
\
/td ');
// */
$(#pl_bt_up).click(function() {
var $all = $(#tb_video tr);
var $trs = $(#tb_video tr:has(input:checked));
if( $all.index($trs.get(0)) != 1 ){
$trs.each(function(){
$(this).prev().before($(this));
});
}
});
$(#pl_bt_down).click(function() {
var $all = $(#tb_video tr);
var $trs = $(#tb_video tr:has(input:checked));
if( $all.index( $trs.get($trs.length-1) ) !=
$all.length-1 ){
for( i = $trs.length-1; i=0; i-- ) {
var $item = $( $trs.get(i) );
Re: [jQuery] Re: Very Strange !!! The same HTML code works well, but append() it not !!!
i have modified the code , but the result is the same, even if i write this
in one line !!! Help !!!
one line version:
html
head
script src=http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js
/script
SCRIPT LANGUAGE=JavaScript
!--
$(function(){
// /*
var html_video ='table id=tb_all width=724pxtrtd
valign=toptable id=tb_video class=tb_widthtr
class=tb_headtdnbsp/tdtdfilename/tdtdlen(s)/tdtdsize(KB)/td/tr/table/td/tr/table';
$(body).append( html_video );
var data =
[
{name: 1, len: 432, size: 321},
{name: 2, len: 54543, size: 432},
{name: 3, len: 3243, size: 432},
{name: 4, len: 543, size: 432},
{name: 5, len: 543, size: 654},
{name: 6, len: 654, size: 654},
{name: 7, len: 765, size: 654},
{name: 8, len: 765, size: 765},
{name: 9, len: 53, size: 654}
];
var a = data;
if ( a != null ){
for(var i=0; ia.length; i++){
var d = a[i];
$(#tb_video).append('trtdinput type=checkbox
//tdtd' + d.name + '/tdtd' + d.len + '/tdtd' + d.size +
'/tdtr');
}
}
$(#tb_video).closest(tr).append('td width=80px
align=center style=vertical-align:topinput id=pl_bt_up type=button
value=↑ /input id=pl_bt_down type=button value=↓ //td');
// */
$(#pl_bt_up).click(function() {
var $all = $(#tb_video tr);
var $trs = $(#tb_video tr:has(input:checked));
if( $all.index($trs.get(0)) != 1 ){
$trs.each(function(){
$(this).prev().before($(this));
});
}
});
$(#pl_bt_down).click(function() {
var $all = $(#tb_video tr);
var $trs = $(#tb_video tr:has(input:checked));
if( $all.index( $trs.get($trs.length-1) ) != $all.length-1
){
for( i = $trs.length-1; i=0; i-- ) {
var $item = $( $trs.get(i) );
$item.insertAfter($item.next());
}
}
});
});
--
/SCRIPT
/head
body
!--
table id=tb_all width=724px
tr
td valign=top
table id=tb_video class=tb_width
tr class=tb_head
tdnbsp/td
tdfilename/td
tdlen(s)/td
tdsize(KB)/td
/tr
trtdinput type=checkbox
//tdtd1/tdtd222/tdtd432/td/tr
trtdinput type=checkbox
//tdtd2/tdtd333/tdtd543/td/tr
trtdinput type=checkbox
//tdtd3/tdtd444/tdtd654/td/tr
trtdinput type=checkbox
//tdtd4/tdtd555/tdtd765/td/tr
trtdinput type=checkbox
//tdtd5/tdtd666/tdtd876/td/tr
trtdinput type=checkbox
//tdtd6/tdtd777/tdtd432/td/tr
trtdinput type=checkbox
//tdtd7/tdtd888/tdtd543/td/tr
trtdinput type=checkbox
//tdtd8/tdtd999/tdtd265/td/tr
/table
/td
td width=80px align=center style=vertical-align:top
input id=pl_bt_up type=button value=↑ /
input id=pl_bt_down type=button value=↓ /
/td
/tr
/table
--
/body
/html
2009/12/8 seasoup seas...@gmail.com
javascript cant read strings over line breaks.
$(#tb_video).append(' \
tr \
tdinput
type=checkbox //td \
td' + d.name + '/td \
td' + d.len + '/td \
td' + d.size + '/td \
tr ');
must be
$(#tb_video).append('tr'+
'tdinput type=checkbox
//td'+
'td' + d.name + '/td'+
'td' + d.len + '/td'+
'td' + d.size + '/td'+
'tr ');
On Dec 7, 6:30 pm, Eric Zhong ericiszhongwen...@gmail.com wrote:
html
head
script src=http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/
jquery.js/script
SCRIPT LANGUAGE=JavaScript
!--
$(function(){
// /*
var html_video = ' \
table id=tb_all width=724px \
tr \
td valign=top \
