include file with jquery

$(document).ready(function() {
  $('body').load('insertIncludeFileHere.html');
});
Advertisements

autocomplete using text file with two fields

content of json file ( put in apache directory )

[{"label":"Paris","value":"FR"},{"label":"Madrid","value":"ES"}]

content of index.html

<script src="jquery-3.3.1.min.js"></script>
<script src="jquery-ui.min.js"></script>
<link rel="stylesheet" href="jquery-ui.min.css">

<font>City:</font><input id="city" type="text">
<label>Country: </label><font id="country"></font>

<script type="text/javascript">
$.getJSON("cities.json", function( data ) {
  $( '#city' ).autocomplete({
    source: data,
    select: function( event, ui ) {
      $( '#city' ).val( ui.item.label );
      $( '#country' ).text( ui.item.value );
      return false;
    },
    minLength: 1
  });
}); // $.getJSON...
</script>

autocomplete with jquery using text file

content of languages.txt file (put in directory visible by apache):

[['C'],['CSS'],['Java'],['JavaScript'],['Perl'],['PHP']]

content of index.html file

<script src="jquery-3.3.1.min.js"></script>
<script src="jquery-ui.min.js"></script>
<link rel="stylesheet" href="jquery-ui.min.css">

<font>Language:</font><input id="lang" type="text">

<script type="text/javascript">
$.getJSON("languages.txt", function( data ) {
  var autocompleteLang = [];
  for ( var i = 0, len = data.length; i < len; i++ ) {
    autocompleteLang.push( data[i][0] );
  }
  $( "#lang" ).autocomplete({
    source: autocompleteLang,
    select: function( event, ui ) {
      console.log( 'you selected:', ui.item.value );
      console.log( 'you input was:', this.value );
    },
    minLength: 1
  });
}); // $.getJSON...
</script>

create delay for a event in jquery

<script src="jquery-3.3.1.min.js"></script>

<input id=name placeholder="name" type="text">
<input id=age placeholder="age" type="text">
<input type="submit">
<script type="text/javascript">
var delay = (function(){
  var timer = 0;
  return function(callback, ms){
    clearTimeout (timer);
    timer = setTimeout(callback, ms);
  };
})();

$("#name, #age").on('keyup', function() { 
  console.log('without delay');
  delay(function(){
    console.log('with delay');
  }, 3000 );
});
</script>

manipulate multiple elements jquery

<script src="jquery-3.3.1.min.js"></script>

<input id=one placeholder="first" type="text">
<input id=two placeholder="second" type="text">
<input id=three placeholder="tird" type="text">
<input type="submit">
<script type="text/javascript">
$(document).on('keyup change', function(e) { 
  $("#one, #three").each(function() {
    if ( $.trim( $(this).val() ) == '' ) {
      $(this).css({ "border": "1px solid red", "background": "#fff2e6" });
    } else {
      $(this).css({ "border": "", "background": "#ffffca" });
    }
  });
});
</script>

check if any textboxes are empty with jquery

<script src="jquery-3.3.1.min.js"></script>

<input placeholder="first" type="text">
<input placeholder="second" type="text">
<input type="submit">
<script type="text/javascript">

$(document).on('keyup change', function(e) {
  var isEmpty = false;
  $('input[type="text"]').each(function() {
    if ( $.trim( $(this).val() ) == '' ) {
      isEmpty = true;
      $(this).css({ "border": "1px solid red", "background": "#fff2e6" });
    } else {
      $(this).css({ "border": "", "background": "#ffffca" });
    }
  });
  isEmpty ? $('input[type="submit"]').hide() : $('input[type="submit"]').show();
});
</script>