Querying bucket from webpage

Cyteis Help

In this tutorial, we will be dynamically updating a page using a data bucket and JavaScript (jQuery). Please make sure that you are familiar with the following topics from the data storage tutorial and the Javascript tutorial:

  1. Creating a bucket
  2. Importing CSV data
  3. Integrating it with a page
  4. Browsing and searching the bucket
  5. Creating a Javascript file and uploading it using the File Manager
  6. Linking the Javascript file within a page
Contents
  1. Querying from Page
  2. Conclusion

Querying from Page

Please create a new page (or use an existing page) and then create a public data bucket with the name difficultylevels and import the following CSV data into it:

"category","description"
"Easy","You are viewing the Easy category."
"Intermediate","You are viewing the Intermediate category."
"Expert","You are viewing the Expert category."


Please go to the page of your choice and edit a section (such as, the "main" section) in Edit Page Design. Please create a form with a drop down and a button as follows:
  

Please create another form with the name easyexpertform and a button with a name btneasyexpert and value Click here.


You should have the following layout:


We still need to provide the code to query the data bucket. Please create a .js file and enter the following code within it:

$(document).ready(function() {
/* code executed when the document is loaded */
	$("input[name = 'btnlevel']").click(function() {
/* code executed when the first button is clicked */
    	var difficulty = $("select[name='difficultylevel']").val(); /* value of the selected dropdown */
		$.ajax({ /* ajax query to Cyteis to provide the Json result */
/* append downdown value to the query */
            "url": '/querydata/Help/demo-bucket-page-querying/difficultylevels?query=' + difficulty, 
            "success": function(json) { // json result
                var result = jQuery.parseJSON(json); /* parse the result, as explained in the tutorial */
/* append the value of the second and third column, [0] refers to the first column */
                $.each(result.rows, function(i, val){ 
/* append to the main section */
                	$('#main').append('<h2>' + val[1] + '</h2> <p>' + val[2] + '</p>') 
                });
        }
        });
    })
    


    $("input[name = 'btneasyexpert']").click(function() {
/* code executed when the second button is clicked */
		$.ajax({ // ajax query to Cyteis to provide the Json result
/* get the results with "Easy" or "Expert" (a boolean query) */
            "url": '/querydata/Help/demo-bucket-page-querying/difficultylevels?query=Easy or Expert',
            "success": function(json) { // json result
                var obj = jQuery.parseJSON(json); /* parse the result, as explained later in the tutorial */
                $.each(obj.rows, function(i, val){ // for each result row 
                  row = ""
                  $.each(val, function(i, valrow){ // for each row's column
                    row += valrow + " " // append to the string variable
                  })
                  $('#main').append(row + '<br>') // append to the main section
        	});
        	}
        });
    })
});


The json result has the following structure:  {"columns":[..columns...],"rows":[[...row1...],[...row2...]]}. For example: {"columns":["timestamp","category","description"],"rows":[["201601301251","Easy","You are viewing the Easy category."],["201601301251","Expert","You are viewing the Expert category."]]}

Please upload the .js file using the File Manager and add the following to the Header (subtituting for your site, folder and file):

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="/files/{site}/{folder}/{file}.js"></script>

Please save the Header and view the page. When you click on the Change button, you should see the content of the matching dropdown selection being appended to the main section. Also, when you click on the Click here button, you should see the entire row contents being appended to the main section.

Conclusion

In this tutorial, we went over how to query the data bucket from a page dynamically, which can be used to retrieve data from a bucket on-the-fly and to create simple web applications.

Comments