Jump to content

problems with .html()

Destramic

By Destramic
in Javascript Help

 Share

Recommended Posts

Destramic Advanced Member

Destramic

Posted
Posted

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>

Link to comment
Share on other sites
Destramic Advanced Member

Destramic

Posted
  • Author
Posted

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>

 

Link to comment
Share on other sites
nogray Newbie

nogray

Posted
Posted

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

Link to comment
Share on other sites
Destramic Advanced Member

Destramic

Posted
  • Author
Posted

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>

Link to comment
Share on other sites
Adam Advanced Member

Adam

Posted
Posted

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.

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.