File: example.html

Recommend this page to a friend!
  Classes of Yorch Ponce   v3sdk   example.html   Download  
File: example.html
Role: Example script
Content type: text/plain
Description: Documentation
Class: v3sdk
Store and retrieve objects in V3ctor WareHouse
Author: By
Last change: Update of example.html
Date: 2 years ago
Size: 5,701 bytes
 

Contents

Class file image Download 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="V3ctor JsonP">
    <meta name="author" content="Yorch">

    <title>V3ctor WareHouse JavaScript SDK</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

    <link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/yeti/bootstrap.min.css" rel="stylesheet" integrity="sha384-yxFy3Tt84CcGRj9UI7RA25hoUMpUPoFzcdPtK3hBdNgEGnh9FdKgMVM+lbAZTKN2" crossorigin="anonymous">

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    
    <script src="V3SDK.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <style type="text/css">
      body {
        padding-top: 10px;
        padding-bottom: 10px;
      }

      .navbar {
        margin-bottom: 5px;
      }

      .modal-xl {
        width: 90%;
        max-width:1200px;
      }
    
      .jumbotron {
        background-color:#FFF;
      }

    </style>
    <script type="text/javascript">    
      // Js Api Function
      v3 = null;

      // Init Jquery
      $(document).ready( function() {
        v3 = new V3SDK("https://v3-yorch.rhcloud.com/", "lYltuNtYYbYRFC7QWwHn9b5aH2UJMk1234567890");

        // Option Credits
        $("#btn_credits").click(function() {
          $('#window-credits').modal('toggle');
        });

        // New
        $("#btnNew").click(function() {
          v3obj = {client: "V3ctor Js SDK", message: $("#txtMessage").val()};

          v3.newObject("jsdk", v3obj, function(data){
            console.log(data);
            
            $("#txtMessage").val("");
            $("#txtId").val(V3SDK.getId(data));  
          });
        });

        // Find
        $("#btnFind").click(function() {
          var id = $("#txtId").val();

          v3.findObject("jsdk", id, function(data){
            console.log(data);
          });
        });

        // Query
        $("#btnQuery").click(function() {
          var id = $("#txtId").val();

          var v3Query = {message: $("#txtMessage").val()};

          v3.query("jsdk", v3Query, function(data){
            console.log(data);
          });

        });

        // Update
        $("#btnUpd").click(function() {
          var v3obj= {msg: $("#txtMessage").val()};

          var id = $("#txtId").val();

          v3.updateObject("jsdk", id, v3obj, function(data){
            console.log(data);
          });
        });

        // Delete
        $("#btnDel").click(function() {
          var id = $("#txtId").val();

          v3.deleteObject("jsdk", id, function(data){
            console.log(data);
          });

        });

      });      
    </script>
  </head>

  <body>

    <div class="container">
      <nav class="navbar navbar-default">
        <div class="container-fluid">
          <div class="navbar-header">
            <a class="navbar-brand" href="#">V3ctor Js SDK</a>
          </div>
          
          <div id="navbar" class="navbar-collapse collapse">
          
          
          <ul class="nav navbar-nav navbar-right">
            <li class="active" id="btn_credits"><a href="#">Credits <span class="sr-only">(current)</span></a></li>
          </ul>
        </div>
        </div><!--/.container-fluid -->
      </nav>
       
      <div class="container">
        <div  class="jumbotron">
          <label for="txtId">Mongo Id:</label>
          <input id="txtId" type="text" class="form-control" placeholder="id" name="txtId" disabled>
          
          <br>

          <label for="txtMessage">Message:</label>
          <input id="txtMessage" type="text" class="form-control" placeholder="Message" name="txtMessage">
          
          <br>

          <button id="btnNew" class="btn btn-success"> NEW </button>
          <button id="btnFind" class="btn btn-success"> FIND </button>
          <button id="btnQuery" class="btn btn-success"> QUERY </button>
          <button id="btnUpd" class="btn btn-success"> UPD </button>
          <button id="btnDel" class="btn btn-success"> DEL </button>
        </div>
      </div>

      <!-- Static Modal Credits -->
      <div class="modal fade" id="window-credits" role="dialog" aria-hidden="true">
          <div class="modal-dialog">
              <div class="modal-content">
                  <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                      <h4 class="modal-title">Cr&eacute;ditos</h4>
                   </div>

                  <div class="modal-body">
                      <center>
                          <p><h3>Jorge Alberto Ponce Turrubiates</h3></p>
                          <p><h5><a href="mailto:the.yorch@gmail.com">the.yorch@gmail.com</a></h5></p>
                          <p><h5><a href="http://the-yorch.blogspot.mx/">Blog</a></h5></p>
                          <p><h5><a href="https://bitbucket.org/yorch81">BitBucket</a></h5></p>
                          <p><h5><a href="https://github.com/yorch81">GitHub</a></h5></p>
                          <p></p>
                      </center>
                  </div>
              </div>
          </div>
      </div>
    </div> 

  </body>
</html>