Cloud Tagging using jqery

Question

0.00/5 (No votes)

See more:

, +

Hi all

I am trying to do cloud tagging.
I found HTML and JQuery code to implement this one.
Code:

HTML

<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>

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

SQL

SELECT DISTINCT TAG_NAME FROM TAGS;

Please help me to solve this problem.

thanks in advance.

Posted 14-Aug-12 3:01am

Mac12334

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Rai Pawan · Accepted Answer · 2012-08-14T03:47:00

Solution 1

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));

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

Posted 14-Aug-12 3:47am

Rai Pawan

Comments

Mac12334 14-Aug-12 9:59am

Can you please paste the entire solution.
Means:Total Html + Ajax and what ever required please post here.
Actually i don't know ajax and how to call and write ajax.
So please write all the code
so that it will be more helpful.

Rai Pawan 15-Aug-12 5:26am

you can check this tutorial at codeproject http://www.codeproject.com/Articles/170882/jQuery-AJAX-and-HttpHandlers-in-ASP-NET
I am assuming that since you've included asp.net in your question tag, you are well versed with the basics of asp.net/c#.net. I'd have liked to give an example myself "had I not been so bussy :( ". Though i think the example will guide you and you will pick up with how to use ajax
Regards
Pawan

Mac12334 16-Aug-12 1:33am

Thanks Rai Pawan

Sandip.Nascar · Accepted Answer · 2012-08-21T08:51:00

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 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