jQueryMobile에서 파이썬 값을 전달하는 방법 Slider

슬라이더의 값을 파이썬 스크립트에 전달하는 jQuery Mobile 슬라이더를 사용하여 웹 페이지를 설정하려고합니다. 궁극적 인 목표는이 슬라이더를 사용하여 Arduino에 연결된 모터를 실행하는 웹 사이트를 통해 파이썬 스크립트를 제어하는 것입니다. 슬라이더는 모터의 속도를 제어해야합니다.jQueryMobile에서 파이썬 값을 전달하는 방법 Slider

코드를 Running Python CGI Scripts from Javascript and JQuery Mobile UI에서 적용하고 있지만 실제로 작동시키지 못합니다.

은 여기 내 index.html을

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Slider Test</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.4.4.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"> </script> 
    <script> 
     $(document).ready(function() { 
      $('.posting-slider').on('slidestop', function(e) { 
      $.post('cgi-bin/script.py', { id: $(this).data('slider-id'), value: e.target.value }, function(data, textStatus, jqXHR) { 
       console.log('POSTed: ' + textStatus); 
      }); 
     }); 
    }); 
</script> 
</head> 
<body> 
<div data-role="page"> 
    <div data-role="fieldcontain"> 
     <fieldset data-role="controlgroup"> 
      <div class="rgbw_label"> 
       <label for="red_slider"> 
       Slider 1: 
       </label> 
      </div> 
      <input type="range" id="slider1" name="slider1" class="posting-slider" data-slider-id="1" value="0" min="0" max="100" data-highlight="true" /> 
     </fieldset> 
    </div> 

    <div data-role="footer"> 
    <h4>Page Footer</h4> 
    </div> 
</div>

입니다 그리고 여기 (A CGI-빈 폴더에) 내 script.py입니다.

#!/usr/bin/env python 
import cgi 
form=cgi.FieldStorage() 

import json 

#Real code I will be running, haven't tested it yet 
#import serial 
#ser = serial.Serial('dev/ttyACM0', 9600) 
#ser.write("%s\n" % (form["value"])) 
#ser.close() 

#Testing code 
file=open('test.txt', "w") 
file.write("HELLO") 
file.close() 

print "Content-type: application/json" 
print 
print(json.JSONEncoder().encode({"status":"ok"}))

저는 apache2 서버가있는 raspberry pi에서 실행하고 있습니다.

웹 페이지가 예상대로 슬라이더와 함께로드되고 있습니다. 또한 localhost/cgi-bin/script.py로 가면 스크립트가 실행되고 test.txt 파일이 생성됩니다.

문제는 javascript와 관련이있는 것으로 보입니다. script.py 파일을 실행할 수 없으며 제대로 값이 전달되는지 알 수 없습니다.

누구든지 문제를 볼 수 있습니까? 감사!

출처

2013-08-14 Ger

후렴을 .ready()'JQM에'사용에서. – Omar

왜 그런가요? 대신 어떻게 쓸 수 있습니까? – Ger

JQM 이벤트에 바인딩합니다. http://api.jquerymobile.com/category/events/ – Omar

너무 오래된 jQuery 버전을 사용하고있는 것 같습니다. 이것을 디버깅 할 때 선택한 슬라이더 요소에 'on'메서드가 없다는 것을 알았습니다. jquery 1.9.1을 사용하여 동일한 예제를 시도해 보았지만 정상적으로 작동했습니다.

를 체크 아웃 :

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Slider Test</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> 
    <script> 
     $(document).ready(function() { 
      var slider = $('#slider1'); 
      $('#slider1').on('slidestop', function(e) { 
      $.post('cgi-bin/script.py', { id: $(this).data('slider-id'), value: e.target.value }, function(data, textStatus, jqXHR) { 
       console.log('POSTed: ' + textStatus); 
      }); 
     }); 
    }); 
</script> 
</head> 
<body> 
<div data-role="page"> 
    <div data-role="fieldcontain"> 
     <fieldset data-role="controlgroup"> 
      <div class="rgbw_label"> 
       <label for="red_slider"> 
       Slider 1: 
       </label> 
      </div> 
      <input type="range" id="slider1" name="slider1" class="posting-slider" data-slider-id="1" value="0" min="0" max="100" data-highlight="true" /> 
      <!-- <input type="range" name="slider-1" id="slider-1" value="60" min="0" max="100" /> --> 
     </fieldset> 
    </div> 

    <div data-role="footer"> 
    <h4>Page Footer</h4> 
    </div> 
</div>

출처

2013-08-14 08:44:00 Swaraj

화려한 버전 번호였습니다. jquery 1.9.1이 작동했지만 1.8.2를 사용하므로 슬라이더의 스타일을 엉망으로 만든 것처럼 보였습니다. http://learn.jquery.com/jquery-mobile/getting-started/와 동일한 설정이었습니다. 감사! – Ger

아무런 문제가 없으므로 많은 다른 jquery 버전/조합을 참조하는 수많은 리소스를 온라인에서 살펴 보는 것이 혼란 스러울 수 있습니다. Chrome 디버거는 귀하의 정신을 지키기위한 열쇠입니다. 행운을 빈다. 달콤한 프로젝트처럼 들린다. – Swaraj

jQueryMobile에서 파이썬 값을 전달하는 방법 Slider

답변

관련 문제