iT邦幫忙

0

JS/jQ 無法調用callbackFunction(使用第三方套件/library )

  • 分享至 

  • xImage

各位好!此問題昨日有在FB(JS.tw)上發言,但目前還未解決,所以上版求解,謝謝

Describe(問題描述):
使用第三方套件(library)
Github: https://github.com/TedyL/wheel-of-fortune
依照文檔範例,將server端資料傳回前端(ajax回來的資料)
但在callback裡 一直抓不到回傳JSON(result)
也嘗試使用各種方法 callback function/ .done()
能想到的都用過了,但一直錯誤

不是很懂哪裡做錯了,能想過的都嘗試了還是不行QQ
還請各位大神們好心教教我,十分謝謝!


(0818/1146--更新問題)
先感激邦友大大們的回覆,因為有些微進度所以趕快上來修正發問
問題還是一樣,是抓不到回傳JSON(哭出來
但現在有辦法進到callback中了(原本進不去)!!!

更新後同問題 result Data抓不到, 只有undefined
view畫面(console)
https://ithelp.ithome.com.tw/upload/images/20210818/20120558maE0y25Y45.png

html/JS(覺得寫在一起比較容易看)

<div class="spin-container">
  <div class="spinflapper"></div>
  <!--使用套件的地方-->
  <div class="spinit" id="spinneratlas" style="background-image: url('images/gameboard.png')">
    <div class="" data-spinit-id="a1" data-spinit-start="0" data-spinit-end="45"></div>
    <div class="" data-spinit-id="b2" data-spinit-start="45" data-spinit-end="90"></div>
    <div class="" data-spinit-id="c3" data-spinit-start="90" data-spinit-end="135"></div>
    <div class="" data-spinit-id="d4" data-spinit-start="135" data-spinit-end="180"></div>
    <div class="" data-spinit-id="e5" data-spinit-start="180" data-spinit-end="225"></div>
    <div class="" data-spinit-id="f6" data-spinit-start="225" data-spinit-end="270"></div>
    <div class="" data-spinit-id="g7" data-spinit-start="270" data-spinit-end="315"></div>
    <div class="" data-spinit-id="h8" data-spinit-start="315" data-spinit-end="360"></div>

  </div>
  <button class="btn-go" id="dolo" type="button"> </button>
</div>

<script src="js/plugin/transit.js?t=202108121613"></script>
<script src="js/plugin/spinit.js?t=202108121613"></script>
<script>
$(document).ready(function(){
   console.log('OK1');
   
  // 使用試套件設定(原本問題)
  // $("#spinneratlas").spinit({
  //  startDegree: -7,
  //  clockwise: true,
  //  installUrl: null,           // return result as json
  //  luckyUrl: "/luckyDraw.php", // spin lucky draw
  //  keyUrl:  null,              // encryption key url
  // });
  
  // 使用試套件設定(更新問題後)
  $("#spinneratlas").spinit({
    startDegree: 0,
    clockwise: true,
    installUrl: null, // return result as json
    luckyUrl: "/luckyDraw.php", // spin lucky draw
    keyUrl:  "/luckyDraw2.php", // encryption key url
    encryptionKey: "123"  //要增加這個設定
  });

  // 事件觸發
  $(document).on("click", "#dolo", function(){
    console.log('OK2');
    $("#spinneratlas").spinit("serverSpin", function(data){
      console.log(data);  // 錯誤的地方
      console.log(JSON.stringify(data));
      console.log('OK3');
      alert('doen');
      // 但result就是 undefined
      // console.log('OK3')與 alert('doen') 都可以執行
    });
    console.log('OK4');
  });
  
});
</script>

回傳PHP /luckyDraw.php
(回傳暫時寫死的,只是想先試試能不能拿到資料)

// success不能拿掉, 不然連run都不行
$array = ['success' => '1', 'id'=> 'e5'];

// header 有拿掉跟沒拿掉,都使用過, 都有成功回傳JSON
// header('Content-type: application/json');
echo json_encode($array);

(更新)
回傳PHP /luckyDraw2.php

$array = ['key' => '123'];
header('Content-type: application/json');
echo json_encode($array);

Network圖片
1.luckyDraw.php
https://ithelp.ithome.com.tw/upload/images/20210818/201205586nL8dKeGV5.png
https://ithelp.ithome.com.tw/upload/images/20210818/201205587CkveoN7Zv.png

2.luckyDraw.php
https://ithelp.ithome.com.tw/upload/images/20210818/20120558uC4KCoys2z.png
https://ithelp.ithome.com.tw/upload/images/20210818/20120558rOeVh3KQfF.png

程式(hackmd)
https://hackmd.io/@llPhtr2DQ6-tyvxzAL3Ekg/BkQ7LwFxF

昨日社團發問(原問題)
https://www.facebook.com/groups/javascript.tw/permalink/3747288492039128/

qpalzm iT邦研究生 5 級 ‧ 2021-08-18 11:36:05 檢舉
想請問兩個問題:1.版主目的是要透過ajax收到回傳值才使用第3方套件嗎?
2.圖3是收到的回傳直嗎
淺水員 iT邦大師 6 級 ‧ 2021-08-18 19:08:36 檢舉
原本用的套件:https://github.com/TedyL/wheel-of-fortune
去看它原始的程式碼,應該是沒有辦法拿到後端回傳的 id
因為他沒有傳給 callback 也沒有記錄下來

如果想拿到可以把 spinit.js 169 行的 serverCallback(); 改成 serverCallback(response); 即可

或是換其他套件使用
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

0
japhenchen
iT邦超人 1 級 ‧ 2021-08-18 15:48:29

試試

你應該在spin裡設定一個callback

  $("#spinneratlas").spinit({
    startDegree: 0,
    clockwise: true,
    installUrl: null, // return result as json
    luckyUrl: "/luckyDraw.php", // spin lucky draw
    keyUrl:  "/luckyDraw2.php", // encryption key url
    callback: cb_function,
    encryptionKey: "123"  //要增加這個設定
  });

相對的,在js做個function,把spinner裡的值存在一個廣域變數(我假設p)中

function cb_function(val){
    p=val;
}

在你的js的ready裡最上頭加一行

$(document).ready(function(){
   val p = 0 ;
   console.log('OK1');
   // 以下10001字全省略..   

如此這般,在dolo被按下去時,你才有辦法拿到值

  $(document).on("click", "#dolo", function(){
    console.log('OK2');
    $("#spinneratlas").spinit("serverSpin", function(data){
      console.log(p);  // 錯誤的地方....data換成p
      //但我疑惑,為什麼不直接對$("#spinneratlas")取val()?  
      console.log(JSON.stringify(data));
      console.log('OK3');
      alert('doen');
      // 但result就是 undefined
      // console.log('OK3')與 alert('doen') 都可以執行
    });
    console.log('OK4');
  });
  

可參考 https://abgne.tw/jquery/jquery-plugins/smart-spin.html

我自己都覺得我在脫褲子放屁

 $(document).on("click", "#dolo", function(){
     let data = $("#spinneratlas").spinner("value");
     console.log(data)
  });

搞定

我要發表回答

立即登入回答