Category Archives: Ajax

ajax golang

app.yaml

application: ajax-test
version: 1
runtime: go
api_version: go1.8

handlers:
- url: /html
  static_dir: static/html
- url: /js
  static_dir: static/js
- url: /.*
  script: _go_app

main.go

package app

import (
    "fmt"
    "html/template"
    "log"
    "net/http"
)

func init() {
    http.HandleFunc("/", handler)
    http.HandleFunc("/ajax", ajaxHandler)
    http.HandleFunc("/hello", helloHandler)
}

func handler(w http.ResponseWriter, r *http.Request) {
    t, err := template.New("template").ParseFiles("index.tmpl")
    if err != nil {
        log.Print("error", err)
    }
    t.ExecuteTemplate(w, "index", nil)
}

func ajaxHandler(w http.ResponseWriter, r *http.Request) {
    log.Print(r.URL.RawQuery)
    fmt.Fprintf(w, "Hello, ajax!")
}

func helloHandler(w http.ResponseWriter, r *http.Request) {
    fmt.Fprintf(w, "Hello, World")
}

index.tmpl

{{define "index"}}
<html>
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</head>
<body>
<div class="container">
  <select>
    <option value=""></option>
    <option value="1">one</option>
    <option value="2">two</option>
  </select>
  <div id="ajax"></div>
</div>
</body>
</html>
{{end}}

static/html/ajax.html

<p>ajax!</p>

static/js/app.js

$(function() {
  $('select').change(function() {
    $.ajax({
        url: "ajax",
        type: 'GET',
        data: {val:"test"},
        timeout: 10000,
        dataType: 'html'
    }).done(function (data) {
      $('#ajax').html(data)
    }).fail(function (data) {
    }).always(function (data) {
   });
  })
});

select2 ajax カスタマイズ(kintone js api使用)

古い書き方
select boxを正しく選択できない不具合あり

function appendSelectContent(event){
  var $select = newSelectContent();
  var $div = $('<div>');
  $div.append($select);
  kintone.app.record.getSpaceElement('selectField').append($div[0])
  $select.select2({
    placeholder: '選択してください',
    width: '200px',
    minimumInputLength: 1,
    query: function (query) {
      var queryStr = "name like \"" + query.term + "\""
      getRecords(99, queryStr, function(resp){
        var data = {results: []};
        $.each(resp.records, function(i,v){
          data.results.push({id: i+1, text: v.name.value})
        });
        query.callback(data);
      })
    }
  });
  return event
}

新しい書き方

function appendSelectContent(event){
  var $select = newSelectContent();
  var $div = $('<div>');
  $div.append($select);
  kintone.app.record.getSpaceElement('selectField').append($div[0])

  $.fn.select2.amd.define('select2/data/customAdapter',[
          'select2/data/array',
          'select2/utils'
      ],
      function (ArrayAdapter, Utils) {
          function CustomDataAdapter ($element, options) {
              CustomDataAdapter.__super__.constructor.call(this, $element, options);
          }
          Utils.Extend(CustomDataAdapter, ArrayAdapter);
          CustomDataAdapter.prototype.query = function (params, callback) {
            var data = {results: []};
            var query = "name like \"" + params.term + "\""
            getRecords(99, query, function(resp){
              $.each(resp.records, function(i,v){
                data.results.push({id: i+1, text: v.name.value})
              });
              callback(data);
            })
          };
          return CustomDataAdapter;
      }
  );
  var customAdapter=$.fn.select2.amd.require('select2/data/customAdapter');
  $select.select2({
    placeholder: '選択してください',
    width: '200px',
    minimumInputLength: 1,
    dataAdapter: customAdapter
  });
  return event
}

参考

http://select2.github.io/select2/