使用jqery进行云标记 [英] Cloud Tagging using jqery
本文介绍了使用jqery进行云标记的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
大家好
我正在尝试进行云标记.
我发现HTML和JQuery代码可以实现这一目标.
代码:
Hi all
I am trying to do cloud tagging.
I found HTML and JQuery code to implement this one.
Code:
<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://word-cumulus-goog-vis.googlecode.com/svn/trunk/wordcumulus.js"></script>
<script type="text/javascript" src="http://word-cumulus-goog-vis.googlecode.com/svn/trunk/swfobject.js"></script>
<script type="text/javascript">
google.load("visualization", "1");
// Set callback to run when API is loaded
google.setOnLoadCallback(drawVisualization);
// Called when the Visualization API is loaded.
function drawVisualization() {
// Create and populate a data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Tag');
data.addColumn('string', 'URL');
data.addRows(10);
data.setCell(0, 0, 'Brazil');
data.setCell(0, 1, 'http://www.youtube.com/results?search_query=brazil+fifa+world+cup');
data.setCell(1, 0, 'Italy');
data.setCell(1, 1, 'http://www.youtube.com/results?search_query=italy+fifa+world+cup');
data.setCell(2, 0, 'Germany');
data.setCell(2, 1, 'http://www.youtube.com/results?search_query=germany+fifa+world+cup');
data.setCell(3, 0, 'Argentina');
data.setCell(3, 1, 'http://www.youtube.com/results?search_query=argentina+fifa+world+cup');
data.setCell(4, 0, 'Uruguay');
data.setCell(4, 1, 'http://www.youtube.com/results?search_query=uruguay+fifa+world+cup');
data.setCell(5, 0, 'France');
data.setCell(5, 1, 'http://www.youtube.com/results?search_query=france+fifa+world+cup');
data.setCell(6, 0, 'England');
data.setCell(6, 1, 'http://www.youtube.com/results?search_query=england+fifa+world+cup');
data.setCell(7, 0, 'Bhagirathi');
data.setCell(7, 1, 'http://www.youtube.com/results?search_query=england+fifa+world+cup');
data.setCell(8, 0, 'Raj');
data.setCell(8, 1, 'http://www.youtube.com/results?search_query=england+fifa+world+cup');
data.setCell(9, 0, 'RBS');
data.setCell(9, 1, 'http://www.youtube.com/results?search_query=england+fifa+world+cup');
// Instantiate our table object.
var vis = new gviz_word_cumulus.WordCumulus(document.getElementById('mydiv'));
// Draw our table with the data we created locally.
vis.draw(data, {text_color: '#ff00ff', speed: 100, width:500, height:500});
}
</script>
</head>
<body>
<big>FIFA World Cup: Country appearances in the final four</big>
<div> </div>
<div id="mydiv"></div>
</body>
</html>
这完全满足了我的要求，但
我想从服务器端获取该标签.
意思是:在我的数据库中，我有一些要提取并显示在UI中的标签.
在这里，我已经完成了硬编码.
如何动态地做到这一点?
我试图解决这个问题.
我发现，如果我使用ajax，则可以解决此问题.
但是我不知道如何使用ajax.并解决这个问题.
我的Sql查询是
This is full fill my requirement but
i want to fetch that tags from server side .
means :in my database i have some tags which i want to fetch and show in the UI.
Here I have done hard coded.
how to do this one dynamically??
I tried to solve this.
I found that if I use ajax than i can solve this problem.
But i don''t know how to use ajax. and solve this problem.
My Sql query is
SELECT DISTINCT TAG_NAME FROM TAGS;
请帮我解决这个问题.
在此先感谢.
Please help me to solve this problem.
thanks in advance.
推荐答案
嗨
我认为您可以在此处使用basix ajax，即，在添加标签而不是硬编码的同时，您可以从仅返回文本的httphandler请求标签名，您将使用该tagid来访问该处理程序，并且它将仅选择与该ID相关联的标签名.
例如
从事
Hi
I think you can use basix ajax here, i.e, while adding tags instead of hard coding you can request the tagname from an httphandler that returns text only, you will hit the handler with the tagid and it will select only the tagname associated with that id.
E.g.
intead of doing
data.setCell(0, 0, ''Brazil'');
的兴趣
您可以使用此
you can use this
data.setCell(0, 0, GetTag(1));
其中1作为ajax请求的ID传入，并且其文本从表中返回.
希望它能为前进提供正确的方向.
问候
Pawan
where 1 is passed in as ID for the ajax request and it''s text is returned from the table.
hope it gives the right direction to move ahead.
Regards
Pawan
好，这是完整的工作代码.
注意，我已经手动填写了数据表.您需要更改代码以填充数据库中的数据表.
背后的代码
Well, here is the full working code.
Note, I have filled up the datatable manually. You need to change the code to fill up the datatable from database.
Code Behind
protected DataTable dtbl = null;
protected void Page_Load(object sender, EventArgs e)
{
dtbl = new DataTable();
dtbl.Columns.Add("name", Type.GetType("System.String"));
dtbl.Columns.Add("url", Type.GetType("System.String"));
dtbl.Rows.Add(new object[] { "Brazil", "http://www.youtube.com/results?search_query=brazil+fifa+world+cup" });
dtbl.Rows.Add(new object[] { "Germany", "http://www.youtube.com/results?search_query=germany+fifa+world+cup" });
dtbl.Rows.Add(new object[] { "Argentina", "http://www.youtube.com/results?search_query=argentina+fifa+world+cup" });
string _tagstring=string.Empty;
foreach (DataRow dr in dtbl.Rows)
{
_tagstring += dr["name"].ToString() + "," + dr["url"].ToString() + ";";
}
_tagstring = _tagstring.TrimEnd('';'');
hdnTags.Value = _tagstring;
dtbl.Dispose();
}
aspx页面
aspx page
<div>
<big>FIFA World Cup: Country appearances in the final four</big>
<div> </div>
<div id="mydiv"></div>
</div>
<input type="hidden" id="hdnTags" runat="server" />
<script type="text/javascript">
var s_cloudstring = document.getElementById("<%= hdnTags.ClientID %>").value;
google.load("visualization", "1");
// Set callback to run when API is loaded
google.setOnLoadCallback(drawVisualization);
// Called when the Visualization API is loaded.
function drawVisualization() {
// Create and populate a data table.
var data = new google.visualization.DataTable();
data.addColumn(''string'', ''Tag'');
data.addColumn(''string'', ''URL'');
data.addRows(3);//here you pass the count of record through hidden fields from code behind
var arrTags = s_cloudstring.split(";");
if(arrTags.length>1){
for (var i = 0; i < arrTags.length; i++) {
if (arrTags[i] == "") break;
var arrInnerString = arrTags[i].split(",");
data.setCell(i, 0, arrInnerString[0]);
data.setCell(i, 1, arrInnerString[1]);
}
}
// Instantiate our table object.
var vis = new gviz_word_cumulus.WordCumulus(document.getElementById(''mydiv''));
// Draw our table with the data we created locally.
vis.draw(data, { text_color: ''#ff00ff'', speed: 100, width: 500, height: 500 });
}
</script>
希望这会有所帮助.
欢呼
Hope this helps.
cheers
这篇关于使用jqery进行云标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
