jsonpをつかって異なるドメインにjsonなげて保存した

2017.10.28 Saturday 21:22
0
    クロスドメイン問題は jsonpで解決した
    javascript で指定する受信側の phpファイル内に
    header('Content-Type: application/javascript');
    を記載した

    なげるjquery側では
    $.getJSON("http://xxx/xxx_save.php?callback=?",
    {
    json: r_json
    }
    );
    とした
    この2点のみだった

    Refused to execute script from because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
    Uncaught SyntaxError: Unexpected token : for a cross domain json ...
    category:javascript | by:ittoocomments(0)trackbacks(0) | -

    javascript で json送ろうとしたらエラー

    2017.10.27 Friday 07:53
    0
      javascript で json送ろうとしたら以下のエラー

      No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.

      category:javascript | by:ittoocomments(0)trackbacks(0) | -

      RWD-table sample javascript

      2016.11.10 Thursday 23:55
      0
        <html>
        <head>
        <meta charset="utf-8" />

        <title>Responsive tables</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, minimal-ui">
        <meta name="format-detection" content="telephone=no">
        <meta name="description" content="An awesome solution for responsive tables with complex data.">

        <!-- Font Awesome -->
        <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

        <!-- Latest compiled and minified Bootstrap CSS -->
        <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
        <link rel="stylesheet" href="rwd-table.css">

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="http://localhost/testjs/examples/rwd-table.js"></script>

        </head>

        <body>


        <!--&#91;if lt IE 7 &#93;> <html lang="en" class="no-js lt-ie10 lt-ie9 lt-ie8 lt-ie7"> <!&#91;endif&#93;-->
        <!--&#91;if IE 7 &#93;> <html lang="en" class="no-js lt-ie10 lt-ie9 lt-ie8"> <!&#91;endif&#93;-->
        <!--&#91;if IE 8 &#93;> <html lang="en" class="no-js lt-ie10 lt-ie9"> <!&#91;endif&#93;-->
        <!--&#91;if IE 9 &#93;> <html lang="en" class="no-js lt-ie10"> <!&#91;endif&#93;-->
        <!--&#91;if (gt IE 9)|!(IE)&#93;><!--> <html lang="en" class="no-js"> <!--<!&#91;endif&#93;-->


        <h2>Responsive Table with RWD-Table-Patterns</h2>

        <div class="container">
        <div class="row">
        <div class="col-xs-12">

        <div class="table-responsive" data-pattern="priority-columns">
        <table class="table table-small-font table-bordered table-striped">
        <thead>
        <tr>
        <th>Country</th>
        <th data-priority="1">Languages</th>
        <th data-priority="2">Population</th>
        <th data-priority="3">Median Age</th>
        <th data-priority="4">Area (Km)</th>
        </tr>
        </thead>
        <tbody>
        <tr>
        <td>Argentina</td>
        <td>Spanish (official), English, Italian, German, French</td>
        <td>41,803,125</td>
        <td>31.3</td>
        <td>2,780,387</td>
        </tr>
        <tr>
        <td>Australia</td>
        <td>English 79%, native and other languages</td>
        <td>23,630,169</td>
        <td>37.3</td>
        <td>7,739,983</td>
        </tr>
        <tr>
        <td>Greece</td>
        <td>Greek 99% (official), English, French</td>
        <td>11,128,404</td>
        <td>43.2</td>
        <td>131,956</td>
        </tr>
        <tr>
        <td>Luxembourg</td>
        <td>Luxermbourgish (national) French, German (both administrative)</td>
        <td>536,761</td>
        <td>39.1</td>
        <td>2,586</td>
        </tr>
        <tr>
        <td>Russia</td>
        <td>Russian, others</td>
        <td>142,467,651</td>
        <td>38.4</td>
        <td>17,076,310</td>
        </tr>
        <tr>
        <td>Sweden</td>
        <td>Swedish, small Sami- and Finnish-speaking minorities</td>
        <td>9,631,261</td>
        <td>41.1</td>
        <td>449,954</td>
        </tr>
        </tbody>
        </table>
        </div><!--end of .table-responsive-->
        </div>
        </div>
        </div>
        </body>
        </html>
        ★★★★★
        <html>
        <head>
        <meta charset="utf-8" />

        <title>Responsive tables</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, minimal-ui">
        <meta name="format-detection" content="telephone=no">
        <meta name="description" content="An awesome solution for responsive tables with complex data.">

        <!-- Font Awesome -->
        <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

        <!-- Latest compiled and minified Bootstrap CSS -->
        <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
        <link rel="stylesheet" href="css/rwd-table.min.css">

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="js/rwd-table.js"></script>

        </head>

        <body>

        <div class="table-responsive" data-pattern="priority-columns">
        <table class="table table-small-font table-bordered table-striped">
        <thead>
        <tr>
        <th>Company</th>
        <th data-priority="1">Last Trade</th>
        <th data-priority="3">Trade Time</th>
        <th data-priority="1">Change</th>
        <th data-priority="3">Prev Close</th>
        <th data-priority="3">Open</th>
        <th data-priority="6">Bid</th>
        <th data-priority="6">Ask</th>
        <th data-priority="6">1y Target Est</th>
        <th data-priority="6">Lorem</th>
        <th data-priority="6">Ipsum</th>
        </tr>
        </thead>
        <tbody>
        <tr>
        <th>GOOG <span class="co-name">Google Inc.</span></th>
        <td>597.74</td>
        <td>12:12PM</td>
        <td>14.81 (2.54%)</td>
        <td>582.93</td>
        <td>597.95</td>
        <td>597.73 x 100</td>
        <td>597.91 x 300</td>
        <td>731.10</td>
        <td colspan="2">Spanning cell</td>
        </tr>
        ...
        </tbody>
        </table>
        </div>

        <script>
        $(function() {
        $('#bs-deps').on('hide.bs.collapse show.bs.collapse', function () {
        $('#bs-deps-toggle').children('span').toggleClass('fa-chevron-down').toggleClass('fa-chevron-up');
        })
        });
        </script>
        </body>
        </html>
        category:javascript | by:ittoocomments(0)trackbacks(0) | -

        Nightwatchは、seleniumを使ってNode.jsで書かれたWebアプリケーション自動テストフレームワーク

        2016.10.10 Monday 15:48
        0
          Nightwatchとは?
          Selenium WebDriver APIを使い、Node.jsで書かれたWebアプリケーション/Webサイト用の
          自動テストフレームワーク

          nightwatchで参考になったサイト
          https://www.webprofessional.jp/javascript-functional-testing-nightwatch-js/

          Nightwatch自体はNode.jsモジュールで、Nodeをマシンにインストールする必要があります。
          もっとも簡単な方法はnvmなどのバージョンマネージャーを使用することです。
          Nightwatchはnpmで配布されるので、そのほかのモジュールと同じように、-gでグローバルにインストールするか、
          -save-devで現在のプロジェクト内にインストールします。

          Nightwach.jsはNode.jsベースのE2E(End-to-End)テストフレームワーク
          テストブラウザを操作する仕組みであるSelenium WebDriverのAPIを仲介して各種ブラウザ操作を行い、
          ブラウザの挙動が期待したものと合致しているかをテストするために用います。


          http://blog.mmmcorp.co.jp/blog/2015/09/24/use-nightwatch/
          公式ドキュメントのDeveloper Guideに従ってインストールします。
          必要なステップ
          1 nightwatch本体のインストール
          2 Selenium Server のインストール


          Nightwatch.jsとは
          Nightwatch.jsはNode.js上で動作するエンドツーエンド(E2E)のテストフレームワークのことで、
          Webブラウザーの自動化促進を目的としたプロジェクトSeleniumに依存します。
          ヒューマンフレンドリーな構文を通じて、Nightwatch.jsはブラウザーが自動的に再生する
          「スクリプト」のシナリオを可能にします(必ずしもヘッドレスブラウザーではありません)。


          npm install --save-dev nightwatch
          NightwatchはSelenium WebDriver APIに依存するため、Java上で実行するSelenium WebDriverサーバーを必要とします。
          つまりJava Development Kit(JDK 7+)もインストールする必要があります。JDKはOracleのWebサイトからダウンロードできます。
          ダウンロードしてインストールしたら、java -versionのあるマシン上でJavaを正常に利用できるか確認できます。
          最後のステップは、Seleniumのダウンロードページから
          Seleniumスタンドアロンサーバーパッケージをjarとしてダウンロードすることです。
          パッケージはプロジェクト内のbinフォルダに置いてください

          ・手順
          ・npm install --save-dev nightwatch
          ・selenium-server-standalone-3.0.0-beta3.jar ダウンロード
          ・geckodriverないと怒られる場合がある

          ・selenium サーバー起動
          C:¥xampp¥htdocs¥nightwatch2>java -jar selenium-server-standalone-3.0.0-beta3.jar -port 4444

          ・geckodriver-v0.10.0-win64.zip
          C:¥xampp¥htdocs¥nightwatch2¥geckodriver-v0.10.0-win64.zip

          ・テスト実行方法
          ¥nightwatch2>.¥node_modules¥.bin¥nightwatch tests¥app-spec.js



          ・設定ファイル
          htdocs¥nightwatch2¥nightwatch.json

          {
          "src_folders" : ["tests"],
          "output_folder" : "reports",
          "selenium" : {
          "start_process" : false
          },
          "test_settings" : {
          "default" : {
          "selenium_port" : 4444,
          "selenium_host" : "127.0.0.1",
          "silent": true,
          "screenshots": {
          "enabled" : true,
          "path" : "./reports"
          }
          }
          }
          }

          ・C:¥xampp¥htdocs¥nightwatch2¥tests
          ・app-spec.js
          'use strict';
          module.exports = {
          'Contents test' : function (browser) {
          browser
          .url('http://localhost/webdriver/test2.html')
          .pause(1000)
          .assert.title('Nightwatch.js Demo')
          .assert.containsText('#content', 'Hello, Nightwatch.js!')
          .end();
          }

          };


          ・google.js
          module.exports = {
          'Demo test Google' : function (client) {
          client
          .url('http://www.google.com')
          .waitForElementVisible('body', 1000)
          .assert.title('Google')
          .assert.visible('input[type=text]')
          .setValue('input[type=text]', 'rembrandt van rijn')
          .waitForElementVisible('input[name=btnK]', 1000)
          .click('input[name=btnK]')
          .pause(1000)
          .assert.containsText('ol#rso li:first-child',
          'レンブラント・ファン・レイン - Wikipedia')
          .end();
          }
          };

          ・test1.js
          module.exports = {
          "webdriverの検索ヒット数を表示する" : function (browser) {
          var timeoutMSec = 1500;
          browser
          .url("http://www.google.com")
          .setValue('[name="q"]', 'webdriver')
          .click('[name="btnG"]')
          .waitForElementPresent('#resultStats', timeoutMSec)
          .getText('#resultStats', function(res) {
          console.log(res.value);
          })
          .end();
          }
          };
          category:javascript | by:ittoocomments(0)trackbacks(0) | -

          selectboxと連動して表示内容を変える jqueryを使って

          2016.10.09 Sunday 00:25
          0
            selectboxと連動して表示内容を変える jqueryを使って


            <html>
            <head>
            <style type="text/css" title="currentStyle">
            </style>

            <script type="text/javascript" language="javascript" src="./media/js/jquery.js"></script>
            <script type="text/javascript">
            $(function(){
            $('#tr_type select[name="selectbox"]').change(function() {
            if ( $('select[name="selectbox"] option:selected').val() == 'select_type1') {
            $('#display_box1').css('display','block');
            $('#display_box2').css('display','none');
            $('#display_box3').css('display','none');
            $('#display_box4').css('display','none');
            } else if ( $('select[name="selectbox"] option:selected').val() == 'select_type2') {
            $('#display_box1').css('display','none');
            $('#display_box2').css('display','block');
            $('#display_box3').css('display','none');
            $('#display_box4').css('display','none');
            } else if ( $('select[name="selectbox"] option:selected').val() == 'select_type3') {
            $('#display_box1').css('display','none');
            $('#display_box2').css('display','none');
            $('#display_box3').css('display','block');
            $('#display_box4').css('display','none');
            } else if ( $('select[name="selectbox"] option:selected').val() == 'select_type4') {
            $('#display_box1').css('display','none');
            $('#display_box2').css('display','none');
            $('#display_box3').css('display','none');
            $('#display_box4').css('display','block');
            } else {
            $('#display_box1').css('display','none');
            $('#display_box2').css('display','none');
            $('#display_box3').css('display','none');
            $('#display_box4').css('display','none');
            }
            });
            });
            </script>


            </head>
            <body>


            <table>
            <tr id="tr_type">
            <th>タイプ</th>
            <td>
            <select name="selectbox">
            <option value="select_type1">本1
            <option value="select_type2">本2
            <option value="select_type3">本3
            <option value="select_type4">本4
            </select>
            </td>
            </tr>
            </table>

            <div id="display_box1">
            内容1
            </div>
            <div id="display_box2" style="display: none;">
            内容2
            </div>

            <div id="display_box3" style="display: none;">
            内容3
            </div>

            <div id="display_box4" style="display: none;">
            内容4
            </div>

            </body>
            </html>

            category:javascript | by:ittoocomments(0)trackbacks(0) | -

            ad
            Calender
               1234
            567891011
            12131415161718
            19202122232425
            2627282930  
            << November 2017 >>
            Selected entry
            PR
            Category
            Archives
            Recent comment
            • マクドナルドでYahoo BBモバイルポイント 公衆無線LANサービスがつながらない
              66hills
            • マクドナルドでYahoo BBモバイルポイント 公衆無線LANサービスがつながらない
              ssd
            • マクドナルドでYahoo BBモバイルポイント 公衆無線LANサービスがつながらない
              max
            • マクドナルドでYahoo BBモバイルポイント 公衆無線LANサービスがつながらない
              DOM
            • マクドナルドでYahoo BBモバイルポイント 公衆無線LANサービスがつながらない
              DOM
            • コンピュータ業界の根本的な変化
              cloud
            • コンピュータ業界の根本的な変化
              Dellの仮想化
            • マクドナルドでYahoo BBモバイルポイント 公衆無線LANサービスがつながらない
              えちごや
            • マクドナルドでYahoo BBモバイルポイント 公衆無線LANサービスがつながらない
              touch
            • マクドナルドでYahoo BBモバイルポイント 公衆無線LANサービスがつながらない
              bob77777
            Recent trackback
            • スマートフォンの法人活用例
              無線LANネットのブログ
            • Yahoo!オークションからのアフィリエイト収入が一気に70%減になってしまい涙目になってる話
              特選情報
            Recommend
            Link
            Profile
            Search
            Others
            Mobile
            qrcode
            Powered
            無料ブログ作成サービス JUGEM