autocomplete is loading but not working

I am facing a problem with javascripts. I am trying to use category complete which works, but the problem is when I load the page the script gets loaded and when I try to use it its not working.

When I refersh(not F5) but when I go back to that page and try to search, then it work. May I know where I went wrong?

In chorme inspector I am getting an error when I try autocomplete when the page is loaded.

XMLHttpRequest cannot load https://www.visitrentals.com/passingdata.php?term=&term=lon. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.visitrentals.com' is therefore not allowed access.

thank you for your help.

The struct of the files and the code are:

HTML:

    <html>
    <head>
     <!-- To make HTML5 elements work in IE -->

    <script>(function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while(i--){document.createElement(e[i])}})()</script>
<base href="https://www.visitrentals.com/">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php echo $title;?></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">
<meta name="description" content="<?php echo $meta_des;?>">
<meta name="keywords" content="<?php echo $meta_keywords;?>">
<meta name="author" content="">
<link rel="canonical" href="https://www.visitrentals.com"/>

<script src="js/jquery-1.8.2.js"></script>
<script src="js/jquery-ui.min-1.8.js"></script>
<script src="js/jquery.ui.touch-punch.min.js"></script>
<script src="js/main-2014.js"></script>
<script src="js/ga.js"></script>

<link href="css/originalcss.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css?v=20032014" type="text/css" media="screen"/>

<!-- Favicons -->
<link rel="shortcut icon" href="images/utility/favicon.png" />
<link rel="shortcut icon" href="images/utility/favicon.ico" />

<!-- iOS7 touch icons-->
<link rel="apple-touch-icon" type="image/png" sizes="76x76" href="images/utility/apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon" type="image/png" sizes="120x120" href="images/utility/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon" type="image/png" sizes="152x152" href="images/utility/apple-touch-icon-152x152.png" />

<!-- iOS6 touch icons-->
<link rel="apple-touch-icon-precomposed" type="image/png" href="images/utility/apple-touch-icon-57x57-precomposed.png" />
<link rel="apple-touch-icon-precomposed" type="image/png" sizes="72x72" href="images/utility/apple-touch-icon-72x72-precomposed.png" />
<link rel="apple-touch-icon-precomposed" type="image/png" sizes="114x114" href="images/utility/apple-touch-icon-114x114-precomposed.png" />
<link rel="apple-touch-icon-precomposed" type="image/png" sizes="144x144" href="images/utility/apple-touch-icon-144x144-precomposed.png" />

<style>
    .tel { color: #fff; font-size: 14px; }
</style>
   </head>
    <body>
   <form class="homepage-hero-form form-horizontal" action="result.php" method="post" id="searchform">
                <!-- <div class="control-group"> -->
                <!-- <h1 class="searchboxheader">Serviced apartment accommodation</h1> -->
                <input required type="text" id="question1" name="destination" class="span5 homeQ" placeholder="Where do you want to go?">
                <input required type="hidden" id="cat" value="" name="cat">
                <!-- </div> -->
                <!-- <div class="control-group"> -->

                <input required type="text" id="arriveDate" name="CheckInDate" class="leftSelect homeSelect" value="Arrive" readonly="readonly" autocomplete='off'/>
                <input required type="text" id="departDate" name="CheckOutDate" class="rightSelect homeSelect" value="Depart" readonly="readonly" autocomplete='off'/>
                <!-- </div> -->
                <!-- <div class="control-group" id="selectRooms"> -->
                <!-- <div class="home_visitor leftSelect"> -->
                <select  id="adult_select" placeholder="Adults" class="" name='adultsRoom_0'>
                    <option value="1">Adult 1</option>
                    <option value="2" selected="selected">Adults 2</option>
                    <option value="3">Adults 3</option>
                    <option value="4">Adults 4</option>
                    <option value="5">Adults 5</option>
                </select>
                <!-- </div> -->
                <!-- <div class="home_visitor rightSelect"> -->
                <select  id="child_select" placeholder="Children" class="" name='childrenRoom_0'>
                    <option value="0">Children 0</option>
                    <option value="1">Children 1</option>
                    <option value="2">Children 2</option>
                    <option value="3">Children 3</option>
                    <option value="4">Children 4</option>
                </select>
                <!-- </div> -->
                <!-- </div> -->

                <!-- <div class="control-group"> -->
                <input type='submit' class="btn btn-large btn-block btn-primary" value="search"/>
                <!-- </div> -->

            </form>

   <script src="js/bootstrap.js"></script>
   <script src="js/social/link.js"></script>
   <script src="js/social/share.js"></script>
   <script src="js/jquery.validate.min.js"></script>
   <script src="js/validation/jquery.validate2.js"></script>

   </body>
   </html>

The javascript is under main-2014.js:

    $.widget( "custom.catcomplete", $.ui.autocomplete, {    
_renderMenu: function( ul, items ) {

    var that = this,
    currentCategory = "";
    $.each( items, function( index, item ) {
        if ( item.category != currentCategory ) {
            ul.append( "<li class='ui-autocomplete-category'>"+ item.category +"</li>" );
            currentCategory = item.category;
        }
        that._renderItem( ul, item );
    });

}
    });

    if($( "#question1" ).length){
$(function() {
    $( "#question1" ).catcomplete({
        delay: 0,
        minLength: 3,
        max:10,
        //source: "http://www.visitrentals.com/passingdata.php?"+ $("#question1").val(),
                    source: "passingdata.php?term="+ $("#question1").val(),
        select: function(event, ui){
            $('#cat').val(ui.item.category);
        }
    });
});
    }

Answers


You cannot make cross domain ajax requests unless the site explicitly allows you too. That is what the 'Access-Control-Allow-Origin' header is for, allowing other sites to make ajax requests (among other things). You can read more about it concept here http://en.m.wikipedia.org/wiki/Cross-origin_resource_sharing


Need Your Help

How do I show another window in an IPhone window application

iphone objective-c cocoa-touch xcode

First of all, I'm new to Objective-C and IPhone programming. There is somehing I can not get to work. I have a IPhone window application and in the MainWindow I have a button. I want to show another

silverlight/wpf webbrowser encoding

c# silverlight encoding browser

i was looking for a long time to get a solution for polish charset in wpf webbrowser. After few hours of playing i made a solution, maybe someone else will need it also so i share.