Load a Query

the JCSDL output generated by the Query Builder reflects the state of the editor, it can be loaded into the Query Builder to rebuild a previously created query.

You could load JCSDL dynamically from:

  • a text area that prompts a user to submit a JCSDL query
  • JCSDL code embedded in the HTML
  • JCSDL loaded via AJAX
  • a Javascript variable

Once the Query Builder has been initialized, you can load pre-created JCSDL code into it.

In the following example we will create an input field and a button to trigger the load function. A function than reads out the JSCDL code from the input field, and passes it to the Query Builder.

Here is an example HTML code, with the input field and load query button:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>JCSDL Editor | Load query example</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="jcsdl/jcsdl.min.css" />
<script type="text/javascript" src="jcsdl/jcsdl.definition.js"></script>
<script type="text/javascript" src="jcsdl/jcsdl.min.js"></script>
</head>

<body>

<div id="jcsdl"></div>
<textarea name="jcsdl-input"></textarea>
<br />

<a href="#" id="load-jcsdl">Load query</a>

<script type="text/javascript">
var editor = new JCSDLGui('#jcsdl', {
});

// read the JCSDL upon clicking the "Load JCSDL" button
$('#load-jcsdl').click(function() {
    // read it from the input textarea
    var code = $('textarea[name="jcsdl-input"]').val();
    // load it into the editor
    editor.loadJCSDL( code );
});

</script>

</body>
</html>