Listing the operators in html table

The following code shows the list of the operators in html table.

  1: <!DOCTYPE html>
  2:  <style>
  3:  .imgstl
  4:    {
  5:   
  6:    }
  7:  .imgstl2
  8:    {
  9:    margin:2px;
 10:    border:1px solid #0000ff;
 11:    height:50px;
 12:    width:50px;
 13:    float:left;
 14:    text-align:center;
 15:    }
 16:  div.img img
 17:    {
 18:    display:inline;
 19:    margin:3px;
 20:    border:1px solid #ffffff;
 21:    }
 22:  div.img a:hover img
 23:    {
 24:    border:1px solid #0000ff;
 25:    }
 26:  div.desc
 27:    {
 28:    text-align:center;
 29:    font-weight:normal;
 30:    width:120px;
 31:    margin:2px;
 32:    }
 33:  </style>
 34: <html lang="en">
 35: <head>
 36:     <title>Routes Web API</title>
 37:     <link href="../../Content/Site.css" rel="stylesheet" />
 38:  
 39: </head>
 40:    
 41: <body id="body" >
 42:     <div class="main-content">
 43:         <div>
 44:             <h1>All Operators</h1>
 45:             <ul id="OperatorsList"/>
 46:         </div>
 47:         <div>
 48:             <input type="button" id="CallWebApi" value="Call web api" />
 49:             <p id="product" /> 
 50:         </div>
 51:     </div>
 52: 
 53:     <div id="dynamicTable">
 54:     </div>
 55: 
 56:       <script src="../../Scripts/jquery-1.8.2.js"></script>
 57:        <script> 
 58:            $(document).ready(function () {
 59:                
 60:                $("#CallWebApi").on("click", function (event) {
 61: 
 62:                    // create table
 63:                    var $table = $('<table>');
 64:                    // caption
 65:                    $table.append('<caption>Operators List</caption>')
 66:                    // thead
 67:                    .append('<thead>').children('thead')
 68:                    .append('<tr />').children('tr').append('<th>Photo</th><th>Name</th>');
 69: 
 70:                    //tbody
 71:                    var $tbody = $table.append('<tbody />').children('tbody');
 72: 
 73:                    var theOperatorTable = $("#OperatorTable");
 74:                             
 75:                    // Send an AJAX request
 76:                   
 77:                    $.getJSON("api/OperatorData/",
 78:                    function (data) {
 79:                        // On success, 'data' contains a list of products.
 80:                        $.each(data, function (key, val) {
 81:                            
 82:                            var theOperatorName = val.Name ;
 83: 
 84:                            var theOperatorImage = val.OperatorImage;
 85:                          
 86:                            var theNewRow = $tbody.append('<tr />').children('tr:last');
 87: 
 88:                            var theNewTD = theNewRow.append("<td></td>").children('td:last');
 89: 
 90:                            $('<img  />', { src: "http://localhost:20385/api/Images/" + theOperatorImage }).
 91:                              appendTo(theNewTD);
 92: 
 93:                       //     $('#table_header td:nth-child(3)').html('the content');
 94: 
 95:                            theNewRow.append("<td>" + theOperatorName + "</td>")
 96:                       
 97:                        });
 98: 
 99:                        // add table to dom
100:                        $table.appendTo('#dynamicTable');
101: 
102:                    });                 
103:                });
104:          });
105:         
106:        </script>
107: </body>
108: </html>

Resources
http://www.jquery4u.com/plugins/30-amazing-jquery-tables/

Continue the Searching in Rails

Update the view
Add search form and handle the submit using jquery

  1: <%=form_for :searchP ,:html => { :id => "Start_Search_Form" } do |f| %>
  2:   <fieldset>
  3:     <legend>Search for operator</legend>
  4:     <%= f.label :pharse %>
  5:     <%= f.text_field :pharse,:size=>"45",:class=>"round",:id=>"pharse" %><br/>      
  6:  <p><%= button_to "Start Search",{:class=>"SearchButton"} %></p> 
  7:  </fieldset>
  8:  
  9: <%end%>
 10: 
 11: <script src="../../Scripts/jquery-1.8.2.js"></script>
 12: <script>
 13: 
 14: $('#Start_Search_Form').submit(function() {  
 15:     var valuesToSubmit = $(this).serialize();
 16: 
 17:   alert (valuesToSubmit);
 18:   
 19:     $.ajax({
 20:         url: $(this).attr('StartSearch'), //sumbits it to the given url of the form
 21:         data: valuesToSubmit,
 22:         dataType: "JSON" // you want a difference between normal and ajax-calls, and json is standard
 23:     }).success(function(json){
 24:        alert (json);
 25:     });
 26:     return false; // prevents normal behaviour
 27: });
 28: 
 29: </script>

note the changing of the rails form id

and the result:
 

Resources

http://stackoverflow.com/questions/6723334/submit-form-in-rails-3-in-an-ajax-way-with-jquery
http://stackoverflow.com/questions/8682076/change-html-form-id-generated-by-form-for-rails-3-1

Using map get and join

The Jquery code and html:

  1: <!DOCTYPE html>
  2: <html xmlns="http://www.w3.org/1999/xhtml">
  3: <head>
  4:     <title></title>
  5:     <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  6: </head>
  7: <body>
  8:     <h2>To do list</h2>
  9: <ul>
 10: <li>
 11: <input  type="checkbox" class="ToDoChkBox" alt="Todo1"/><i>Learn Neo4j</i>
 12: </li>
 13: <li>
 14: <input type="checkbox" class="ToDoChkBox" alt="Todo2"/><i>Learn Camel</i>
 15: </li>
 16: <li>
 17: <input type="checkbox" class="ToDoChkBox" alt="Todo3"/><i>Learn Hadoop</i> 
 18: </li>
 19: <li>
 20: <input type="checkbox" class="ToDoChkBox" alt="Todo14" /><i>Learn Linux Kernel</i> 
 21: </li>
 22: </ul>
 23: 
 24: <h6>Things To learn:</h6>
 25: <div id="ThingsToLearn">123</div>
 26: 
 27: </body>
 28: <script>
 29:    
 30:     function UpdateThingsToLearn() {
 31:         var allTitles = $('.ToDoChkBox:checked').map(function () {          
 32:             var theLi = $(this).closest('li');           
 33:             var theIElement = $("i", theLi[0]);
 34:             return theIElement.text();
 35:         }).get().join(" and ");
 36:         $('#ThingsToLearn').html(allTitles);
 37:     }
 38: 
 39:     $(function () {
 40:         $('.ToDoChkBox').click(function () {
 41:            
 42:             UpdateThingsToLearn();
 43:         });
 44:     });
 45: </script>
 46: </html>

The Result

Retrieving Images from WebApi

Part of the operator profile I need to add the operator image.
I add an image ID (key) Field to the modal.

  1: namespace MvcApplication1.Models
  2: {
  3:     public class Operator
  4:     {
  5:         public Operator()
  6:         {
  7: 
  8:         }
  9:         [Key]
 10:         public int Id { get; set; }
 11: 
 12:         private string mName;
 13: 
 14:         public string Name
 15:         {
 16:             get { return mName; }
 17:             set { mName = value; }
 18:         }
 19: 
 20:         private string mOperatorImage;
 21:          
 22:         public string  OperatorImage
 23:         {
 24:             get { return mOperatorImage; }
 25:             set { mOperatorImage = value; }
 26:         }
 27:     }
 28: }

Change the cshtml view to display the Operator Image

  1: <body id="body" >
  2:     <div class="main-content">
  3:         <div>
  4:             <h1>All Operators</h1>
  5:             <ul id="OperatorsList"/>
  6:         </div>
  7:         <div>
  8:             <input type="button" id="CallWebApi" value="Call web api" />
  9:             <p id="product" />
 10:             <img src="http://localhost:20385/api/Images/5"//>
 11:         </div>
 12:     </div>
 13:       <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 14:        <script>
 15:          
 16:            $(document).ready(function () {
 17:                
 18:                $("#CallWebApi").on("click", function (event) {
 19:                    // Send an AJAX request
 20:                    $.getJSON("api/OperatorData/",
 21:                    function (data) {
 22:                        // On success, 'data' contains a list of products.
 23:                        $.each(data, function (key, val) {
 24:                            
 25:                            var theOperatorName = val.Name ;
 26: 
 27:                            var theOperatorImage = val.OperatorImage;
 28: 
 29:                            $('<img/>', { src: "http://localhost:20385/api/Images/" + theOperatorImage }).
 30:                                appendTo($('#OperatorsList'));
 31: 
 32:                            // Add a route for the routes list.
 33:                            $('<li/>', { text: theOperatorName })
 34:                            .appendTo($('#OperatorsList'));
 35:                        });
 36:                    });
 37:                });
 38:          });
 39:         
 40:        </script>
 41: </body>

In order to retrieve the image we are posting a request to ImagesController.

Add the Images controller :

  1: 
  2: namespace MvcApplication1.Controllers
  3: {
  4:     public class ImagesController : ApiController
  5:     {
  6:         public ImagesController()
  7:         {
  8: 
  9:         }
 10: 
 11:         // GET api/Images/5
 12:         public HttpResponseMessage Get(string id)
 13:         {
 14:             HttpResponseMessage response = new HttpResponseMessage();
 15:           
 16:             var Fs = new FileStream(@"C:\temp\zvika.png", FileMode.Open);
 17:         
 18:             Image img = Image.FromStream(Fs);
 19:             Fs.Close();
 20:             Fs.Dispose();
 21: 
 22:             MemoryStream ms = new MemoryStream();
 23:             img.Save(ms, ImageFormat.Png);
 24: 
 25: 
 26:             response.Content = new ByteArrayContent(ms.ToArray());
 27:             ms.Close();
 28:             ms.Dispose();
 29: 
 30:             response.Content.Headers.ContentType = new MediaTypeHeaderValue("image/png");
 31:             response.StatusCode = HttpStatusCode.OK;
 32: 
 33:             return response;
 34:         }
 35:     }
 36: }

and walla

Resources

http://www.dotnetcurry.com/ShowArticle.aspx?ID=856

Very simple web api call part 1

Create a new project based of web api template.
The view
Replace all the content of Index.cshtml with the following code

  1: <!DOCTYPE html>
  2: <html lang="en">
  3: <head>
  4:     <title>Routes Web API</title>
  5:     <link href="../../Content/Site.css" rel="stylesheet" />
  6:  
  7: </head>
  8: <body id="body" >
  9:     <div class="main-content">
 10:         <div>
 11:             <h1>All Routes</h1>
 12:             <ul id="RoutesList"/>
 13:         </div>
 14:         <div>
 15:             <input type="button" id="CallWebApi" value="Call web api" />
 16:             <p id="product" />
 17:         </div>
 18:     </div>
 19:       <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 20:        <script>
 21:          
 22:            $(document).ready(function () {
 23:                
 24:                $("#CallWebApi").on("click", function (event) {
 25:                    // Send an AJAX request
 26:                    $.getJSON("api/values/",
 27:                    function (data) {
 28:                        // On success, 'data' contains a list of products.
 29:                        $.each(data, function (key, val) {
 30: 
 31:                            // Format the text to display.
 32:                            var theRouteName = val.Name ;
 33: 
 34:                            // Add a route for the routes list.
 35:                            $('<li/>', { text: theRouteName })
 36:                            .appendTo($('#RoutesList'));
 37:                        });
 38:                    });
 39:                });
 40:          });
 41:         
 42:        </script>
 43: </body>
 44: </html>

The modal
Create a simple Route modal

  1: using System;
  2: using System.Collections.Generic;
  3: using System.Linq;
  4: using System.Web;
  5: 
  6: namespace MvcApplication1.Models
  7: {
  8:     public class Route
  9:     {
 10:         public Route()
 11:         {
 12: 
 13:         }
 14:         public int Id { get; set; }
 15:         public string Name { get; set; }
 16:     }
 17: }

The controller
change the values controller as follow

  1: using System;
  2: using System.Collections.Generic;
  3: using System.Linq;
  4: using System.Net;
  5: using System.Net.Http;
  6: using System.Web.Http;
  7: using MvcApplication1.Models;
  8: 
  9: namespace MvcApplication1.Controllers
 10: {
 11:     public class ValuesController : ApiController
 12:     {
 13:         Route[] Routes = new Route[] 
 14:         { 
 15:             new Route { Id = 1, Name = "To Scoll" }, 
 16:             new Route { Id = 2, Name = "To Home" } 
 17:         };
 18:         public ValuesController()
 19:         {
 20: 
 21:         }
 22:         // GET api/values
 23:         public IEnumerable<Route> Get()
 24:         {
 25:             return Routes; 
 26:         }
 27: 
 28:         // GET api/values/5
 29:         public string Get(int id)
 30:         {
 31:             return "value";
 32:         }
 33: 
 34:         // POST api/values
 35:         public void Post([FromBody]string value)
 36:         {
 37:         }
 38: 
 39:         // PUT api/values/5
 40:         public void Put(int id, [FromBody]string value)
 41:         {
 42:         }
 43: 
 44:         // DELETE api/values/5
 45:         public void Delete(int id)
 46:         {
 47:         }
 48:     }
 49: }

The Result after clicking the button:

using switch in javascript

The following script demonstrate the use of switch statement in javascript
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
   <body>
       <p>Click the button to display the current Date.</p
       <button id="GetCurrentDateBtn">Get current Date</button>
        <p id="CurrentDate"></p>
</body>

</html>
<script src="Scripts/jquery-1.7.1.js"></script>
<script>

    $(document).ready(function () {
        $("#GetCurrentDateBtn").on("click", function ()
        {
            HandleTheCurrentDateDispaying();
        });     
    });

    function HandleTheCurrentDateDispaying()
    {
        var theDayDiscreption ;
        var theDay = new Date().getDay();
        switch (theDay) {
            case 0:
                theDayDiscreption = "Sun";
                break;
            case 1:
                theDayDiscreption = "Mon";
                break;
            case 2:
                theDayDiscreption = "tue";
                break;         
            default:
                theDayDiscreption = "Sat";
        }

        $("#CurrentDate").text("<i>" + theDayDiscreption + "</i>");
    }
       
</script>