Javascript .add(option) not working in cordova ios project

Question

Here is my fiddle code which I want to use in my cordova application but the execution of code breaks at line

list2.add(option);

I am unable to figure that out it why as it works well on safari browser. Is it true that the cordova application for ios user web view of safari when launched in ios devices?

choose: <input type="text" list="languages" id="input_box">
<label for="languages">
  <datalist id="languages">
    <select id = "add_records">

    </select>
  </datalist>
</label>
<button onclick="abc();">get</button>

and the java script goes here:

var i;
var options = ["ASB", "SDJC" ,"S SDBCS" ,"SJDCJS OPWNX"];
//var list_allrec = document.getElementById('mylist');

var list2 = document.getElementById('add_records');

options.forEach(function (item) {
    var option = document.createElement('option');
    option.value = item;
    list2.add(option);
});

//$('#get').on('click',abc);

function abc (){
    //alert("Inside getval();");
    var val1=$("#input_box").val();
    alert(val1);
}

also that I have included the file datalist.polyfill.min.js file which is available on github at: https://github.com/Fyrd/purejs-datalist-polyfill

I have also tried it with new application as suggested in the answer

the html code is as follows:

<!DOCTYPE html>

<html>
    <head>

        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
        <link rel="stylesheet" type="text/css" href="css/index.css">
        <title>Trial App</title>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js" ></script>

          <script type="text/javascript" src="js/jquery.js"></script>
        <script>

            $(document).ready(function() {

                              alert("Inside document ready")

                              var aTags = ["anuj", "all", "ball", "one", "blackberry", "zathura","friends", "game of thrones", "sport"];

                              $( "#autocomplete" ).autocomplete({
                                                                source: aTags
                                                                });

                              $('#get').on('click', get);

                              function get() {
                              //alert("Inside getval();");
                              var val1 = $("#autocomplete").val();
                              alert("Value inside text box is: "+val1);
                              }

                              });
            </script>

    </head>
    <body>

            <h1>Trial App</h1>
            <input type='text' title='Tags' id='autocomplete' />

            <button id="get">get</button>

        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
    </body>
</html>

But it doesn't work, attaching a screenshot of the application

The screenshot of the application in work here!

Answer 1

Add your code in $(document).ready() event

Here is updated fiddle jsfiddle

jsfiddle with add method

HTML

<input type='text' title='Tags' id='autocomplete' />

JS

  $(document).ready(function() {

      var aTags = ["anuj", "all", "ball", "one", "blackberry", "zathura","friends", "game of thrones", "sport"];

 $( "#autocomplete" ).autocomplete({
     source: aTags
 });

});

Edit 1

just use the jquery autocomplete

here is the fiddle .

Edit 2

UPDATED FULL CODE

Here is the whole html code with js code.

<!DOCTYPE html>
<html>
<head>
    <title>autocomplete demo</title>
</head>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/black-tie/jquery-ui.css">
  <script
              src="https://code.jquery.com/jquery-3.2.1.min.js"
              integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
              crossorigin="anonymous"></script>
  <script
              src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
              integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
              crossorigin="anonymous"></script>
  <script type="text/javascript">
    $(document).ready(function() {

      var aTags = ["anuj", "all", "ball", "one", "blackberry", "zathura", "friends", "game of thrones", "sport"];

      $("#autocomplete").autocomplete({
        source: aTags
      });


      $('#get').on('click', get);

      function get() {
        //alert("Inside getval();");
        var val1 = $("#autocomplete").val();
        alert("Value inside text box is: " + val1);
      }

    });

  </script>
<body>
<input type='text' title='Tags' id='autocomplete' />
<button id="get">get</button>
</body>
</html>

Just jquery-ui.js and jquery-ui.css you need to include..you can customise the css later.

Hope this helps.

Javascript .add(option) not working in cordova ios project

Question

1 answers

solution1
0 ACCPTED 2017-10-09 11:00:05

Javascript .add(option) not working in cordova ios project

Question

1 answers

solution1 0 ACCPTED 2017-10-09 11:00:05

solution1
0 ACCPTED 2017-10-09 11:00:05