why my html structure can't find by jquery

Question

all my page sourcecode like this

<?php
include 'config/koneksi.php';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Lay Out Penempatan Produk UHT Area Gudang Rak A-F</title>
<link rel="icon" href="http://localhost/wifi/images/RSUP.png">
<link rel="stylesheet" type="text/css" href="css/popup-window.css" media="screen">


<script type="text/javascript" src="js/popup-window.js"></script>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>

<script>
    function setvalue(values) {
    document.getElementById('posisi').value = values;
}
</script>

<script type="text/javascript">
var htmlobjek;
$(document).ready(function(){
  //apabila terjadi event onchange terhadap object <select id=pid>
  $("#pid").change(function(){
    var pid = $("#pid").val();
     $.ajax({
        url: "ambilnamaproduk.php",
        data: "pid="+pid,
        cache: false,
        success: function(data){
        $("#pname").val(data);
        }
        });
    });
  });
</script>

<script>
var i = $("#data").attr('value');
    alert(i);
</script>

<script type="text/javascript">
var htmlobjek;
 $(document).ready(function () {
var i = $("#myTD").val();
      $.ajax({
             url: "cek.php",
             type:'POST'
             data: "i="+i,
             cache: false,
             success: function (data) {
                 $("#cek").val(data);
             }

        });            
});
 var k = $("#cek").val();
if(k = "0"){
 $(document).ready(function () {
                 $(".data").css("background-color", "#00CC00");//green
                 });
                 }
    else{
 $(document).ready(function () {
                 $(".data").css("background-color", "#FF0000");//red
                 });
}                 
 </script>

</head>
<body>
<div>
<input id="cek" name="cek" type="text" />

<table width="1023" border="1">
  <tr>
    <th colspan="2">A1</th>
    <th colspan="2">A2</th>
    <th colspan="2">A3</th>
    <th colspan="2">A4</th>
    <th colspan="2">A5</th>
    <th colspan="2">A6</th>
    <th colspan="2">A7</th>
    <th colspan="2">A8</th>
    <th colspan="2">A9</th>
  </tr>
  <tr>
    <td id="data" value="A1.4"> <div align="center"> <input type="button" onclick="popup_window_show('#sample', { pos : 'tag-right-down', parent : this, width : '270px' });setvalue(this.value);" value="A1.4" /></div></td>
    <td class="data"><div align="center"><input type="button" onclick="popup_window_show('#sample', { pos : 'tag-right-down',   parent : this, width : '270px' });setvalue(this.value);" value="A1.8" /></div></td>
    <td><div align="center"><input type="button" onclick="popup_window_show('#sample', { pos : 'tag-right-down',   parent : this, width : '270px' });setvalue(this.value);" value="A2.4" /></div></td>
    <td><div align="center"><input type="button" onclick="popup_window_show('#sample', { pos : 'tag-right-down',   parent : this, width : '270px' });setvalue(this.value);" value="A2.8" /></div></td>
    <td><div align="center"><input type="button" onclick="popup_window_show('#sample', { pos : 'tag-right-down',   parent : this, width : '270px' });setvalue(this.value);" value="A3.4" /></div></td>
    <td><div align="center"><input type="button" onclick="popup_window_show('#sample', { pos : 'tag-right-down',   parent : this, width : '270px' });setvalue(this.value);" value="A3.8" /></div></td>

    <td><div align="center">A4.4</div></td>
    <td><div align="center">A4.8</div></td>
    <td><div align="center">A5.4</div></td>
    <td><div align="center">A5.8</div></td>
    <td><div align="center">A6.4</div></td>
    <td><div align="center">A6.8</div></td>
    <td><div align="center">A7.4</div></td>
    <td><div align="center">A7.8</div></td>
    <td><div align="center">A8.4</div></td>
    <td><div align="center">A8.8</div></td>
    <td><div align="center">A9.4</div></td>
    <td><div align="center">A9.8</div></td>
  </tr>
  <tr>
    <td><div align="center">A1.3</div></td>
    <td><div align="center">A1.7</div></td>
    <td><div align="center">A2.3</div></td>
    <td><div align="center">A2.7</div></td>
    <td><div align="center">A3.3</div></td>
    <td><div align="center">A3.7</div></td>
    <td><div align="center">A4.3</div></td>
    <td><div align="center">A4.7</div></td>
    <td><div align="center">A5.3</div></td>
    <td><div align="center">A5.7</div></td>
    <td><div align="center">A6.3</div></td>
    <td><div align="center">A6.7</div></td>
    <td><div align="center">A7.3</div></td>
    <td><div align="center">A7.7</div></td>
    <td><div align="center">A8.3</div></td>
    <td><div align="center">A8.7</div></td>
    <td><div align="center">A9.3</div></td>
    <td><div align="center">A9.7</div></td>
  </tr>
  <tr>
    <td><div align="center">A1.2</div></td>
    <td><div align="center">A1.6</div></td>
    <td><div align="center">A2.2</div></td>
    <td><div align="center">A2.6</div></td>
    <td><div align="center">A3.2</div></td>
    <td><div align="center">A3.6</div></td>
    <td><div align="center">A4.2</div></td>
    <td><div align="center">A4.6</div></td>
    <td><div align="center">A5.2</div></td>
    <td><div align="center">A5.6</div></td>
    <td><div align="center">A6.2</div></td>
    <td><div align="center">A6.6</div></td>
    <td><div align="center">A7.2</div></td>
    <td><div align="center">A7.6</div></td>
    <td><div align="center">A8.2</div></td>
    <td><div align="center">A8.6</div></td>
    <td><div align="center">A9.2</div></td>
    <td><div align="center">A9.6</div></td>
  </tr>
  <tr>
    <td><div align="center">A1.1</div></td>
    <td><div align="center">A1.5</div></td>
    <td><div align="center">A2.1</div></td>
    <td><div align="center">A2.5</div></td>
    <td><div align="center">A3.1</div></td>
    <td><div align="center">A3.5</div></td>
    <td><div align="center">A4.1</div></td>
    <td><div align="center">A4.5</div></td>
    <td><div align="center">A5.1</div></td>
    <td><div align="center">A5.5</div></td>
    <td><div align="center">A6.1</div></td>
    <td><div align="center">A6.5</div></td>
    <td><div align="center">A7.1</div></td>
    <td><div align="center">A7.5</div></td>
    <td><div align="center">A8.1</div></td>
    <td><div align="center">A8.5</div></td>
    <td><div align="center">A9.1</div></td>
    <td><div align="center">A9.5</div></td>
  </tr>
</table>
</div>

<div   class="popup_window_css" id="sample">
<table class="popup_window_css">
<tr    class="popup_window_css">
<td    class="popup_window_css">
<div   class="popup_window_css_head"><img src="images/close.gif" alt="" width="9" height="9" />Aksi</div>
<div   class="popup_window_css_body"><div style="border: 1px solid #808080; padding: 6px; background: #FFFFFF;">
<form method="post" action="aksi.php"/>
<table>
    <tr>
     <td> Werehouse Product </td>
     <td><select name="wp">
        <option selected>- Jenis Werehouse -</option>
        <?php
        $q = mssql_query("select WHSName from tblSPDMstWarehouseProduct Order by WHSID"); 

        while ($r = mssql_fetch_array($q)){
        echo "<option value=$r[WHSName]>$r[WHSName]</option>";
        }
        ?>
</select>
</td>
    <tr>
     <td> Posisi</td>
     <td> <input type='text' name='posisi' id='posisi' readonly/></td>
    </tr>
    <tr>
     <td> Product ID</td>
     <td> <select name="pid" id="pid">
        <option selected = "selected" >- Produk ID -</option>
            <?php
            $q = mssql_query("select ProductID from tblMstProduct Order by ProductID"); 

            while ($r = mssql_fetch_array($q)){
            echo "<option value=$r[ProductID]>$r[ProductID]</option>";
        }?>
        </select>
     </td>
    </tr>
    <tr>
     <td> Product Name</td>
     <td ><input type="text" id="pname" name="pname" size="65" readonly/>
     </td>
    </tr>
    <tr>
     <td> Production Date</td>
     <td > <input type='text' name="tgl" /></td>
    </tr>
    <tr>
        <td colspan='2' align='center'>
         <input type='submit' value= 'Save'> 
         <input type='button' value='view' onclick="javascript:ajax_post();"/>
         </td>
    </tr>
</table>
<div class="popup_window_css_foot"></div></td></tr></table>
</div>
</body>
</html>

our focus on

<td id="data" value="A1.4"> <div align="center"> <input type="button" onclick="popup_window_show('#sample', { pos : 'tag-right-down', parent : this, width : '270px' });setvalue(this.value);" value="A1.4" /></div></td>

when i use this jquery

<script>
var i = $("#data").attr('value');
    alert(i);
</script>

in single content it's work check it in http://jsfiddle.net/6qxQW/119/

but after i implement that with all my code. my browser said this value (i) undefined.. what a headache..any idea what the problem...?

all browser Chrome, IE, firefork, flock etc. always said same — Andriansyah, Apr 10 '13 at 04:58
He said that his fiddle works, but when he use it with full html, it doesn't work @AndriansyahAndri try to put it inside `$(document).ready(function(){});` — Doan Cuong, Apr 10 '13 at 05:00
@PraveenKumar you mean in fiddle? if you mean that yes it's work. my problem on full html.. — Andriansyah, Apr 10 '13 at 05:03
This is an exact duplicate of [this question](http://stackoverflow.com/questions/15895881/why-my-script-doesnt-get-value-that-i-purpose/15898385?noredirect=1#comment22718382_15898385) by the same user... — Brainfeeder, Apr 11 '13 at 09:03

score 0 · Answer 1 · answered Apr 10 '13 at 05:04

Your code is executing immediately as the page loads and reads/ parses your javascript. Think of it as reading top to bottom. It starts executing your code immediately as it reads it before the rest of the page has finished loaded (including the element with id "data"). It would potentially work on your local machine because there is less to no latency and everything loads instantaneously, but on the server it is slightly slower so you may or may not see an issue, but usually will.

You should be able to fix your issue by wrapping it in the jquery document ready event handler so that the code doesn't execute until the document has finished loading. http://api.jquery.com/ready/

$(document).ready(function() {
    // Handler for .ready() called.

    //AT THIS POINT #data should now be loaded in the DOM and be available to access.
    var i = $("#data").attr('value');
    alert(i);
});

score 0 · Answer 2 · answered Apr 10 '13 at 05:27

My suggestion is that, you can try this way:

<table>
    <tr>
        <td id="data" data-value="A1.4" >
            <div align="center">
                <input type="button" value="A1.4" />
            </div>
        </td>
    </tr>
</table>

And get it using:

var i = $("#data").data('value');
alert(i);

By the way, if you are using AJAX, this might not work.

why my html structure can't find by jquery

2 Answers2