allowHTML not working

[BuildingtheNextGen]

I'll begin by saying that I know very, very little about coding at all. I was hoping to get a google spreadsheet in a searchable format that will display only the records related to the keyword search. I found a great blog post that helped to explain this. I was able to get the searchable database. It shows all of the columns on my google spreadsheet. However, I have one column with a bunch of URLs. In the google spreadsheet itself, it displays with the active links. However, when I use the script, it only displays the text (whether I have the actual URL there or the text with the link to the URL). I saw in another post that I needed to be sure to enter allowHtml: true (case sensitive). However, it does not seem to work.

Does anyone happen to know how to resolve this issue? Below is what I have for that portion of the coding (Again, I know very little of coding. I just copied the entire code & inserted the link to the google spreadsheet). Thanks in advance!

<form id="form1" method="post" action ="<?php echo $_SERVER['PHP_SELF']; ?>"> <label>
<input id="search" name="search" type="text" />
</label>
<label>
<input type="submit" />
</label>

</form>
<p>

<?php
$search= $_REQUEST['search'];
if ($search > ''){ $search = $search;} else { $search = '';}
?>

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['table']});
</script>
<script type="text/javascript">

{

var query = new google.visualization.Query(
'GOOGLE URL GOES HERE');

query.setQuery('SELECT A, B, C, D, E where upper(A) like upper("%<?php echo $search; ?>%") or upper(B) like upper("%<?php echo $search; ?>%") or C like "%<?php echo $search; ?>%" or upper(D) like upper("%<?php echo $search; ?>%") or upper(E) like upper("%<?php echo $search; ?>%")order by A asc');

query.send(handleQueryResponse);
}

function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}

var data = response.getDataTable();

visualization = new google.visualization.Table(document.getElementById('table'));
visualization.draw(data, {allowHtml: true, legend: 'bottom'});

}

google.setOnLoadCallback(drawVisualization);
</script>

<div id="table"></div>

</div>

[asgallant]

You have used the option correctly, so my guess is that the data being retrieved from the spreadsheet isn't formatted correctly.  Could you share a link to the page or post the javascript rendered in a browser (open the page in a browser, view the source, and copy the javascript) so I can test it?  

[BuildingtheNextGen]

Thanks for the response. Here's the page source:

<form id="form1" method="post" action ="/index.php"> <label>

<input id="search" name="search" type="text" />
</label>
<label>
<input type="submit" />
</label>

</form>
<p>

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['table']});
</script>
<script type="text/javascript">

{

var query = new google.visualization.Query(

'https://docs.google.com/spreadsheet/ccc?key=0AmOkf3tfSbwedHVmN2FPdUo2Mk9pUkNMQzlhd0F4OHc#gid=0');

query.setQuery('SELECT A, B, C, D, E where upper(A) like upper("%%") or upper(B) like upper("%%") or C like "%%" or upper(D) like upper("%%") or upper(E) like upper("%%")order by A asc');

query.send(handleQueryResponse);
}

function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}

var formatter = new google.visualization.PatternFormat('<a href="#">{0}</a>');

var data = response.getDataTable();

visualization = new google.visualization.Table(document.getElementById('table'));
visualization.draw(data, {allowHtml: true, legend: 'bottom'});

table.draw(view, {allowHtml: true})

}

google.setOnLoadCallback(drawVisualization);

</script>

<div id="table"></div>

</div>

[asgallant]

There are a few errors you need to fix:

1) you are missing the "function drawVisualization ()" descriptor before the start of the function call
2) you created a formatter, but didn't use it to format anything.  Also, with the format specified, it won't create links that go anywhere.
3) you have a table.draw call that shouldn't be there

I fixed these for you and did a mockup here: http://jsfiddle.net/asgallant/SGfEu/

[BuildingtheNextGen]

Oh man, we were getting so close & you would be a life saver. :) I can now click on the link, but unfortunately, it's not directing it to the site. Instead, it's adding it on to the domain instead of opening up the URL on it's own. Any thoughts to resolve that?

Again, thanks so much for the help with this.

[BuildingtheNextGen]

Also, it looks like the search function doesn't work any more either. Did I copy of the code wrong?

[asgallant]

Some of the URL's in the spreadsheet aren't formatted correctly (eg, "www.google.com" is missing the "http://" piece, and the "click me" entry will probably throw a 404 error).

As far as the search goes, check to make sure your query string is correct.  I copied the string from your rendered javascript, not the pre-rendered PHP, so if you copied my code exactly, you are probably missing that part.

[BuildingtheNextGen]

Wow! You are great! I have been trying to get this resolved for a few days and you are making my life easy. :)

It looks like I got everything to work, but found one other issue. I noticed that all of the links open up in the same window. Is there an easy enough way to have the links open the file in another window?

[asgallant]

Add a target="_blank" parameter to the anchor tag in the formatter:

var formatter = new google.visualization.PatternFormat('<a href="{0}" target="_blank">{0}</a>');

[BuildingtheNextGen]

Thanks very much! It looks like it's working. You've just made my life easier.

I'll probably try to copy it for another spreadsheet too. Thanks!

[asgallant]

You're welcome.

[Agora Cyber]

I'm sorry to bother you again, but I'm having some sort of problem again. For some reason, the site is no longer updating the spreadsheet and won't search. I didn't really do anything to the script, so not sure what the problem is. As I add to the spreadsheet, the title row is getting combined with multiple rows on the site (In other words, the Title row 1 of the spreadsheet may show as merged with Rows 1, 2, 3, and 4. I'm not sure why it's doing that. Any thoughts?

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/BTeAMH1UN_s/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[asgallant]

Is the merge problem in the spreadsheet or just when you query?

To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsub...@googlegroups.com.

[Agora Cyber]

No, the spreadsheet seems to be fine. The headers are on the first row and everything else underneath in separate rows. However, when I view in using the script, that's when it gets distorted. I can't identify any reason. Here's the code again:

	<form id="form1" method="post" action ="/index.php"> <label>
	<input id="search" name="search" type="text" />
	</label>
	<label>
	<input type="submit" />
	</label>
	</form>
	<p>
	<script type="text/javascript" src="http://www.google.com/jsapi"></script>
	<script type="text/javascript">
	google.load('visualization', '1', {packages: ['table']});
	</script>
	<script type="text/javascript">

function drawVisualization() {

var query = new google.visualization.Query(

'https://docs.google.com/spreadsheet/pub?key=0AmOkf3tfSbwedG9hWi1QTHFsWjE4NzdDcWtCMEtJbEE&single=true&gid=0&output=html');

	query.setQuery('SELECT A, B, C, D, E where upper(A) like upper("%%") or upper(B) like upper("%%") or C like "%%" or upper(D) like upper("%%") or upper(E) like upper("%%")order by A asc');
	query.send(handleQueryResponse);
	}
	function handleQueryResponse(response) {
	if (response.isError()) {
	alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
	return;
	}

var data = response.getDataTable();

var formatter = new google.visualization.PatternFormat('<a href="{0}" target="_blank">{0}</a>');

formatter.format(data, [4]);

	visualization = new google.visualization.Table(document.getElementById('table'));
	visualization.draw(data, {allowHtml: true, legend: 'bottom'});
	}

google.load('visualization', '1', {packages:['table'], callback: drawVisualization});

	</script>
	<div id="table"></div>
	</div>

To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

[asgallant]

That is bizarre.  Try building a new spreadsheet with the same data (do it manually, don't copy-paste), and see if you get the same effect.  Other spreadsheet queries are not displaying the same issue, so I assume there is something wonky with your spreadsheet itself.

To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsubscr...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.

Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Agora Cyber]

I actually had tried previously to make a new one from scratch. In fact, I made another searchable sheet for something else that I wanted to use this code for where I copied the code to use with that sheet and had the same problem. I figured that I just copied it wrong or something. I did just try to make a brand new one for this original spreadsheet too. I think I might have realized something that contributes to it. If I have all of the columns filled in on the spreadsheet, then it doesn't happen. If at least the last column is empty on that specific row, it will then combine the other cells to the header row.

Also, I noticed in the original code that I copied from a blog that they had labels for each of the column. I had tried to do that yesterday too just to see if it would work, but it didn't seem to work unless I did something wrong.

To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.