Search code examples
jqueryxmlhttprequestjqxhr

jQuery.get is not pulling data from a valid URL

TLDR

jQuery.get() correctly pulls the header information for one select option onchange value but not the others even though they are valid URLs.

Goal

To use jQuery and GitLab API to validate the header information of the select value when changed by the user and before submitting the form.

Process

  • User selects a value from the select with class opt0.
  • onchange calls jQuery.
  • jQuery validates that the URL exists (and will eventually go on to verify details of the array).
  • jQuery returns the array of the existing URL to the Chrome developer console (for the time being).
  • jQuery will eventually return invalid URL as a console message or alert().

Actual Results

The console is reporting that the project is not found for valid URLs.

Selecting each of the values results in the following console information:

  • xxxxxxx: (9) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
  • yyyyyyy: jquery.min.js:2 GET https://gitlab.com/api/v4/projects/yyyyyyy/repository/tree 404 (Not Found)
  • zzzzzzz: jquery.min.js:2 GET https://gitlab.com/api/v4/projects/zzzzzzz/repository/tree 404 (Not Found)

Bear in mind that all URLs are valid and contain the correct array data that I am looking for.

Expected Results

My expectation is that since one URL works correctly that all should work correctly as they are all valid URLs. The following is an example of a desired result:

  • xxxxxxx: (9) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
  • yyyyyyy: (3) [{…}, {…}, {…}]
  • zzzzzzz: (5) [{…}, {…}, {…}, {…}, {…}]

Errors

Error messages returned:

  • {"message":"404 Project Not Found"}.
  • jquery.min.js:2 XHR failed loading: GET https://gitlab.com/api/v4/projects/xxxxxxx/repository/tree
  • jquery.min.js:2 XHR failed loading: GET https://gitlab.com/api/v4/projects/yyyyyyy/repository/tree

I am logged into gitlab so authentication shouldn't be the issue.

Attempted

  • $.load() - same result.

  • $.ajax() - same result.

  • $.get() - shown with error. Figured I would go with this due to it's simplicity.

  • parseInt(this.value) - same result.

  • var url = encodeURIComponent("https://gitlab.com/api/v4/projects/" + parseIntthis.value) + "/repository/tree"); - doesn't load URL

  • Chrome developer console > Network > clear browser cache

  • Chrome developer console > Network > XHR > Initiator -> Path and chain look to be correct.

Code

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $(".opt0").change(function(){
                    var url = "https://gitlab.com/api/v4/projects/" + this.value + "/repository/tree";
                    $.get(url, function( data ) { 
                        console.log(data);
                    }, "json" );  
                });
            });
        </script>
    </head>
    <body>
        <?php
            $menu = array('xxxxxxx', 'yyyyyyy', 'zzzzzzz');
            echo "<select name=selex class='opt0'>";
                echo "<option value=''>---</option>";
                foreach ($menu as $option) {
                    echo "<option value=$option>$option</option>";
                }
            echo "</select>";
        ?>
    </body>
</html>
Solution

  • The answer turned out to be an authentication issue after all.

    <script>
    $(document).ready(function(){
        $(".opt0").change(function(){
            var url1 = "https://gitlab.com/api/v4/projects/"+this.value+"/repository/tree";
            var settings = {
              "async": true,
              "crossDomain": true,
              "url": url1,
              "method": "GET",
              "headers": {
                "PRIVATE-TOKEN": "<your token>"
              }
            }
            $.ajax(settings).done(function (response) {
                console.log(response);
            });
        });
    });
</script>