Dynamically get URL for JQuery Ajax request from Data Attribute

Question

I have a JQuery Autocomplete function that I need to be able to pass a url into. I'm trying to pull the url from the html data-url attribute, however I'm currently getting a variable is undefined message in the JavaScript console, so I know I'm not getting the values I expect. I've included my code below. Any help would be greatly appreciated.

JQuery Function:

 $(function () {
    $(".autocomplete").autocomplete({
        delay: 0,
        source: function (request, response) {
            var baseURL = $(this).data("url");
            $.ajax({
                type: "GET",
                contentType: "application/json; charset=utf-8",
                url: baseURL + request.term,
                dataType: "json",
                success: function (data) {
                    response(data)
                }
            });
        },
        minLength: 1,
    });

HTML Element:

<td style="width: 90%">
   <label for="tag_Name" class="inline">Server Tags: </label>
      <input class="fixed autocomplete" type="text" id="tag_Name" placeholder="Type tags to add..." data-url="/RequestFieldValues/GetLikeResourceTags/?prefix=" />
</td>

Reinstate Monica Cellio · Accepted Answer · 2013-10-03 23:10:21Z

3

Try this instead...

$(function () {
    $(".autocomplete").each(function() {
        var baseURL = $(this).data("url");
        $(this).autocomplete({
            delay: 0,
            source: function (request, response) {
                $.ajax({
                    type: "GET",
                    contentType: "application/json; charset=utf-8",
                    url: baseURL + request.term,
                    dataType: "json",
                    success: function (data) {
                        response(data)
                    }
                });
            },
            minLength: 1,
        });
    });
});

I've put the .autocomplete() inside an each() function so you can refer to this to get the base url from the data attribute. You can then pass that into the source function.

Incidentally, if there is more than 1 input then you need to make each one have a unique ID. You shouldn't have elements with the same ID :)

edited Oct 3, 2013 at 23:10

answered Oct 3, 2013 at 22:48

Reinstate Monica Cellio

26.2k6 gold badges54 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user2836554 Over a year ago

Still coming up undefined even with quotes.

Reinstate Monica Cellio Over a year ago

Try that and let us know how you get on.

user305584 · Accepted Answer · 2014-11-04 22:00:45Z

2

Another way to change the URL in a ajax request

$.ajax({
  url: "http://static.url/",
  beforeSend: function (xhr) {
    this.url = "http://dyn.url/" + "here"
  }
});

answered Nov 4, 2014 at 22:00

user305584

211 bronze badge

Comments

Hussein Nazzal · Accepted Answer · 2013-10-03 22:50:11Z

0

i think what you should be doing is :

 $(function () {
var baseURL = $(".autocomplete").data('url');
    $(".autocomplete").autocomplete({
        delay: 0,
        source: function (request, response) {
            $.ajax({
                type: "GET",
                contentType: "application/json; charset=utf-8",
                url: baseURL + request.term,
                dataType: "json",
                success: function (data) {
                    response(data)
                }
            });
        },
        minLength: 1,
    });

answered Oct 3, 2013 at 22:50

Hussein Nazzal

2,56720 silver badges35 bronze badges

1 Comment

user2836554 Over a year ago

there are more than one element with the ".autocomplete" class so that I dont think will work either. I need to get the URL from the .autocomplete class making the request which is why I was attempting to use the $(this) reference

Collectives™ on Stack Overflow

Dynamically get URL for JQuery Ajax request from Data Attribute

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related