2017-02-24 2 views
1

if/else条件を使用して関数のサブ関数をロードしようとしています。コードは次のとおりです。私は、テキストフィールドのデバイスIDを持っている(いた)と私は機能のonClickを(提出をクリックし、デバイスIDを入力した後、送信ボタンを上記のコードで if/else条件文を使用して関数のサブ関数をロードする方法

var db,did; 
      function loaddb() 
      { 
       db = window.openDatabase("Watersenz", "1.0", "Cordova Demo", 2*1024*1024); 
       db.transaction(createDB, errorCB, successCB); 
      } 
      function createDB(tx) { 
       tx.executeSql('DROP TABLE IF EXISTS USERIDDETAILS'); 
       tx.executeSql('CREATE TABLE IF NOT EXISTS USERIDDETAILS (deviceid TEXT NOT NULL)'); 
      } 
      function errorCB(err) { 
       alert("Error processing SQL: "+err.code); 
       console.log("Error processing SQL: "+err.code); 
      } 
      function successCB() { 
       console.log("success"); 
      } 
      function insertDB(tx) { 
       did = $("[name='deviceid']").val(); 
       var sql='INSERT INTO USERIDDETAILS(deviceid)VALUES(?)'; 
       tx.executeSql(sql,[did],sucessQueryDB,errorCB); 
       console.log(did); 
      } 
      function sucessQueryDB(tx){ 
       alert("selected"); 
       tx.executeSql('SELECT * FROM USERIDDETAILS',[],renderList,errorCB); 
      } 
      function renderList(tx,results){ 
      alert("rendering"); 
       var htmlstring=''; 
       var len=results.rows.length; 
       alert("rendered called"+ len); 
       for(var i=0;i<len;i++){ 
        htmlstring += '<li>'+ results.rows.item(i).deviceid+'</li>'; 
       } 
       $('#resultList').html(htmlstring); 
       $('#resultList').listview('refresh'); 
      } 

      function onClick(){ 
       db.transaction(insertDB,errorCB); 
       $.ajax({ 
        url : "https://api.thingspeak.com/channels.json?api_key=XXXXXXXXXX", 
        dataType:"json", 
        cache: false, 
        error:function (xhr, ajaxOptions, thrownError){ 
        debugger; 
          alert(xhr.statusText); 
          alert(thrownError.code); 
         }, 
        success : function(json) { 
        console.log("Entering getIdList.success()"); 
        console.log(json); 
        alert(json); 
        if (json.length == 0) { 
         window.alert("The returned output array length is ZERO."); 
        } else { 
         var obj, des , md ,apiKeys; 
         //i=channels object length 
         for (var i=0; i<json.length; i++) { 
          obj = json[i]; 
          //console.log(obj); 
          if (obj == null || obj == "") { 
           window.alert("\n The "+(i+1)+"th object is NULL/BLANK."); 
          } else { 
           if (obj.id == did) { 

           if (obj.name == null || obj.name == "") { 
             window.alert("\n The name portion of "+(i+1)+"th object is NULL/BLANK."); 
            } else { 
             console.log("\n The deails of "+(i+1)+"th Object are : \nDname : " + obj.name); 
             alert("\n The deails of "+(i+1)+"th Object are : \nDname : " + obj.name); 

             function dnamedb() 
             { 
              db = window.openDatabase("Watersenz", "1.0", "Cordova Demo", 2*1024*1024); 
              db.transaction(creatednDB, errorCB, successCB); 
             } 
             function creatednDB(tx) { 
              tx.executeSql('DROP TABLE IF EXISTS DEVICENAME'); 
              tx.executeSql('CREATE TABLE IF NOT EXISTS DEVICENAME(Dname TEXT NOT NULL)'); 
              //alert("done"); 
             } 

             function insertdnDB(tx){ 
              tx.executeSql('INSERT INTO DEVICENAME(Dname)VALUES(obj.name)'); 
             } 

             function dnameForm(){ 
              db.transaction(insertdnDB,errorCB); 
              return false; 
             } 

            } 
           }     
          }   
         } 
        } 
       } 
      }); 
     <body> 
    <div id="header"> 
     <h3> Login </h3> 
     <script type="text/javascript"> 
      $(document).ready(function() { 
      loaddb(); 
      dnamedb(); 
      }); 
     </script> 
    </div> 
    <div id="section"> 
     <form method="post" id="myForm"> 
      <br><input type="text" class="one" name="deviceid" id="deviceid" placeholder="DeviceId"><br> 
      <input type="button" class="button" value="SUBMIT" onclick="return onClick()"> 
     </form> 
    </div> 
)がここで行われるURLがロードされますそのdidがurlに存在するかどうかをチェックします。それが正しければ、デバイスidの名前が表示され、dnamedb()関数がロードされます。 loadingiにエラーがありません:Uncaught ReferenceError:dnamedbが定義されていません。 誰も私を助けることができますか? ありがとうございます。

+0

申し訳メイト、それはあなたが求めているものを実際のはっきりしません。 Dev Toolsコンソールでエラーが発生していますか? –

+0

私は何かエラーが発生する私のdoudtは、コード内のelseステートメントにジャンプした場合、どのように関数dnamedb()をロードできますか?@CobusKruger – Anusha

+0

まだ取得していません。あなたはそこに関数を呼び出そうとしましたか?もしそうなら、何が起こったのですか?それとも、それはあなたの求めるものではないのですか? –

答えて

0

あなたはajaxの成功の中で関数を定義することはできません。あなたはそこに電話することができます。 $ .ajax({})の外側に定義します。

  var db,did; 
     function loaddb() 
     { 
      db = window.openDatabase("Watersenz", "1.0", "Cordova Demo", 2*1024*1024); 
      db.transaction(createDB, errorCB, successCB); 
     } 
     function createDB(tx) { 
      tx.executeSql('DROP TABLE IF EXISTS USERIDDETAILS'); 
      tx.executeSql('CREATE TABLE IF NOT EXISTS USERIDDETAILS (deviceid TEXT NOT NULL)'); 
     } 
     function errorCB(err) { 
      alert("Error processing SQL: "+err.code); 
      console.log("Error processing SQL: "+err.code); 
     } 
     function successCB() { 
      console.log("success"); 
     } 
     function insertDB(tx) { 
      did = $("[name='deviceid']").val(); 
      var sql='INSERT INTO USERIDDETAILS(deviceid)VALUES(?)'; 
      tx.executeSql(sql,[did],sucessQueryDB,errorCB); 
      console.log(did); 
     } 
     function sucessQueryDB(tx){ 
      alert("selected"); 
      tx.executeSql('SELECT * FROM USERIDDETAILS',[],renderList,errorCB); 
     } 
     function renderList(tx,results){ 
     alert("rendering"); 
      var htmlstring=''; 
      var len=results.rows.length; 
      alert("rendered called"+ len); 
      for(var i=0;i<len;i++){ 
       htmlstring += '<li>'+ results.rows.item(i).deviceid+'</li>'; 
      } 
      $('#resultList').html(htmlstring); 
      $('#resultList').listview('refresh'); 
     } 

     function onClick(){ 
      db.transaction(insertDB,errorCB); 
      $.ajax({ 
       url : "https://api.thingspeak.com/channels.json?api_key=XXXXXXXXXX", 
       dataType:"json", 
       cache: false, 
       error:function (xhr, ajaxOptions, thrownError){ 
       debugger; 
         alert(xhr.statusText); 
         alert(thrownError.code); 
        }, 
       success : function(json) { 
       console.log("Entering getIdList.success()"); 
       console.log(json); 
       alert(json); 
       if (json.length == 0) { 
        window.alert("The returned output array length is ZERO."); 
       } else { 
        var obj, des , md ,apiKeys; 
        //i=channels object length 
        for (var i=0; i<json.length; i++) { 
         obj = json[i]; 
         //console.log(obj); 
         if (obj == null || obj == "") { 
          window.alert("\n The "+(i+1)+"th object is NULL/BLANK."); 
         } else { 
          if (obj.id == did) { 

          if (obj.name == null || obj.name == "") { 
            window.alert("\n The name portion of "+(i+1)+"th object is NULL/BLANK."); 
           } else { 
            console.log("\n The deails of "+(i+1)+"th Object are : \nDname : " + obj.name); 
            alert("\n The deails of "+(i+1)+"th Object are : \nDname : " + obj.name); 

            dnamedb();        
            creatednDB(tx);   
            insertdnDB(tx,obj.name); 
            dnameForm(); 


           } 
          }     
         }   
        } 
       } 
      } 
     }); 
     function dnamedb() 
            { 
             db = window.openDatabase("Watersenz", "1.0", "Cordova Demo", 2*1024*1024); 
             db.transaction(creatednDB, errorCB, successCB); 
            } 
            function creatednDB(tx) { 
             tx.executeSql('DROP TABLE IF EXISTS DEVICENAME'); 
             tx.executeSql('CREATE TABLE IF NOT EXISTS DEVICENAME(Dname TEXT NOT NULL)'); 
             //alert("done"); 
            } 

            function insertdnDB(tx,name){ 
             tx.executeSql('INSERT INTO DEVICENAME(Dname)VALUES("'+ name +'")'); 
            } 

            function dnameForm(){ 
             db.transaction(insertdnDB,errorCB); 
             return false; 
            } 
    <body> 
<div id="header"> 
    <h3> Login </h3> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
     loaddb(); 
     dnamedb(); 
     }); 
    </script> 
</div> 
<div id="section"> 
    <form method="post" id="myForm"> 
     <br><input type="text" class="one" name="deviceid" id="deviceid" placeholder="DeviceId"><br> 
     <input type="button" class="button" value="SUBMIT" onclick="return onClick()"> 
    </form> 
</div> 
+1

'success'の中で関数を宣言するのに間違いはありませんが、' success'の外で呼び出すことはできません。重要な違い。 –

0

dbnamedbは、success関数内で定義されています。つまり、その関数にスコープがあり、その関数からのみスコープを呼び出すことができます。このため、名前は$(document).readyで定義されていません。

Sudhanshuはコードを有効な構成に再構築していますが、グローバルスコープに多数の機能を追加することは悪い考えです。あなたのすべての関数は、グローバルwindowオブジェクトからアクセスできるようになりました。そうすればするほど、命名の競合と追跡が難しいバグの確率が高くなります。

代わりに、私はSudhanshuの答えを受け取り、すぐに呼び出される関数式に変更し、スクリプトタグを削除して、onclickの呼び出しをマークアップから外します。

<div id="header"> 
    <h3> Login </h3> 
</div> 
<div id="section"> 
    <form method="post" id="myForm"> 
     <br><input type="text" class="one" name="deviceid" id="deviceid" placeholder="DeviceId"><br> 
     <input type="button" class="button" value="SUBMIT"> 
    </form> 
</div> 

そして、このようになります(そして、できればあなたがいないページheadセクションで、外部ファイルに配置)JavaScriptコード:

(function() { 
    var db, did; 

    function loaddb() { 
     db = window.openDatabase("Watersenz", "1.0", "Cordova Demo", 2 * 1024 * 1024); 
     db.transaction(createDB, errorCB, successCB); 
    } 

    function createDB(tx) { 
     tx.executeSql('DROP TABLE IF EXISTS USERIDDETAILS'); 
     tx.executeSql('CREATE TABLE IF NOT EXISTS USERIDDETAILS (deviceid TEXT NOT NULL)'); 
    } 

    function errorCB(err) { 
     alert("Error processing SQL: " + err.code); 
     console.log("Error processing SQL: " + err.code); 
    } 

    function successCB() { 
     console.log("success"); 
    } 

    function insertDB(tx) { 
     did = $("[name='deviceid']").val(); 
     var sql = 'INSERT INTO USERIDDETAILS(deviceid)VALUES(?)'; 
     tx.executeSql(sql, [did], sucessQueryDB, errorCB); 
     console.log(did); 
    } 

    function sucessQueryDB(tx) { 
     alert("selected"); 
     tx.executeSql('SELECT * FROM USERIDDETAILS', [], renderList, errorCB); 
    } 

    function renderList(tx, results) { 
     alert("rendering"); 
     var htmlstring = ''; 
     var len = results.rows.length; 
     alert("rendered called" + len); 
     for (var i = 0; i < len; i++) { 
      htmlstring += '<li>' + results.rows.item(i).deviceid + '</li>'; 
     } 
     $('#resultList').html(htmlstring); 
     $('#resultList').listview('refresh'); 
    } 

    $('input[type="button"]').on('click', function() { 
     db.transaction(insertDB, errorCB); 
     $.ajax({ 
      url: "https://api.thingspeak.com/channels.json?api_key=XXXXXXXXXX", 
      dataType: "json", 
      cache: false, 
      error: function (xhr, ajaxOptions, thrownError) { 
       debugger; 
       alert(xhr.statusText); 
       alert(thrownError.code); 
      }, 
      success: function (json) { 
       console.log("Entering getIdList.success()"); 
       console.log(json); 
       alert(json); 
       if (json.length == 0) { 
        window.alert("The returned output array length is ZERO."); 
       } else { 
        var obj, des, md, apiKeys; 
        //i=channels object length 
        for (var i = 0; i < json.length; i++) { 
         obj = json[i]; 
         //console.log(obj); 
         if (obj == null || obj == "") { 
          window.alert("\n The " + (i + 1) + "th object is NULL/BLANK."); 
         } else { 
          if (obj.id == did) { 
           if (obj.name == null || obj.name == "") { 
            window.alert("\n The name portion of " + (i + 1) + "th object is NULL/BLANK."); 
           } else { 
            console.log("\n The deails of " + (i + 1) + "th Object are : \nDname : " + obj.name); 
            alert("\n The deails of " + (i + 1) + "th Object are : \nDname : " + obj.name); 
            dnamedb(); 
            creatednDB(tx); 
            insertdnDB(tx, obj.name); 
            dnameForm(); 
           } 
          } 
         } 
        } 
       } 
      } 
     }); 
    }); 

    function dnamedb() { 
     db = window.openDatabase("Watersenz", "1.0", "Cordova Demo", 2 * 1024 * 1024); 
     db.transaction(creatednDB, errorCB, successCB); 
    } 

    function creatednDB(tx) { 
     tx.executeSql('DROP TABLE IF EXISTS DEVICENAME'); 
     tx.executeSql('CREATE TABLE IF NOT EXISTS DEVICENAME(Dname TEXT NOT NULL)'); 
     //alert("done"); 
    } 

    function insertdnDB(tx, name) { 
     tx.executeSql('INSERT INTO DEVICENAME(Dname)VALUES("' + name + '")'); 
    } 

    function dnameForm() { 
     db.transaction(insertdnDB, errorCB); 
     return false; 
    } 

    $(document).ready(function() { 
     loaddb(); 
     dnamedb(); 
    }); 
})(); 

$(document).readyされていることはあなたに次のHTMLを与えますメインのスクリプト本体に移動しました。私はこれをすべてこれをラップしました。

(function() { 
// Code goes here 
})(); 

これは宣言されてすぐに実行される無名関数です。

このスニペットは上記のコードから取得されたものですが、すべてのデータベースアクセスが削除されています。 onclickは非常にフェッチするメッセージを表示します。

(function() { 
 
    var db, did; 
 

 
    function loaddb() { 
 
     db = window.openDatabase("Watersenz", "1.0", "Cordova Demo", 2 * 1024 * 1024); 
 
     db.transaction(createDB, errorCB, successCB); 
 
    } 
 

 
    function createDB(tx) { 
 
     tx.executeSql('DROP TABLE IF EXISTS USERIDDETAILS'); 
 
     tx.executeSql('CREATE TABLE IF NOT EXISTS USERIDDETAILS (deviceid TEXT NOT NULL)'); 
 
    } 
 

 
    function errorCB(err) { 
 
     alert("Error processing SQL: " + err.code); 
 
     console.log("Error processing SQL: " + err.code); 
 
    } 
 

 
    function successCB() { 
 
     console.log("success"); 
 
    } 
 

 
    function insertDB(tx) { 
 
     did = $("[name='deviceid']").val(); 
 
     var sql = 'INSERT INTO USERIDDETAILS(deviceid)VALUES(?)'; 
 
     tx.executeSql(sql, [did], sucessQueryDB, errorCB); 
 
     console.log(did); 
 
    } 
 

 
    function sucessQueryDB(tx) { 
 
     alert("selected"); 
 
     tx.executeSql('SELECT * FROM USERIDDETAILS', [], renderList, errorCB); 
 
    } 
 

 
    function renderList(tx, results) { 
 
     alert("rendering"); 
 
     var htmlstring = ''; 
 
     var len = results.rows.length; 
 
     alert("rendered called" + len); 
 
     for (var i = 0; i < len; i++) { 
 
      htmlstring += '<li>' + results.rows.item(i).deviceid + '</li>'; 
 
     } 
 
     $('#resultList').html(htmlstring); 
 
     $('#resultList').listview('refresh'); 
 
    } 
 

 
    $('input[type="button"]').on('click', function() { 
 
     alert('Hello'); 
 
     /* This cannot be executed in a StackOverflow snippet 
 
     db.transaction(insertDB, errorCB); 
 
     $.ajax({ 
 
      url: "https://api.thingspeak.com/channels.json?api_key=XXXXXXXXXX", 
 
      dataType: "json", 
 
      cache: false, 
 
      error: function (xhr, ajaxOptions, thrownError) { 
 
       debugger; 
 
       alert(xhr.statusText); 
 
       alert(thrownError.code); 
 
      }, 
 
      success: function (json) { 
 
       console.log("Entering getIdList.success()"); 
 
       console.log(json); 
 
       alert(json); 
 
       if (json.length == 0) { 
 
        window.alert("The returned output array length is ZERO."); 
 
       } else { 
 
        var obj, des, md, apiKeys; 
 
        //i=channels object length 
 
        for (var i = 0; i < json.length; i++) { 
 
         obj = json[i]; 
 
         //console.log(obj); 
 
         if (obj == null || obj == "") { 
 
          window.alert("\n The " + (i + 1) + "th object is NULL/BLANK."); 
 
         } else { 
 
          if (obj.id == did) { 
 
           if (obj.name == null || obj.name == "") { 
 
            window.alert("\n The name portion of " + (i + 1) + "th object is NULL/BLANK."); 
 
           } else { 
 
            console.log("\n The deails of " + (i + 1) + "th Object are : \nDname : " + obj.name); 
 
            alert("\n The deails of " + (i + 1) + "th Object are : \nDname : " + obj.name); 
 
            dnamedb(); 
 
            creatednDB(tx); 
 
            insertdnDB(tx, obj.name); 
 
            dnameForm(); 
 
           } 
 
          } 
 
         } 
 
        } 
 
       } 
 
      } 
 
     }); 
 
    */}); 
 

 
    function dnamedb() { 
 
     db = window.openDatabase("Watersenz", "1.0", "Cordova Demo", 2 * 1024 * 1024); 
 
     db.transaction(creatednDB, errorCB, successCB); 
 
    } 
 

 
    function creatednDB(tx) { 
 
     tx.executeSql('DROP TABLE IF EXISTS DEVICENAME'); 
 
     tx.executeSql('CREATE TABLE IF NOT EXISTS DEVICENAME(Dname TEXT NOT NULL)'); 
 
     //alert("done"); 
 
    } 
 

 
    function insertdnDB(tx, name) { 
 
     tx.executeSql('INSERT INTO DEVICENAME(Dname)VALUES("' + name + '")'); 
 
    } 
 

 
    function dnameForm() { 
 
     db.transaction(insertdnDB, errorCB); 
 
     return false; 
 
    } 
 

 
    $(document).ready(function() { 
 
     // These two can't execute within a StackOverflow snippet 
 
     //loaddb(); 
 
     //dnamedb(); 
 
    }); 
 
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="header"> 
 
    <h3> Login </h3> 
 
</div> 
 
<div id="section"> 
 
    <form method="post" id="myForm"> 
 
     <br><input type="text" class="one" name="deviceid" id="deviceid" placeholder="DeviceId"><br> 
 
     <input type="button" class="button" value="SUBMIT"> 
 
    </form> 
 
</div>

+0

私はこれを試しましたが、関数の最初の行に予期しないトークンがエラーになっています。 function(){ //ここにコードがあります }(); – Anusha

+0

@Anusha申し訳ありませんが、私は常に大括弧で囲まれた関数宣言も忘れています。私は答えを更新します。 –

+0

編集のためのtq今すぐ実行しようとしましたがエラーが発生しました未知のReferenceError:onClickは定義されていません at HTMLInputElement.onclick – Anusha

関連する問題