0
はのは、ペンを見てみましょう消え続ける：これはLaravelで書かれた基本的な株式トラッカーを、あることを意味するhttps://codepen.io/Muzical84/pen/EbPXBP警告ボックス（jQueryの、ブートストラップ）を作成するが、それは
function validateInput(input, event) {
'use strict';
if (input == null || input !== "") {
$.ajax({
method: 'POST',
cache: false,
url: '/api/getAll'
})
.done(function(data, textStatus, jqXHR) {
if (data !== null && $.isArray(data) && data.indexOf(input.toUpperCase()) === -1) { //The AJAX return is valid but the symbol does not exist.
//debugger;
$('#jsErrors').html('<p>The given symbol does not exist.</p>');
$('#jsErrors').addClass('alert');
$('#jsErrors').addClass('alert-danger');
$('#jsErrors').removeClass('hidden');
$('#jsErrors').removeClass('invisible');
$('#jsErrors').show();
} else {
debugger;
editWatchList(input.toUpperCase(), 'watch'); //Pass it along (function omitted from pen)
}
})
.fail(function(jqXHR, textStatus, errorThrown) {
console.error(errorThrown); //I am aware that this is less than ideal. In the "real world", I would ask my supervisor how to handle this instance.
})
.always(function(a, textStatus, c) {
debugger;
event.preventDefault();
});
} else {
alert('Please enter a symbol before submitting.');
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<!-- This is actually a partial, Laravel Blade, specifically. -->
<div id="jsErrors" class="hidden invisible" role="alert"></div>
<form id="add-symbol-form" class="form-inline" accept-charset=utf-8 autocomplete="off">
<!-- Laravel CSRF field -->
<div class="container">
<input type="text" class="form-control" name="symbol" id="symbol" placeholder="Enter a symbol..." required>
<button type="submit" class="btn btn-dark" onClick="validateInput($('#symbol').val());">Add Symbol</button>
</div>
</form>
<script>
//Enter will have the same effect as clicking the button
$(document).ready(function() {
$(document).keypress(function(e) {
if ($('#symbol').val() !== '' && e.which == 13) { //Only submit if the user hit enter AND there is something in the input box to validate.
validateInput($('#symbol').val());
e.preventDefault();
}
});
});
</script>。 HTMLは、より広いページ内の部分的なブレードであり、このスニペットは、ユーザーが新しい株式シンボルを「見たい」ときに起動します。 AJAXは私のLaravel APIを呼び出し、Postman、huzzahで正常に動作します！
しかし、ユーザがデータベースにないシンボルを入力した場合（私はこの制限を決定しなかったので、それについてのコメントはありません= - \）、ユーザに警告したいので、空と非表示<div>フォームの上に。
私はデバッガを使用しています。私のコードをステップ実行するためのステートメントは、そのボックスは完全に機能しますが、私の機能が終了すると、<div>は完全に消滅します。
なぜですか？ （アドレスバーがクエリを追加したところに気づいた刺激的なものに関連していますか？アドレスバーがproject.devと何か関係ないと言ってもらいたい）私は少し錆びていて、穏やかにしてください。
PS：FWIW、私はVueをLaravel経由で利用できます。私は現在それを使用していませんが、それが役立つならば、文字通りそれを含める努力はありません。私はちょうどVueについてジャックを知っている。質問のコメントから
提出ハンドラがフォームの送信をキャンセルする場所が表示されません。 – Taplar
@Taplarクリックハンドラです... – Janet
フォーム内の送信ボタンのうち、停止しないと、フォームが指すエンドポイントにフォームが送信されます。エンドポイントが指定されていない場合、同じページURL。あなたのものはありません。 – Taplar