JavaScript
1 2$(function() { 3 $('#outputBtn').click( 4 function(){ 5 setDownloadBox(); 6 }); 7function setDownloadBox(){ 8 $.ajax({ 9 type:'POST', 10 url :'getCSV.php', 11 data:{key:'value'} 12 }).fail(function(){ 13 alert('error'); 14 }).done(function(buf){ 15 result = JSON.parse(buf); 16 for(var value of result){ 17 $('#downloadBox').append(`<a href="csv/`+ value +`" download="` + value + `">` + value + `</a><br>`); 18 } 19 }); 20} 21}) 22
ajaxを使った処理を含む関数をボタンのクリックイベントで発火させようとしているコードになります。
setDownloadBox()の動作,クリックイベントの挙動はそれぞれ単体で正常に動いていることは確認しているのですがボタンをクリックしても何も動作しません。
コンソールでのエラー、等も出ていない模様です。
記述箇所はbodyタグの直前になります。
どなたかご教授お願いいたします
JavaScript
1<!DOCTYPE html> 2<html> 3<head> 4<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5<title>beaconLog</title> 6</head> 7 8<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 9<script type="text/javascript"> 10$(function() { 11 $('#outputBtn').click( 12 function(){ 13 setDownloadBox(); 14 }); 15function setDownloadBox(){ 16 $.ajax({ 17 type:'POST', 18 url :'getCSV.php', 19 data:{key:'value'} 20 }).fail(function(){ 21 alert('error'); 22 }).done(function(buf){ 23 result = JSON.parse(buf); 24 for(var value of result){ 25 $('#downloadBox').append(`<a href="csv/`+ value +`" download="` + value + `">` + value + `</a><br>`); 26 } 27 }); 28} 29}) 30</script> 31 32<body> 33<?php 34 $env = [.....]; 35 $envSelectBox = "<select name=\"selectedEnv\">\n"; 36 for ($i = 0; $i < count($env); $i++) { 37 $envSelectBox .= "\t<option value=\"{$env[$i]}\">{$env[$i]}</option>\n"; 38 } 39 $envSelectBox .= "</select>\n"; 40 41 date_default_timezone_set("Asia/Tokyo"); 42 $defaultFirstDate = date("Y年m月d日H時", strtotime("-1 hour"))."0分0秒"; 43 $defaultLastDate = date("Y年m月d日H時")."59分59秒"; 44 45 $refineItemList = [.....]; 46 $refineItemBox = ""; 47 foreach ($refineItemList as $key => $value) { 48 $refineItemBox .= "{$value}<br>\n<input type=\"text\" name=\"{$key}\"><br>\n"; 49 50 // 末尾のアンダーバーで初期値チェックを判断 51 $outPutItemList = [.....]; 52 $outputItemBox = ""; 53 $i = 1; 54 foreach($outPutItemList as $key => $value) { 55 $outputItemBox .= "<input type=\"checkbox\" name=\"outputItem[]\" value=\"{$key}\""; 56 $pattern = "/_/"; 57 58 if(preg_match($pattern, $value)){ 59 $result = preg_replace($pattern, "", $value); 60 $outputItemBox .= "checked >{$result}\n"; 61 } 62 else{ 63 $outputItemBox .= ">{$value}\n"; 64 } 65 66 // 4項目ごとに改行 67 if($i % 4 == 0){$outputItemBox .= "<br>\n";} 68 $i ++; 69 } 70?> 71 72<h2>入力項目</h2> 73 74<form action="<?php echo $_SERVER["PHP_SELF"]?>" method="post"> 75 76環境<br> 77<?php echo "{$envSelectBox}<br>";?> 78 79From 年月日時分秒<br> 80<input type="text" size="30" value=<?php echo $defaultFirstDate;?> name="FirstDate"><br> 81 82To 年月日時分秒<br> 83<input type="text" size="30" value=<?php echo $defaultLastDate;?> name="LastDate"><br> 84 85<?php echo "<h2>絞り込み項目</h2>"; 86 echo $refineItemBox; 87 echo "<input type=\"submit\" id=\"outputBtn\" value=\"出力\" />"; 88 echo "<h2>出力項目</h2>"; 89 echo $outputItemBox; 90 91 $reqList = [.....]; 92 $reqOutputItem = $_POST["outputItem"]; 93 $reqList = array_merge($reqList, $reqOutputItem); 94 $command = ......; 95 foreach($reqList as $index => $value) { 96 $command.= " \"{$value}\""; 97 } 98 exec($command); 99?> 100<div id="downloadBox"> 101</div> 102 103</form> 104 105</body> 106 107</html> 108
変数の内容は事情により省略していますがこれがソースコードの全文になります。
下記コードのコメントアウト部分でそれぞれ処理の流れを追いましたが特に止まっている個所はなく処理が進んでいるようでした....
またbuf,resultをコンソールログで確認したところ正常に値が入ってはいるのですがなぜか一瞬で表示が消えてしましました。
JavaScript
1function setDownloadBox(){ 2 //alert('check'); 3 $.ajax({ 4 type:'POST', 5 url :'getCSV.php', 6 data:{key:'value'} 7 }).fail(function(){ 8 alert('error'); 9 }).done(function(buf){ 10 //alert('check'); 11 result = JSON.parse(buf); 12 for(var value of result){ 13 $('#downloadBox').append(`<a href="csv/`+ value +`" download="` + value + `">` + value + `</a><br>`); 14 } 15 //alert('check'); 16 }); 17}
回答3件
あなたの回答
tips
プレビュー