New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

undefined function error on live server, works fine in local #12

Closed
Shobs opened this Issue Nov 21, 2014 · 3 comments

Comments

Projects
None yet
2 participants
@Shobs

Shobs commented Nov 21, 2014

Hi,

Great plugin!

As the title say I am getting an undefined function error when using the plugin on my live server, but it works fine locally. I git push to my live server so there is no inconsitency between the two version.

My initialisation is as follow:

$.typeahead({
      input: "#search-where-display",
      minLength: 1,
      order: "asc",
      display: 'postal',
      maxItem: 4,
      debug: true,
      template: '<span class="row">' +
      '<span class="postal">{{postal}},</span>' +
      '<span class="city">{{localisation}}</span>' +
      "</span>",
      source: {
           code: {
               url: [{
                   type: "POST",
                   url: url,
                   data: {myKey: "myValue"}
               }, 'data.code'],
           },
           city:{
               url: [{
                   type: "POST",
                   url: url,
                   data: {myKey: "myValue"}
               }, 'data.city'],
               display: 'localisation',
               template: '<span class="row">' +
               '<span class="postal">{{postal}},</span>' +
               '<span class="city">{{localisation}}</span>' +
               "</span>",
           }
      },
      callback: {
           onClick: function (node, a, obj, e) {
               node.val(obj.postal + ', ' + obj.localisation);
               $('#search-where').val(obj.postal);
               if ($('#main-search').length) {
                   node.parents('form').submit();
               }
           },
      }
});

Here is the php (Laravel Eloquent):

$qData = LiveSearch::all()->toArray();
$data = array(
    'status' => true,
    'error'  => null,
    'data'   => array(
        'code' => $qData,
        'city' => $qData
    )
);

    return Response::json($data);

Database structure for this table:

Schema::create('livesearch', function(Blueprint $table) {
    $table->increments('id');
    $table->integer('postal')->unsigned();
    $table->string('localisation');
    $table->string('plaatsnaam');
    $table->string('province');
    $table->string('provincie');
    $table->float('latitude', 10,6);
    $table->float('longitude', 10,6);
    $table->string('pays');
    $table->string('land');
    $table->timestamps();
});

When I focus the input field the ajax call is successful but as soon as I type something in the input field I get:

 Uncaught TypeError: undefined is not a function    jquery.typeahead.js:418
 search                                             jquery.typeahead.js:418
 (anonymous function)                               jquery.typeahead.js:330
 n.event.dispatch                                   jquery-1.11.0.min.js:3
 r.handle                                           jquery-1.11.0.min.js:3

Any help with this issue would be greatly appreciated :)

Edit:
It seems that the issue was that the postal column is an int, once I changed it to string, the issue went away.

@running-coder

This comment has been minimized.

Owner

running-coder commented Nov 24, 2014

Hey Shobs,

sorry for the delay, I've just found the issue. In few words: I'm running .toLowerCase() on the display key but if the display key is a number it doesn't have this function available as it is reserved to string only. I'll check tonight to either force the display into a string ex: 123+"" or check the type before running .toLowerCase() which seem more optimal so in the callback function(s) you should be able to retrieve the proper value type (string or numeric).

Regarding your initialization:

  • Unlike PHP, make sure you are not leaving trailing "," after your object. Leaving "," at the end of an object will cause a javascript issue in IE and prevent the typeahead to work in that browser.
  • Declaring a new template in options.source.city.template will override the options.template for this group but since it is the same you can remove options.source.city.template property.
@Shobs

This comment has been minimized.

Shobs commented Nov 24, 2014

Hey Running-coder,

No problem at all, we all have a busy life :) Thanks for the reply and input, I'll rectify those.

As a feature request, which could just apply to my use-case, the ability to pass an array or string in the display maybe with a delimiter, so the values injected in the display field could be multiple values of the source object?

Although it can easily be done with the on-click event, could be of use in some use-case.

Once again thanks for the reply and all your hard work!

@running-coder

This comment has been minimized.

Owner

running-coder commented Nov 25, 2014

Hey Shobs,

good suggestion it would make sense with your implementation, althrough if the template or any other source property differs from the original group, a second group will have to be declared.

I'll keep that in mind and perhaps implement it in future version, meanwhile you shouldn't worry about your second group making an extra ajax call. Since both group shares the same url, the result is kept in memory. If you open your network tab there should only be 1 request.

lmk if everything works fine.

Thanks for your feedback!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment