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


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:

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:


Errors

Error messages returned:

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


Attempted


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>