Destramic Posted October 13, 2011 Share Posted October 13, 2011 hey guys im having a little problem with this script ive been writing. how the script works is when a search is made if match then the data will show in the table. the problem im having is: 1. this line isnt getting the div content var div_contents = $('div#user_rows').html(); and 2. this line isnt replacing the content of the div but is showing the results above the <table> tags...how on earth! $('div#user_rows').html(content); ive been running the script on firefox so if anyone can help me please...thank you <!DOCTYPE html> <html> <head> <script src="media/scripts/library/jquery.js" type="text/javascript"></script> </head> <body> <form> <script> $(document).ready(function() { var search_value; var div_contents = $('div#user_rows').html(); alert(div_contents); var rows = [{"username":"destramic", "email":"destramic@hotmail.com"}, {"username":"process", "email":"process@hotmail.co.uk"}]; $('#search_query').keyup(function () { var search_value = $('#search_query').val(); var found_entries = new Array(); $.each(rows, function(index, row) { $.each(row, function(column, column_value) { if (column_value.indexOf(search_value) !== -1) { if ($.inArray(row, found_entries) == -1) { found_entries.push(row); } } }); }); if (found_entries.length > 0) { var content = ""; $.each(found_entries, function(index) { content += "<tr>"; content += "<td>" + found_entries[index]['username'] + "</td>"; content += "<td>" + found_entries[index]['email'] + "</td>"; content += "</tr>"; }); $('div#user_rows').html(content); } }); $('#search_query').focusout(function () { search_value = $('#search_query').val(); if (search_value == "") { $('#search_query').val("Search..."); } }); $('#search_query').click(function () { search_value = $('#search_query').val(); if (search_value == "Search...") { $('#search_query').val(""); } }); }); </script> <input type="text" name="search_query" id="search_query" value="Search..." /> <table> <tr> <th id="username">Username</th> <th id="team">E-mail</th> </tr> <div id="user_rows"> <tr> <td>destramic</td> <td>destramic@hotmail.com</td> </tr> <tr> <td>process</td> <td>process@hotmail.com</td> </tr> </div> </table> </body> </html> Quote Link to comment https://forums.phpfreaks.com/topic/249062-problems-with-html/ Share on other sites More sharing options...
nogray Posted October 13, 2011 Share Posted October 13, 2011 #user_rows represent an id and it should be unique in the page. If that's the case, you can just use $('#user_rows').html(); otherwise use a class. Quote Link to comment https://forums.phpfreaks.com/topic/249062-problems-with-html/#findComment-1279132 Share on other sites More sharing options...
Destramic Posted October 13, 2011 Author Share Posted October 13, 2011 yep the div id is user_rows and ive tried $('#user_rows').html(); like you said and it returns empty aswell when alerting it...im confused why <div id="user_rows"> <tr> <td>destramic</td> <td>destramic@hotmail.com</td> </tr> <tr> <td>process</td> <td>process@hotmail.com</td> </tr> </div> Quote Link to comment https://forums.phpfreaks.com/topic/249062-problems-with-html/#findComment-1279178 Share on other sites More sharing options...
Destramic Posted October 13, 2011 Author Share Posted October 13, 2011 i took the div tag and its contents out of the table tags and the html was read then...why cant it read whilst in the table tags? Quote Link to comment https://forums.phpfreaks.com/topic/249062-problems-with-html/#findComment-1279180 Share on other sites More sharing options...
AyKay47 Posted October 14, 2011 Share Posted October 14, 2011 as a good practice, put your script below your content in the body.. I believe that it is trying to grab an id that does not yet exist in the DOM.. Quote Link to comment https://forums.phpfreaks.com/topic/249062-problems-with-html/#findComment-1279203 Share on other sites More sharing options...
Destramic Posted October 14, 2011 Author Share Posted October 14, 2011 ive tried that and it did work...the probelm is with the div inbetween the table tags...dunno why...cause if the div is moved out then it works Quote Link to comment https://forums.phpfreaks.com/topic/249062-problems-with-html/#findComment-1279341 Share on other sites More sharing options...
AyKay47 Posted October 14, 2011 Share Posted October 14, 2011 perhaps it is because the content inside of the div actually belongs to the table element.. other than that, I am out of ideas on this one.. Quote Link to comment https://forums.phpfreaks.com/topic/249062-problems-with-html/#findComment-1279342 Share on other sites More sharing options...
nogray Posted October 14, 2011 Share Posted October 14, 2011 Now I see your html, you have a few issues. You can't have a div as a table element (outside the <td>), this will break your code. You can try to add the id into the tr, but I don't think you can write the tr html directly either. You would need to loop through the table cells inside that tr and update their content. Sam Quote Link to comment https://forums.phpfreaks.com/topic/249062-problems-with-html/#findComment-1279446 Share on other sites More sharing options...
Destramic Posted October 15, 2011 Author Share Posted October 15, 2011 t dont the way i wanted to do it but i decided to generate the table inside the javascript loop <!DOCTYPE html> <html> <head> <script src="media/scripts/library/jquery.js" type="text/javascript"></script> <script> $(document).ready(function() { var search_value; var column_headings = ["Username", "E-mail Address"]; var rows = [{"username":"destramic", "email":"destramic@hotmail.com"}, {"username":"process", "email":"process@hotmail.co.uk"}]; $('#search_query').keyup(function () { var search_value = $('#search_query').val(); var found_entries = new Array(); $.each(rows, function(index, row) { $.each(row, function(column, column_value) { if (column_value.indexOf(search_value) !== -1) { if ($.inArray(row, found_entries) == -1) { found_entries.push(row); } } }); }); if (found_entries.length > 0) { var content; content += "<tr>"; $.each(column_headings, function(index, heading) { content += "<th>" + heading + "</th>"; }); content += "</tr>"; $.each(found_entries, function(index) { content += "<tr>"; content += "<td>" + found_entries[index]['username'] + "</td>"; content += "<td>" + found_entries[index]['email'] + "</td>"; content += "</tr>"; }); content += "</table>"; $('div#user_rows').html(content); found_entries.length = 0; } else { $('div#user_rows').html("No results found for: " + search_value); } }); $('#search_query').focusout(function () { search_value = $('#search_query').val(); if (search_value == "") { $('#search_query').val("Search..."); } }); $('#search_query').click(function () { search_value = $('#search_query').val(); if (search_value == "Search...") { $('#search_query').val(""); } }); }); </script> </head> <body> <input type="text" name="search_query" id="search_query" value="Search..." /> <div id="user_rows"></div> </html> Quote Link to comment https://forums.phpfreaks.com/topic/249062-problems-with-html/#findComment-1279652 Share on other sites More sharing options...
Adam Posted October 16, 2011 Share Posted October 16, 2011 You can use the <tbody> tag to wrap the rows within a parent element inside the table. I believe that it is trying to grab an id that does not yet exist in the DOM.. In this case only the document is assigned an event, that is called once the page has loaded. So at the point of execution the elements will exist within the DOM. Quote Link to comment https://forums.phpfreaks.com/topic/249062-problems-with-html/#findComment-1279659 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.