jquery append not working in chrome

I'm trying to dynamically add rows & fields to a table using Jquery.
Using the script below, the row/cell/field is added successfully in the browser
However, when I view source, I can't see see the new content in Chrome or Firefox
I can see the content when I look at the source in IE

When I submit the form to PHP, the script handler does not recognise the new content unless submitted via IE

$("<tr><td><div style='min-height:30px'><div class='select-wrapper' style='float:left; margin:0px 20px 0px 20px'><SELECT name='employee[]' style='font-size:13px' onchange='javascript:newRow(<?=$prodCnt?>)'><option value='000'>Select an employee</option><? for($x=0;$x<count($rsC);$x++){ ?><OPTION value='"+custIDArray[<?=$x?>]+"'>"+custNameArray[<?=$x?>]+"</OPTION><? } ?> </SELECT></div></div>	</td></tr>").appendTo('#people > tbody:last');

Open in new window


Please help
joomlaAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

RobOwner (Aidellio)Commented:
You should be able to see the content in Chrome, right click on the select and click "inspect element".  When you "view source" you are viewing the content as it was sent to the browser, not what was rendered by any script after loading.
0
RobOwner (Aidellio)Commented:
see here for a demo: http://phpfiddle.org/main/code/k6a-0t1

You can see your element submits when you select a value (from the bottom of the table)
0
joomlaAuthor Commented:
Hi Tagit
thanks for your responses.
I've looked that Chrome & Firefox and can confirm that the elements are being created.
However, what is not happening is that the arrays are not being passed to PHP as anticipated.

If for example I add two rows to the table (including the fields)
And then post the form to PHP
PHP can see all the elements when submitted via IE
However if submitted via Chrome/Firefox only the first element of the array is posted ?

ie
Name[]=1
Name[]=2
Name[]=3

IE recognises all three elements
but
Chrome only recognises Name[]=1

does this make sense to you ?
0
Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

RobOwner (Aidellio)Commented:
i've updated my example to show you multiple select boxes created with the same name.  select a value for each dropdown and Submit it and you'll see all the values are passed.

http://phpfiddle.org/main/code/k6a-0t1
0
RobOwner (Aidellio)Commented:
Code for reference:

<?php
$rsC = Array(1,2,3,4,5,6,7,8);
$prodCnt = 1;
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>PhpFiddle Initial Code</title>

<script type="text/javascript" src="/js/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript">
$(function(){
	custIDArray = [1,2,3,4,5,6,7,8];
	custNameArray = ['a','b','c','d','e','f','g','h'];
	
	$("<tr><td><div style='min-height:30px'><div class='select-wrapper' style='float:left; margin:0px 20px 0px 20px'><SELECT name='employee[]' style='font-size:13px' onchange='javascript:newRow(<?php echo $prodCnt ?>)'><option value='000'>Select an employee</option><?php for($x=0;$x<count($rsC);$x++){ ?><OPTION value='"+custIDArray[<?php echo $x ?>]+"'>"+custNameArray[<?php echo $x ?>]+"</OPTION><?php } ?> </SELECT></div></div>	</td></tr>").appendTo('#people>tbody');
	
	$("<tr><td><div style='min-height:30px'><div class='select-wrapper' style='float:left; margin:0px 20px 0px 20px'><SELECT name='employee[]' style='font-size:13px' onchange='javascript:newRow(<?php echo $prodCnt ?>)'><option value='000'>Select an employee</option><?php for($x=0;$x<count($rsC);$x++){ ?><OPTION value='"+custIDArray[<?php echo $x ?>]+"'>"+custNameArray[<?php echo $x ?>]+"</OPTION><?php } ?> </SELECT></div></div>	</td></tr>").appendTo('#people>tbody');

	$("<tr><td><div style='min-height:30px'><div class='select-wrapper' style='float:left; margin:0px 20px 0px 20px'><SELECT name='employee[]' style='font-size:13px' onchange='javascript:newRow(<?php echo $prodCnt ?>)'><option value='000'>Select an employee</option><?php for($x=0;$x<count($rsC);$x++){ ?><OPTION value='"+custIDArray[<?php echo $x ?>]+"'>"+custNameArray[<?php echo $x ?>]+"</OPTION><?php } ?> </SELECT></div></div>	</td></tr>").appendTo('#people>tbody');

});
	
	</script>

<style type="text/css">
	
</style>

</head>

<body>

<!-- 

HTML form action can be PhpFiddle API, for example, "http://phpfiddle.org/api/run/g7f-ds0"
If form action is empty HTTP request will be sent to itself 

-->
<div style="margin: 30px 10%;">
<h3>My form</h3>
<form action="http://phpfiddle.org/api/run/g7f-ds0" method="post" id="myform" name="myform">
<div style="margin: 30px 10%;">
<table id='people' border="1" cellpadding="1" cellspacing="1" width="60%">
	<caption align="top">My Table</caption>
	<thead>
	<tr align="center">
		<th rowspan="2">Year</th>
		<th colspan="2">Sales</th>
	</tr>
		</thead>
	<tbody>
	<tr align="center">
		<th valign="top">iPad</th>
		<th valign="middle">iPhone</th>
	</tr>
	<tr align="center">
		<td align="left">2010</td>
		<td align="right">$10,000,000</td>
		<td align="right">$80,000,000</td>
	</tr>
		<tr align="center">
		<td align="left">2011</td>
		<td align="right">$14,000,000</td>
		<td align="right">$11,000,000</td>
	</tr>
		</tbody>
</table>
</div>
 
	
   
	<button id="mysubmit" type="submit">Submit</button><br /><br />




</form>
</div>

<?php

?>

</body>
</html>

Open in new window

0
joomlaAuthor Commented:
This is what I get after submitting via Chrome
[employee] => Array ( [0] => 4 )

this is what I see after submitting via IE
[employee] => Array ( [0] => 4 [1] => 5 [2] => 000 )
0
RobOwner (Aidellio)Commented:
What letters did you select?

I'm using Chrome version 29.0.1547.66 m.  What version are you running?.

I selected 'c', 'a', 'g' and submitted the form.

My results:

POST data 
Array
(
    [employee] => Array
        (
            [0] => 3
            [1] => 1
            [2] => 7
        )

)

Open in new window

0
joomlaAuthor Commented:
my apologies,
I agree that your example works.
I was pointing out what I get when I use my example.

the only difference I can see is that in your example the jquery commands are done as the page is loaded rather than dynamically ?

M
0
RobOwner (Aidellio)Commented:
You'll have to show me where you call the append code from as I've updated the example so that you can add a row dynamically.

http://phpfiddle.org/main/code/k6a-0t1

$('#addRow').on('click', function() {
	$("<tr><td><div style='min-height:30px'><div class='select-wrapper' style='float:left; margin:0px 20px 0px 20px'><SELECT name='employee[]' style='font-size:13px' onchange='javascript:newRow(<?php echo $prodCnt ?>)'><option value='000'>Select an employee</option><?php for($x=0;$x<count($rsC);$x++){ ?><OPTION value='"+custIDArray[<?php echo $x ?>]+"'>"+custNameArray[<?php echo $x ?>]+"</OPTION><?php } ?> </SELECT></div></div>	</td></tr>").appendTo('#people>tbody');
	});

Open in new window

0
joomlaAuthor Commented:
Hi,
thanks so much for the help/interest as I'm obviously stuck.
I can confirm your example works for me.

In my example the jquery is being called via an onchange event rather than onclick

whenever the 'employee' field (which is a select field) is modified the routine is called.

From what you're demonstrating, I seems far simplier to add a button to add/remove rows

Is that your opinion ?
M
0
RobOwner (Aidellio)Commented:
No it shouldn't matter which way you do it though you just need to bind the code to the event:
updated:
http://phpfiddle.org/main/code/k6a-0t1
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
joomlaAuthor Commented:
Brilliant
absolutely brilliant
you've saved me hours and I honestly mean it.

hope you have lots of great kama back
thanks
M
0
joomlaAuthor Commented:
unbelievable help
thanks
0
RobOwner (Aidellio)Commented:
No problem! Glad we got there :-)
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Scripting Languages

From novice to tech pro — start learning today.