Uncaught TypeError: autocomplete is not a function in jQuery

2017-06-17 18:59 Cicedea Andrei imported from Stackoverflow

I'm struggling to work with jQuery autocomplete to fill a HTML input from database. I wrote the whole code, but I still get this error

Uncaught TypeError: autocomplete is not a function in jQuery

and I can't understand why.

Here is my code:

gethint.php

<?php
    require_once ('connect.php');

    $q=$_REQUEST["q"]; 
    $sql="SELECT nume FROM angajati WHERE nume LIKE '%$q%'";
    $result = mysql_query($sql);

    $json=array();

    while($row = mysql_fetch_array($result)) {
      array_push($json, $row['nume']);
    }

    echo json_encode($json);
?>

profile_admin.php:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Forms</title>

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/datepicker3.css" rel="stylesheet">
<link href="css/profile.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->

</head>

<?php  
    require('connect.php');
    //3. If the form is submitted or not.
    //3.1 If the form is submitted

    $username = "";

    date_default_timezone_set('Europe/Bucharest');

    // setting the current date and time
    $date = date('Y-m-d H:i:s');

    if (isset($_GET['user'])){
    //3.1.1 Assigning posted values to variables.
        $username = $_GET['user'];
    }
    else{

        die("Nu esti logat");

    }

    $query = "SELECT * FROM angajati INNER JOIN conturi on conturi.id = angajati.id_cont INNER JOIN incadrare on angajati.id_incadrare=incadrare.id WHERE username='$username'";

    $result = mysqli_query($connection, $query) or die(mysqli_error($connection));

    if (mysqli_num_rows($result) > 0) {
        // output data of each row
        while($row = mysqli_fetch_assoc($result)) {
            $id = $row["id"];
            $name = $row["nume"];
            $prenume = $row["prenume"];
            $departament = $row["departament"];
            $data_angajarii = $row["data_angajarii"];
            $data_nasterii = $row["data_nasterii"];
            $telefon = $row["telefon"];
            $email = $row["email"];
            $adresa = $row["adresa"];
            $poza = $row["poza"];
            $titlu = $row["titlu"];
        }
    }
    else{
        die("Nu esti logat");
    }


?>

<body>

    <div class="container">
      <div class="row">

      <div class="col-md-5  toppad  pull-right col-md-offset-3 ">
       <br>
        <p class=" text-info"><?php echo $date; ?></p>

      </div>
        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xs-offset-0 col-sm-offset-0 col-md-offset-3 col-lg-offset-3 toppad" >

          <div class="panel panel-info">
            <div class="panel-heading">
              <h3 class="panel-title">Buna venit, <?php echo $name." ".$prenume ?></h3>
            </div>
            <div class="panel-body">
              <div class="row">

                <div class=" col-md-9 col-lg-9 "> 
                  <table class="table table-user-information">
                    <tbody>

                      <form role="form" action="login.php" method="post">
                        <fieldset>
                            <div class="form-group">
                                <input type="text" name="hint" placeholder="Caută un angajat!" class="form-username form-control" id="hint">
                            </div>
                            <center><button type="submit" style="width:200px;" class="btn">Caută!</button></center>
                        </fieldset>
                    </form>

                    </tbody>
                  </table>
                  <a href="#" class="btn btn-primary">My Sales Performance</a>
                  <a href="#" class="btn btn-primary">Team Sales Performance</a>
                </div>
              </div>
            </div

          </div>
        </div>
      </div>
    </div>



    <script src="js/jquery-1.11.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/chart.min.js"></script>
    <script src="js/chart-data.js"></script>
    <script src="js/easypiechart.js"></script>
    <script src="js/easypiechart-data.js"></script>
    <script src="js/bootstrap-datepicker.js"></script>
    <script src="js/profile.js"></script>
    <script type="text/javascript">
        $(function() {
            $( "#hint" ).autocomplete({
                source: function( request, response ) {
                    $.ajax({
                        url: "gethint.php",
                        dataType: "jsonp",
                        data: {
                            q: request.term
                        },
                        success: function( data ) {
                            response( data );
                        }
                    });
                },
            });
        });     
    </script>   
</body>

</html>

Thanks in advance!

See also questions close to this topic

validate input value of min and max

I know this can be validated with HTML now, but also need to validate on PHP side.

<input type="number" name="startpoint" min="100000" max="999998">
<!-- input one, but will validate 2, this is `startpoint`, other is ending or `MAX_VALUE`-->

i essentially need to validate the same which is being validated above in my mark-up; but within PHP side.

while ($_POST['startpoint'] => 100000 || =< 999998) { 

    for (){ // run for loop

    }

}

Using PHP to write data to an Azure database?

I have been trying to get this to work for a while now, I'm trying to get my web app to write to my Azure database. I currently have this code as my html form:

<form method="get" id="form1" action="../Scripts/addproduct.php">
    <table class="add-table">
        <tr>
            <!--Product ID field-->
            <td>Product ID</td>
            <td><input id="PID" type="number" style="width: 100%;"></td>
        </tr>
        <tr>
            <!--Product Name field-->
            <td>Product Name</td>
            <td><input id="PName" type="text" style="width: 100%;"></td>
        </tr>
        <tr>
            <!--Product Catagory field-->
            <td>Product Catagory</td>
            <td><input id="PCat" type="text" style="width: 100%;"></td>
        </tr>
        <tr>
            <!--Product Price field-->
            <td>Product Price</td>
            <td><input id="PPrice" type="text" style="width: 100%;"></td>
        </tr>
    </table>
    <!--Submit button-->
    <input id="Submit1" type="submit" value="Submit" />
</form>

This is the code in my PHP file: (personal info replaced with hashtags)

<?php
    $username = "##";
    $password = "##";
    $database = "##";
    $servername = "tcp:##,1433";

    $conn = new PDO($servername, $database, $username, $password);

    // Assigns the value of the form elements to a PHP value

    $productid = $_GET["PID"];
    $productname = $_GET["PName"];
    $productcatagory = $_GET["PCat"];
    $productprice = $_GET["PPrice"]; 

    $sql = "INSERT INTO Products VALUES ('$productid', '$productname', '$productcatagory', '$productprice')";

    exit()
?>

Any help would be appreciated! EDIT: Forgot to add my insert code

Scénarios échoués in behat symfony4

I try test my project with behat but I have error 401 when authentification in scénario authentification ...

when I lanch this command:

vendor/bin/behat --tags=userRides

I have this error :

this is code

code csa_guzzle.yml:

csa_guzzle:
                    profiler: '%kernel.debug%'
                    logger: true
                    clients:
                        app_local:
                            config:
                                base_uri: 'http://localhost/my-project/public/index.php'

this part of code feature:

Scenario: Can't view Rides list without authentication
    When I send a "GET" request to "/api/users/rides"
    Then the response code should be 401

  Scenario: Can view Rides list
    When I am successfully logged in with username: "john@test.org", and password: "johnpass"
    And I send a "GET" request to "/api/users/rides"
    Then the response code should be 200
    And the response should contain json:
      """
      {
          "meta": {
              "limit": 25,
              "total_items": 3,
              "next_page": "",
              "previous_page": ""
          }
      }
      """

also I use lexikjwtAuthentitificationBundle for generate token and this is code configuration: I success authentificate in browser but in behat I have error 401

lexik_jwt_authentication:
private_key_path: '%kernel.project_dir%/%env(JWT_PRIVATE_KEY_PATH)%'
public_key_path:  '%kernel.project_dir%/%env(JWT_PUBLIC_KEY_PATH)%'
pass_phrase:      '%env(JWT_PASSPHRASE)%'
token_ttl:        86400

and this is code fosrestbundle:

# Read the documentation: https://symfony.com/doc/master/bundles/FOSRestBundle/index.html
fos_rest:
    body_listener: true
    param_fetcher_listener: force
    format_listener:
        enabled: true
        rules:
            - { path: ^/, priorities: [ json ], fallback_format: json, prefer_extension: true }
    view:
        view_response_listener: 'force'
        formats:
            json: true
            xml: false
            rss: false
        mime_types:
            json: ['application/json', 'application/x-json']
    routing_loader:
        default_format:  json
        include_format:  false
    exception:
        enabled: true
        exception_controller: 'fos_rest.exception.controller:showAction'

code behat.yml.dist:

default:
          suites:
            default:
              contexts:
                - FeatureContext:
                    doctrine: "@doctrine"
                - App\Features\Context\RestApiContext:
                    client: "@csa_guzzle.client.app_local"
                - App\Features\Context\BikeSetupContext:
                    repository: "@App\\Repository\\Decorator\\BikeRepositoryDecorator"
                - App\Features\Context\UserSetupContext:
                    userManager: "@fos_user.user_manager"
                - App\Features\Context\RideSetupContext:
                    repository: "@App\\Repository\\Decorator\\RideRepositoryDecorator"
                    bikeRepository: "@App\\Repository\\Decorator\\BikeRepositoryDecorator"
                    userManager: "@fos_user.user_manager"
          extensions:
            Behat\Symfony2Extension:
              kernel:
                bootstrap: features/bootstrap/bootstrap.php
                class: App\Kernel
                env: dev

Bootstrap form input field that requires at least one element to be selected?

I have form where I would like to create input field(s) for account type. This is little tricky since there might be only one account type but can be two as well. In other words when first, last name is entered then they have to choose either User or Staff for account type or they can pick both. Once they select either or both then additional fields will show int he form. My question is what is the best option to approach that would require user to select at least one account type but at the same time allow them to choose two as well if they need to? Also I use HTML5 validation for this purpose, so if they choose only one the other gonna be hidden. Those hidden form fields should not be required but now I don't have a way to prevent that. Here is example:

<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form name="frmSave" id="frmSave" class="frm-Submit" autocomplete="off">
  <div class="form-group">
    <input type="text" class="form-control" name="frm_firstname" id="frm_firstname" placeholder="Enter First Name" maxlength="50" required>
  </div>
  <div class="form-group">
    <input type="text" class="form-control" name="frm_lastname" id="frm_lastname" placeholder="Enter Last Name" maxlength="50" required>
  </div>
  <div class="form-group required">
    <button class="btn btn-primary" data-toggle="collapse" data-target="#user-account">User Account</button>
  </div>
  <div id="user-account" class="collapse">
    <div class="form-group required">
      <input type="text" class="form-control" name="frm_username" id="frm_username" placeholder="Enter UserName" maxlength="50" required>
    </div>
  </div>
  <div class="form-group required">
    <button class="btn btn-primary" data-toggle="collapse" data-target="#staff-account">Staff Account</button>
  </div>
  <div id="staff-account" class="collapse">
    <div class="form-group required">
      <div class="input-group">
        <input type="text" class="form-control" name="frm_position" id="frm_position" placeholder="Choose Position" required>
      </div>
    </div>
  </div>
  <button type="submit" name="frmSaveaccount_submit" id="frmSaveaccount_submit" class="btn btn-primary">Submit</button>
</form>

So buttons for User and Staff account are actually separate fields in my database and I have to save values for example 1 or 0 if they have entered User information or Staff. Also if I try to submit the form with only Staff information for example I can't since User form fields are hidden but still required. How that can be fixed so only visible fields are required?

JQGrid Search Dialog: text input resizes when selecting column from droplist

I'm using jqGrid's search dialog box and resizing the text input in the beforeShowSearch and afterRedraw events as per this Stack Overflow post.

That works great on the initial load and reset, however, as mentioned in the comments of that post's answer, the text input resizes its width to default when a new value is chosen from the column droplist. How does one maintain the width of the text input upon selection of a new droplist item?
tinymce fullscreen issue with jquery dialog
TinyMCE in fullscreen is not going full screen to the window, it gets cutoff inside the jquery dialog.

I've tried changing z-index but no luck.

Also tried this but didn't work:
```
.ui-dialog { 
  -webkit-transform: none;
      -ms-transform: none;
       -o-transform: none;
          transform: none;
}
```
Before fullscreen:

In fullscreen mode:

How to make a link that is not the focus looked faded?

So I have two html forms that are combined into one view and can be selected through tabs (I'm using bootstrap panel-tabs to accomplish this). I was wondering how to via css if possible make the inactive tab link look faded and then when you click on it and it becomes the focus the other tab becomes faded.

HTML:

<div class="col-12 col-sm-6 form card z-depth-3">
    <div class="panel with-nav-tabs panel-default">
        <div class="panel-heading">
            <ul class="nav nav-tabs">
                <li class="active find-pad-border"><a href="#findPartTitle" data-toggle="tab" class="find-tab"><h4>Find a participant</h4></a></li>
                <li class="find-pad"><a href="#findTeamTitle" data-toggle="tab" class="find-tab"><h4>Search for a team</h4></a></li>
            </ul>
        </div>
        <div class="panel-body">
            <div class="tab-content">
                <div class="tab-pane active" id="findPartTitle">
                    <div>
                        <form id="findFriendForm" name="findFriendForm" action="http://convio.cancer.ca/site/TR" method="post" novalidate>
                            <input type="hidden" name="s_tr_part_finder_search_mode" id="s_tr_part_finder_search_mode" value="basic">
                            <input type="hidden" name="fr_search_type" id="fr_search_type" value="participant">
                            <input type="hidden" id="fr_id_participant" name="fr_id" value="[[S334:fr_id]]">
                            <input type="hidden" id="pg" name="pg" value="pfind">
                            <input type="hidden" id="submit" name="submit" value="true">
                            <i>First Name</i>
                            <input class="form-control" type="text" size="20" name="searchFirstName" id="searchFirstName" maxlength="50">
                            <br />
                            <i>Last Name</i>
                            <input class="form-control" type="text" size="20" name="searchLastName" id="searchLastName" maxlength="50">
                            <br />
                            <button class="btn btn-yellow" id="fr_find_search" name="fr_find_search" value="Search" type="submit">Search</button>
                        </form>
                    </div>
                </div>
                <div class="tab-pane fade" id="findTeamTitle">
                    <div>
                        <form id="teamFindFriendForm" name="findFriendForm" action="http://convio.cancer.ca/site/TR" method="post" novalidate>
                            <input type="hidden" name="s_tr_part_finder_search_mode" id="s_tr_part_finder_search_mode_team" value="basic">
                            <input type="hidden" name="fr_search_type" id="fr_search_type_team" value="team" size="" />
                            <input type="hidden" id="fr_id_team" name="fr_id" value="[[S334:fr_id]]" />
                            <input type="hidden" id="teamPg" name="pg" value="pfind" />
                            <input type="hidden" id="teamSubmit" name="submit" value="true" />
                            <i>Team Name</i>
                            <input class="form-control" type="text" size="20" name="searchTeam" id="teamSearchTeam" maxLength="50">
                            <br />
                            <button class="btn btn-yellow" id="fr_find_search_team" name="fr_find_search" value="Search" type="submit">Search</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS:

.panel.with-nav-tabs .panel-heading {
    padding: 5px 5px 0 5px;
}

.panel.with-nav-tabs .nav-tabs {
    border-bottom: none;
}

.panel.with-nav-tabs .nav-justified {
    margin-bottom: -1px;
}

.find-tab {
    text-decoration: none !important;
}

li.find-pad-border {
    padding: 5px;
    border-right: solid 1px #eeeeee;
}

li.find-pad-border:hover {
    background-color: #eeeeee;
}

li.find-pad{
    padding: 5px;
}

li.find-pad:hover {
    background-color: #eeeeee;
}

li.find-pad:inactive {

}

I thought maybe :inactive was a real thing, turns out it's not lol. I've added a screen shot so you know what the search form looks like.

Hoping someone can give me some direction. Please let me know if there are additional information you need that I have over looked!

Thanks!

CSS Keyframes fade in HOLD and fade out

Whats a simple way to fade in, HOLD for a few sec, and fade out. Code here fades in nice, just not sure how to hold.

HTML

<div class="arrow_case"></div>

CSS

.arrow_case {
   width: 100%;
   height: 20vh;
   opacity: 0;
   animation-delay: 1s;
   -webkit-animation: arrowInOut 4s linear forwards;
   animation: arrowInOut 4s linear forwards;
}

@-webkit-keyframes arrowInOut {
   0%,100% {opacity: 0;}
   50% {opacity: 1;}
}
@keyframes arrowInOut {
   0%,100% {opacity: 0;}
   50% {opacity: 1;}
}

Also would like a few sec delay before it starts.

Thanks!

vertical align in inline-block list grid layout
I have tried to put vertical align middle in list (li tag) which has display inline-block.But images are not aligned middle.

When I tried to give same height "li" and inner section middle. Its not working.

My issue:

My CSS:
```
.home_page_list .woocommerce ul.products li.product {
    display: inline-block;
    text-align: center;
    width: 24%;
    vertical-align:middle;
}
```
My link: Click here
Can I restrict Google Maps Autocomplete results to just the ones that contain a postal code?
I'm trying to replace an address form with Google's autocomplete. The underlying logic doesn't work without a zip code. The way I've got it right now makes the user pick a place, parses the results to make sure there's a zip code, and finally, if there isn't one, shows a message to the user telling them why the address they picked doesn't work. This seems like unnecessary hassle for both me and the user, so I'd like to automatically restrict the results a user can type in. Is that possible? This is what the autocomplete looks like right now:
```
let type = ['address'];
let restrictions = { 'country': ['us', 'ca'] };

originAutocomplete = new google.maps.places.Autocomplete(
        /** @type {!HTMLInputElement} */(
        document.getElementById('origin-search')), {
        types: type,
        componentRestrictions: restrictions
    });
```
Is there a way to turn off naming suggestions in a code snippet?
I'm writing Selenium page object classes in Java in Visual Studio Code. I created a custom code snippet that, when entered, looks more or less like this:
```
public WebElement ELEMENTNAME() {
    return driver.findElementByCssSelector("CSSSELECTOR");
}
```
After I enter the snippet name and hit Tab, ELEMENTNAME gets the focus. I type the element name I've picked, such as ConfirmButton, and hit Tab...whereupon I find that my method now has the name ConfirmButtonElement, because VS Code decided to accept its own naming suggestion instead of what I typed.

How can I turn this "feature" off?

Usually VS Code's autocomplete suggestions are helpful, so I don't want to disable them entirely. But I definitely want to disable them in the case of naming things. Is there a way to do that?

(I'm not sure whether the behavior comes from VS Code itself or from an extension such as the Red Hat Java extensions.)
Poweshell auto-completion using script file
I wanted to execute a PowerShell script file script.ps1 like this:
```
powershell ./script.ps1
```
How will I simulate a 'tab' (auto-complete) feature in script file?

Eg : on the PowerShell prompt, I can do
```
PS> get [TAB]
```
for getting suggestions for commands starts with 'get-'

Same thing : how will I write in a script file, means saving the script.ps1 file like:
```
get-\t
```
and executing PowerShell ./script.ps1 resulting error instead of getting suggestion for command which starts with "get-"

Any idea to encode the tab event inside a script file to achieve the command auto completion ?

Related questions

Uncaught TypeError: autocomplete is not a function in jQuery

See also questions close to this topic