Button values disappear when changing javascript to jquery

Question

Currently I have a working app that could change the values of the buttons depending on the button clicked. It is written using javascript (in script.js). However I want to make it nicer so i am trying to use jQuery instead. However, when i insert the jQuery js and css file to index.html, the buttons' values are gone and i don't know how to change it completely to jQuery without affecting its function.

here is part of the original javascript: (let me know if you want to see the whole script)

ajax_status.onreadystatechange = function() {

  if(ajax_status.readyState == 4 && ajax_status.status == 200) {

if(ajax_status.responseText == "ready_vid") {

  document.getElementById("video_button").disabled = false;
  document.getElementById("video_button").value = "record video start";
  document.getElementById("video_button").onclick = function() {send_cmd("ca 1");};
  document.getElementById("image_button").disabled = false;
  document.getElementById("image_button").value = "record image";
  document.getElementById("image_button").onclick = function() {send_cmd("im");};
  document.getElementById("timelapse_button").disabled = false;
  document.getElementById("timelapse_button").value = "timelapse start";
  document.getElementById("timelapse_button").onclick = function() {send_cmd("tl " + (document.getElementById("tl_interval").value*10));};
  document.getElementById("md_button").disabled = false;
  document.getElementById("md_button").value = "motion detection start";
  document.getElementById("md_button").onclick = function() {send_cmd("md 1");};
  document.getElementById("halt_button").disabled = false;
  document.getElementById("halt_button").value = "stop camera";
  document.getElementById("halt_button").onclick = function() {send_cmd("ru 0");};
  document.getElementById("mode_button").disabled = false;
  document.getElementById("mode_button").value = "change mode to image";
  document.getElementById("mode_button").onclick = function() {send_cmd("pm");};
  halted = 0;
}
else if(ajax_status.responseText == "ready_img") {
  document.getElementById("video_button").disabled = true;
  document.getElementById("video_button").value = "record video start";
  document.getElementById("video_button").onclick = function() {};
  document.getElementById("image_button").disabled = false;
  document.getElementById("image_button").value = "record image";
  document.getElementById("image_button").onclick = function() {send_cmd("im");};
  document.getElementById("timelapse_button").disabled = false;
  document.getElementById("timelapse_button").value = "timelapse start";
  document.getElementById("timelapse_button").onclick = function() {send_cmd("tl " + (document.getElementById("tl_interval").value*10));};
  document.getElementById("md_button").disabled = true;
  document.getElementById("md_button").value = "motion detection start";
  document.getElementById("md_button").onclick = function() {};
  document.getElementById("halt_button").disabled = false;
  document.getElementById("halt_button").value = "stop camera";
  document.getElementById("halt_button").onclick = function() {send_cmd("ru 0");};
  document.getElementById("mode_button").disabled = false;
  document.getElementById("mode_button").value = "change mode to video";
  document.getElementById("mode_button").onclick = function() {send_cmd("vm");};
  halted = 0;
}

HTML in index.html:

<input id="video_button" type="button">
<!--<button data-role="none" id="video_button"></button>
<button class="ui-btn ui-btn-inline" id="image_button"></button> //this is wad i tried-->
  <input id="image_button" type="button">
  <input id="timelapse_button" type="button">
  <input id="md_button" type="button"><br>
  <input id="halt_button" type="button">
  <input id="mode_button" type="button">

I have some other jQuery scripts in index.html. The above javascript in in another file called script.js. My question is, do i also insert the link for jQuery.js in that script.js? And how about $(document).ready(function()? Do i put it in the script.js too?

Answer 1

For minimal change you can do following,

1. include the jquery library in tag as <script type="text/javascript" src="static/jquery-1.10.2.min.js"></script>

2. replace document.getElementById('id') to $('#id').

   document.getElementById("video_button") => $('#video_button')

3. Anything after the document.getElementById() get bit different in jquery

   document.getElementById("video_button").disabled = false; $('#video_button').removeAttr('disabled');

   document.getElementById("video_button").value = "record video start"; $('#video_button').val('record video start');

   document.getElementById("image_button").onclick = function() {send_cmd("im");}; $('#image_button').click(function() {send_cmd("im");});

references

• https://api.jquery.com/removeAttr/
• http://api.jquery.com/val
• http://api.jquery.com/click/