2016-04-19 5 views
0

これが複製であると言う前に、私を聞いてください。私はこの回答(jQuery Ajax POST example with PHP)に従っていますが、Googleシートにデータを送信しようとしています。シートから直接コードを実行してデータを追加できるので、既にGoogle Sheetでコードが動作しています。JavaScriptを使用してウェブページからデータを投稿するPHPのjQueryをGoogleシートに送信

ただし、私のウェブページで作業するのは明らかに問題です。私が上に掲げた質問への答えに従ったとしても、私はこの分野での私の経験の欠如と関係している、より多くのものがここにあると思う。

下記のコードは、浮動小数点型のフッターで、ウェブページ全体のコードに含まれています(jquery-1.11.0.min.jsとjquery-migrate-1.2.1.min.jsは既に呼び出されています) 。送信ボタンをクリックすると、ページはリクエストを処理するように見えますが、Googleシート、Sheet1(https://docs.google.com/spreadsheets/d/19l2kSHdBKEWtIFX44FxLBdvCoKjy7VqPF4IW6C1xAZc/edit?usp=sharing)には何も表示されません。

#document 
<html> 
<body> 
<div class="floater-footer" id="the-floater-footer"> 
<span id="myTestSpan"></span> 
    <div class="row"> 
    <div class="col-md-1 col-sm-2 col-xs-3"><p>Newsletter</p></div> 
    <div class="col-md-8 col-sm-7 col-xs-9"> 

     <form id="floater_footer" class="validate subscribe_form"> 
      <div id="subscrive_group wow fadeInUp"> 

      <!-- <input type="email" value="" name="EMAIL" class="form-control subscribe_mail" id="mce-EMAIL" placeholder="email address" required /> --> 
      <input type="text" class="form-control subscribe_mail" id="bar" name="bar" value="" placeholder="email address" required /> 
      <!-- <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="subscr_btn subscribe_btn"> --> 
      <input type="submit" value="Subscribe" class="subscr_btn subscribe_btn" /> 

      </div> 
     </form> 
    </div> 
    <div class="col-md-3 col-sm-3 hidden-xs"> 
     <div class="pull-right"> 
     <!-- social media icons here --> 
     </div> 
    </div> 
    </div> 
</div> 

<script type="text/javascipt"> 

jQuery(document).ready(function($) { 
// variable to hold request 
var request; 
// bind to the submit event of our form 
$("#floater_footer").submit(function(event){ 
    // abort any pending request 
    if (request) { 
     request.abort(); 
    } 
    // setup some local variables 
    var $form = $(this); 
    // let's select and cache all the fields 
    var $inputs = $form.find("input, select, button, textarea"); 
    // serialize the data in the form 
    var serializedData = $form.serialize(); 

    // let's disable the inputs for the duration of the ajax request 
    // Note: we disable elements AFTER the form data has been serialized. 
    // Disabled form elements will not be serialized. 
    $inputs.prop("disabled", true); 
    //$('#result').text('Sending data...'); 

    // fire off the request to /form.php 
    request = $.ajax({ 
     url: "https://script.google.com/macros/s/AKfycbyQIDmSInumcrNmU4zxIa4pV8tIlN3A9zx5L5o1hH4qNdP9nDw/exec", 
     type: "post", 
     data: serializedData 
    }); 

    // callback handler that will be called on success 
    request.done(function (response, textStatus, jqXHR){ 
     // log a message to the console 
     //$('#result').html('<a href="https://docs.google.com/spreadsheets/d/10tt64TiALYhPMqR2fh9JzkuhxW7oC0rXXPb_pmJ7HAY/edit?usp=sharing" target="_blank">Success - see Google Sheet</a>'); 
     console.log("Hooray, it worked!"); 
    }); 

    // callback handler that will be called on failure 
    request.fail(function (jqXHR, textStatus, errorThrown){ 
     // log the error to the console 
     console.error(
      "The following error occured: "+ 
      textStatus, errorThrown 
     ); 
    }); 

    // callback handler that will be called regardless 
    // if the request failed or succeeded 
    request.always(function() { 
     // reenable the inputs 
     $inputs.prop("disabled", false); 
    }); 

    // prevent default posting of form 
    event.preventDefault(); 
}); 
}); 

</script> 

</body> 
</html> 

何がうまくいかないのかについてのご意見はありますか?私はこのサイトのほとんどと比較して、Web開発については非常に経験がありません。だから私はそれが私が行方不明の単純なものだと確信しています!

+0

ブラウザのデベロッパーツールでAJAXリクエスト/レスポンスを見たことがありますか?プロジェクトにjQueryライブラリを含めましたか?エラーが報告されていますか?あなたはこれをWebサーバー上で実行していますか? –

+0

私は開発ツールでそれを見ていません。 Chromeの要素、コンソール、ネットワークのタブは、私が使用する唯一のものなので、その方法はわかりません。 jquery-1.11.0.min.jsとjquery-migrate-1.2.1.min.jsが含まれています。 報告されている唯一のエラーはこの問題とは無関係であり、実際に私が今懸念しているエラーではありません。 実際にはライブサイトで実行されています。それほど多くのトラフィックはないので、私はそれを直接テストしています。 – Nimex

+0

これは開発ツールの一部です。 –

答えて

0

なぜそれがうまくいったのか分かりませんが、スクリプトを取り出してページの頭の中に置くことはうまくいったようです!おそらくこれは、要素が問題だった後にスクリプトを作成したことがあるか、おそらくページのメインHTML内にあるHTMLの内部に$(document).ready()という問題があったか、それとも別のものだったのでしょうか?どちらが問題であっても、次の問題が解決されました。

ページのHTMLの先頭にあるコードの上に(ただし、jQuery.jsファイルが宣言された後)、私はあなたがすでに見たスクリプトを配置しましたが、外観上の変更がありました。私が実際に私が気づいていない重要なものを変更したときに、ここに入れておきます。また、私はスクリプトの前に含まれる2つのjQueryのファイルが表示されます。うまくいけば、その意志

#document 
<html> 
<body> 
<div class="floater-footer" id="the-floater-footer"> 
<span id="myTestSpan"></span> 
    <div class="row"> 
    <div class="col-md-1 col-sm-2 col-xs-3"><p>Newsletter</p></div> 
    <div class="col-md-8 col-sm-7 col-xs-9"> 

     <form id="floater_footer" class="validate subscribe_form"> 
      <div id="subscrive_group wow fadeInUp"> 

      <input type="text" class="form-control subscribe_mail" id="email1" name="emailSignup" value="" placeholder="email address" required /> 

      <input type="submit" value="Subscribe" class="subscr_btn subscribe_btn" /> 

      </div> 
     </form> 
    </div> 
    <div class="col-md-3 col-sm-3 hidden-xs"> 
     <div class="pull-right"> 
     <!-- bunch of social media links/icons --> 
     </div> 
    </div> 
    </div> 
</div> 
</body> 
</html> 

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script> 
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 


<script type="text/javascript"> 
//this is for writing the newsletter signup out to a spreadsheet for the floating footer 

$(document).ready(function($) { 
// variable to hold request 
var request; 
// bind to the submit event of our form 
$("#floater_footer").submit(function(event){ 
    // abort any pending request 
    if (request) { 
     request.abort(); 
    } 
    // setup some local variables 
    var $form = $(this); 
    // let's select and cache all the fields 
    var $inputs = $form.find("input, select, button, textarea"); 
    // serialize the data in the form 
    var serializedData = $form.serialize(); 

    // let's disable the inputs for the duration of the ajax request 
    // Note: we disable elements AFTER the form data has been serialized. 
    // Disabled form elements will not be serialized. 
    $inputs.prop("disabled", true); 
    //$('#result').text('Sending data...'); 


    if($('#email1').val() == "Email Received!") { 

     //do nothing 
     //basically, they pressed the button again on accident 

    } else { 

     // fire off the request to the Google Sheet script 
     request = $.ajax({ 
      url: "https://script.google.com/macros/s/AKfycbyQIDmSInumcrNmU4zxIa4pV8tIlN3A9zx5L5o1hH4qNdP9nDw/exec", 
      type: "post", 
      data: serializedData 
     }); 

    } 


    // callback handler that will be called on success 
    request.done(function (response, textStatus, jqXHR){ 
     // log a message to the console 
     //$('#result').html('<a href="https://docs.google.com/spreadsheets/d/10tt64TiALYhPMqR2fh9JzkuhxW7oC0rXXPb_pmJ7HAY/edit?usp=sharing" target="_blank">Success - see Google Sheet</a>'); 
     $('#email1').val('Email Received!'); 
     console.log("Newsletter signup complete!"); 
    }); 

    // callback handler that will be called on failure 
    request.fail(function (jqXHR, textStatus, errorThrown){ 
     // log the error to the console 
     console.error(
      "The following error occured: "+ 
      textStatus, errorThrown 
     ); 
    }); 

    // callback handler that will be called regardless 
    // if the request failed or succeeded 
    request.always(function() { 
     // reenable the inputs 
     $inputs.prop("disabled", false); 
    }); 

    // prevent default posting of form 
    event.preventDefault(); 
}); 
}); 

</script> 

さらに下HTMLの本文には、私のフッターが置かれることになっていた、このコードでした将来この問題を抱える人を助けてください。あなたは私がしていない理由がこれを働かせるかもしれません。

Jay Blanchardに大きなおかげで私のスクリプトがまったくトリガーされたかどうか疑問に思ったので、スクリプトを取り出して別の場所に置くようになったのです!スクリプトは、まったく発砲していないことがほとんどであり、問​​題の根源でした。しかし、それはなぜ、私は分かりませんでした。しかし、私はこれが他の人に役立つことを願っています

関連する問題