I am simply trying to implement what I believe is google's example of a custom HTML data-source. I am clearly missing something but am unable to see it.
The goal is to have my default page retrieve a table's worth of data from my own data-source and chart it.
The error I receive is eventually I get a timeout dialog displayed.
I have two files default.htm and data.htm. For a period of time this will also be on the associated website. (www.ichoosewellness.com/chartapitest).
default.htm:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', { packages: ['corechart'] });
</script>
<script type="text/javascript">
function drawVisualization() {
// Replace the data source URL on next line with your data source URL.
var query = new google.visualization.Query('http://www.ichoosewellness.com/chartapitest/data.htm?tqx=reqId:1;out:html');
// Send the query with a callback function.
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
// Create and draw the visualization.
var comboChart = new google.visualization.ComboChart(document.getElementById('chart_div'));
comboChart.draw();
var div = document.getElementById('chart_div');
div.style.backgroundColor = 'red';
}
google.setOnLoadCallback(drawVisualization);
var div = document.getElementById('chart_div');
div.style.backgroundColor = 'red';
</script>
</head>
<body>
<div id='chart_div' style="width: 500px; height: 250px; border: 1px solid green;">
</div>
</body>
</html>
data.htm
<html>
<body>
<table border='1' cellpadding='2' cellspacing='0'>
<tr style='font-weight: bold; background-color: #aaa;'>
<td>
label 1
</td>
<td>
label 2
</td>
</tr>
<tr bgcolor='#f0f0f0'>
<td align='right'>
1
</td>
<td>
a
</td>
</tr>
<tr bgcolor='#ffffff'>
<td align='right'>
2
</td>
<td>
b
</td>
</tr>
<tr bgcolor='#f0f0f0'>
<td align='right'>
3
</td>
<td>
c
</td>
</tr>
<tr bgcolor='#ffffff'>
<td align='right'>
4
</td>
<td>
d
</td>
</tr>
</table>
</body>
</html>
This question is pretty old now but I will add what I found out about it since I had a similar problem.
Basically I was trying to get google.visualization.Query() to call my WCF REST service and have it return a json dataTable. Every time the query executed, it would throw a timeout error even though the GET request executed successfully. The culprit turned out to be the formatting of the response string and cross site domain permissions.
The response format is very particular and would throw a timeout error if not correctly defined. You have to go over the response format with a fine tooth comb and read the detailed documentation below.
Here is the URL that explain in detail the proper format:
http://code.google.com/apis/chart/interactive/docs/dev/implementing_data_source.html1
Secondly don't forget about cross site domain permission. Because I was testing from localhost:63532 and calling the REST service located on localhost:63002 they were not the same domain and was not being queried. For testing I needed to add the the following to the response header.
Access-Control-Allow-Origin:http://localhost:63532
These two items were the key to getting past the timeout error.
In the case of your code calling HTML, if you read the linked documentation above there is a section in there describing HTML Response Format. Here is the relevant text:
If the request specifies out:html, the response should be an HTML page defining an HTML table with the data. This is useful for debugging your code, because the browser can render your result in a readable format directly. You cannot send a query for an HTML response using the google.visualization.Query object. You must make a query for an HTML response using custom code, or by typing a URL similar to this one in your browser:
Since in your code you are trying to do this:
var query = new google.visualization.Query('http://www.ichoosewellness.com/chartapitest/data.htm?tqx=reqId:1;out:html');
It seems from the documentation that this is not supported by the query function.
Related
I have todo inside table. Also table contains image. Page screenshot
I need to mark "A" as completed. According to a documentation I should perform replace action for whole table.
First I call GET /me/onenote/pages/{pageId}/content?includeIDs=true to find right id of table (see "Page content before the PATCH" ⇩).
Then I send PATCH /me/onenote/pages/{pageId}/content with body:
[
{
"target": "table:{20c31cfe-9865-441d-9dbc-d8c53922d8f5}{21}",
"action": "replace",
"content": "<table border=\"1\"><tr><td><p data-tag=\"to-do:completed\">A</p></td><td><img src=\"https://graph.microsoft.com/v1.0/me/onenote/resources/1-66692d9b618447e9ad0d191137fcf91c!1-9857064f-8cbd-4b01-a41d-10e231bd6349/$value\"/></td></tr></table>"
}
]
API responds 204, and "A" is completed now. But image has been broken: updated page
How can I update a table that contains images?
Page content before the PATCH (Graph API response)
<html lang="en-US">
<head>
<title>Test 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="created" content="2018-10-08T12:03:00.0000000" />
</head>
<body data-absolute-enabled="true" style="font-family:Calibri;font-size:11pt">
<div id="div:{9f7149ca-3f9e-4275-8fa2-a51debcdb40c}{136}" style="position:absolute;left:48px;top:115px;width:624px">
<table id="table:{20c31cfe-9865-441d-9dbc-d8c53922d8f5}{21}" style="border:1px solid;border-collapse:collapse">
<tr id="tr:{20c31cfe-9865-441d-9dbc-d8c53922d8f5}{22}">
<td id="td:{20c31cfe-9865-441d-9dbc-d8c53922d8f5}{23}" style="border:1px solid">
<span lang="ru-RU" data-tag="to-do">A</span>
</td>
<td id="td:{20c31cfe-9865-441d-9dbc-d8c53922d8f5}{26}" style="border:1px solid">
<img id="img:{20c31cfe-9865-441d-9dbc-d8c53922d8f5}{54}" width="99" height="35" src="https://graph.microsoft.com/v1.0/users('0c2b9435-52c9-4480-a1d9-9faa92cecf51')/onenote/resources/1-66692d9b618447e9ad0d191137fcf91c!1-9857064f-8cbd-4b01-a41d-10e231bd6349/$value" data-src-type="image/png" data-fullres-src="https://graph.microsoft.com/v1.0/users('0c2b9435-52c9-4480-a1d9-9faa92cecf51')/onenote/resources/1-66692d9b618447e9ad0d191137fcf91c!1-9857064f-8cbd-4b01-a41d-10e231bd6349/$value" data-fullres-src-type="image/png" />
</td>
</tr>
</table>
</div>
</body>
Per the OneNote team, you need to do some transformation to the images before sending your PATCH.
When you do the GET for the page, the images come back with a src attribute like: https://graph.microsoft.com/v1.0/users('0c2b9435-52c9-4480-a1d9-9faa92cecf51')/onenote/resources/1-66692d9b618447e9ad0d191137fcf91c!1-9857064f-8cbd-4b01-a41d-10e231bd6349/$value. This value isn't actually a direct link to an image, but is a Graph request URL to get the image. This is the key problem.
Your app must make a GET on that URL to retrieve the image contents, then encode the binary image returned into base 64, then add that into the <img> tag. That should work around the problem.
I am getting html form user through html . After getting html i am loading it into htmlaglity via HtmlDocument.LoadHtml() function. Here is html code:
<table>
<tr>
<td>Some text</td>
</tr>
</table>
And here is c# code:
HtmlDocument hd = new HtmlDocument();
hd.LoadHtml(html);
string st_debug;
foreach (var item in hd.DocumentNode.Descendants("tr"))
{
foreach (HtmlNode secNode in item.ChildNodes)
{
st_debug = secNode.InnerHtml;
}
}
The problem is it is returning me data like " " instead of 'sometext' and when i remove extra space between tags like:
<table>
<tr>
<td>
Some text
</td>
</tr>
<table>
it is giving me correct output. What is the solution of this because user will just copy the html and past as it is.
I have write the same code in winform but getting the html from browser control and that works perfect. is there any problem while loading html ? please help
Check encoding settings while getting the documents.
Use tools such as postman to validate your requests.
Reference
Postman , chrome addon ,
https://chrome.google.com/webstore/detail/postman/fhbjgbiflinjbdggehcddcbncdddomop?hl=en
I am working on a Rails 3.2.11 app using angular 1.0.5.
Currently, a user will select a Cycle from a dropdown, and that will return a bunch of JSON from my controller using ng-resource.
Here is the method
$scope.update = function(cycleId) {
Cycle.get({action: cycleId}, function(resource) {
$scope.selectedCycle = resource;
$scope.tasks = resource.tasks;
$scope.newTask = {cycle_id: resource.cycle.id};
});
};
Here is an example of what json my controller is returning, which is 'resource' in above function: https://gist.github.com/anonymous/01ffe5a37e370661f6fb
Basically I am needing to use ng-repeat twice (one of them nested) using angulars ng-repeat, so that I can get the task_type_name in there as a header. I'm getting some weird interesting results. See the shorted code in my view below and the full thing here
<section ng-repeat="(task_type_name,task_type) in tasks ">
<h2>{{task_type_name}}</h2>
<table>
<tr>
<th>Task Name</th>
</tr>
<section id="task-edit">
<tr ng-repeat="task in task_type">
<td>
<%= link_to "{{task.name}}", '', "ng-click"=>"toggleShowHistory(task.id)" %>
</td>
</tr>
</section
</table>
So my is occuring at this part here
<section id="task-edit">
<tr ng-repeat="task in task_type">
If I try to combine that section and tr, OR change tr to ANYTHING but a tr, {{task}} no longer becomes available.
<section class="task-edit" ng-repeat="task in task_type">
{{task}} is available right here
<tr>
{{task}} is not available right here
<td>
{{task}} is not avaiable right here
</td>
</tr>
</section>
I tested the same concept on the first loop, and it seems to be fine on that loop just not the second, nested loop.
I'm assuming it has something to do with the scope. But i'm just not getting it.
Also, if you have any tips, i'm very new to angular and would love them.
I created a demo, and I am not seeing any issue. Please check your data source and make sure you plug in the tasks value of the json.
You need to change the nested section to tbody.
Demo on jsfiddle
I have an ASP.NET MVC 4 web application. On a web page, I have a HTML table presenting a number of items.
I want to be able to implement drag and drop re-ordering for the table of items, which is saved back to the data model.
I've looked at and tried a few different methods for doing this, using JQuery UI and some other plugins but I haven't successfully been able to implement the functionality.
I've looked at this example, but my table didn't change on running it after implementing it as follows:
<script type="text/javascript">
$(document).ready(function()
{
$('#clueTable tbody').sortable().disableSelection();
});
</script>
I have all the necessary javascript:
<script type="text/javascript" src="~/Scripts/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="~/Scripts/jquery-ui-1.10.2.min.js"></script>
I'm not going to post the whole table, but it looks something like this:
<table id="clueTable" class="grid">
<thead>
<tr>
<th>Clue #</th>
<th>Location</th>
<th>Quiz Clue?</th>
<th>Actions</th>
</tr>
</thead>
#for (int i = 0; i < Model.Clues.Count; i++)
{
<tbody>
<tr>
<td>Number</td>
<td>Things</td>
<td>Yes</td>
<td>Stuff</td>
</tr>
</tbody>
}
</table>
The duplicated tbody tags are your problem.
Works:
http://jsfiddle.net/vR9UW/
Doesn't work:
http://jsfiddle.net/vR9UW/1/
I need to update the value of a textField, using a value on the server, based on the value the user chooses in a g:select. In code:
<g:select name="description" from="${momentum.MoneyTransType.prodList}" value="${moneyInstance?.description}"
noSelection="['':'-Select Description-']" onChange="${remoteFunction(action:'setHowMuch', update:[success:'howMuch', failure:'failure'],
params:'\'selection=\' + this.value', options=[asynchronous:false])}"/>
<g:textField id="howMuch" name="howMuch" value="${moneyInstance?.howMuch}"/>
It's not working. If I give the "update:[success:" a div id, all is good, but that's not what I want. I need to allow the user to enter in a free flow description (which I'll have in another textfield), and a free flow amount. I guess I could hide a div and then listen for changes to that div via jQuery, and then update the amount textField. Should I be able to update a textField using the remoteFunction "update" capability or using another grails capability?
Strangely, putting in a temporary 'toHide' div with a jQuery change function isn't working to update the textField, i.e. the following alert, etc, isn't firing:
$('#toHide').change(function() {
alert(" I got changed, value:");
$("#howMuch").text($(this).val());
});
Well, after writing all the below, I reread your question and see you stated you know it works with a div. So the rest of my answer might not be helpful, but what's wrong with using a div? An empty div won't display anything, so you don't need to hide it. So FWIW:
Put your <g:textField ...> in a template.
Add a div where where you want the template to be rendered. In other
words, replace the current <g:textField ..> with <div id=updateme name=updateme></div>
In your setHowMuch action, render the template.
For example, I do:
In view:
<g:select class='setTagtypeValue-class'
name='tagtype-${i}-header'
from="${org.maflt.ibidem.Tagtype.list(sort:'tagtype').groupBy{it.tagtype}.keySet()}"
value="${setTagtypeValue?.tagtype?.tagtype}"
valueMessagePrefix="tagtype"
noSelection="${['null':'Select One...']}"
onchange="${remoteFunction(action:'options', update:'tagtype-options-${i}',
params:'\'tagtype=\' + this.value +\'&i=${i}\'' )}" />
Controller action:
def options = {
def i = params.i ?: 0
def tagtypes = Tagtype.findAllByTagtype(params.tagtype)
render(template:"tagtypeList", model:[tagtypes:tagtypes,i:i])
}
tagypeList Template:
<table>
<tr>
<th></th>
<th><g:message code="tagtype.lookup"
default="Lookup Table" /></th>
<th><g:message code="tagtype.regexpression"
default="Field Rule" /></th>
<th><g:message code="tagtype.uicomponent"
default="UI Component" /></th>
</tr>
<g:each in="${tagtypes}" var="tagtype" status="j">
<tr>
<td><g:radio name="setTagtypesList[${i}].tagtype.id" value="${tagtype.id}"
checked="${(setTagtypeValue?.tagtype?.id == tagtype.id ||
(!setTagtypeValue?.tagtype?.id && j==0))}"></g:radio></td>
<td>${tagtype.lookupTable}</td>
<td>${tagtype.regexpression}</td>
<td><g:message code="${'uicomponent.' + tagtype.uicomponent.id}"
default="${tagtype.uicomponent.uicomponent}" />
</td>
</tr>
</g:each>
</table>
This code is from the metadataset (called field set in the UI) screen in http://www.maflt.org/products/Ibidem.