Can the ID of a text box be passed as a value in the URL section of an AJAX function?

How can I consume the JSON results from a URL after submitting a value in the text box that contains a arcgis rest service?

  $("#submitp").click(function () {
       // alert('in');
        var data_spacial1 = $('#spacial1').val();
        alert(data_spacial1);
        getspacial1(data_spacial1);

    });

    function getspacial1(data_spacial1) {

        alert("Executing function");

        $.ajax({
            url: "data_spacial1",  // where data_spacial1=http://164.100.133.211:6080/arcgis/rest/services/SoilM/2016April18/MapServer/0?f=pjson
            data: { f: "json", where: "1=1", returnGeometry: false },
            dataType: "jsonp",
            jsonpCallback: "callback",
            success: function (response) {
                console.log("Received response: ", response);
                alert("Success!");
            }

        });

    }

Answer №1

To utilize the argument passed in, you simply eliminate the quotes like this:

url: data_spacial1

For example:

function fetchData(data_spacial1) {
    alert("in1");
    $.ajax({
        url: data_spacial1, // ***
        data: { f: "json", where: "1=1", returnGeometry: false },
        dataType: "jsonp",
        jsonpCallback: "callback",
        success: function (response) {
            console.log("got response: ", response);
            alert("in2");
        }
    });
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

AJAX - Alert with a beep sound each time a new entry is inserted into the database table

Having trouble determining the condition to test for when a new record is added to the database table. Can anyone lend a hand? Here's a snippet of the data retrieved from the database: ['Paul Abioro', '<a href="/cdn-cgi/l/email-prot ...

Using JSON with a jQuery AJAX function

Hello everyone! I'm relatively new to the world of AJAX and I'm having trouble figuring out what's wrong with my code. I'm creating a form that should display content from a database using autocomplete. I'm attempting to update a ...

The significance of order when evaluating 2 Date Objects

While working with Date objects, I encountered something peculiar. When comparing two Date objects - let's call them a and b, the expressions a > b and b < a yield different results. Check out this JSFiddle for an example. var u = Date(2014,7, ...

Continual Use of Google Calendar API

Is there a way to request access to a user's calendar once and then continuously query events without needing to request access again? Can an access key be used for ongoing access as long as it remains valid? Currently, I am utilizing the google-cale ...

Guide on implementing a personalized 'editComponent' feature in material-table

I'm currently integrating 'material-table' into my project. In the 'icon' column, I have icon names that I want to be able to change by selecting them from an external dialog. However, I am encountering issues when trying to update ...

changing the name of a key in an array of objects with javascript

I have an array of objects with keys and values as follows: let input = [ { "b1": [ 1, 0 ] }, { "b2": [ 1, 6 ] }, { "total": [ 0, 4 ] }, { "b3plus": [ 0, 2 ] } ] I want to rename the keys of this arr ...

Jasmine's spyOn method in Angular does not impact functions within the factory

Initially, my Controller looks like this: login.controller.js: angular.module('app').controller('LoginController', function($scope,UserService,$location) { $scope.submit = function() { UserService. ...

What is the process for using the fetch method in React to upload a file?

Currently, I am developing a react component that involves uploading an Excel file to a server. Although my approach seems correct, it returns an empty object when I check the request body in console. <input type="file" id="avatar" name="avatar" onChan ...

"Enhance your web development with Vue.js and Vue-chart.js for beautiful linear

I'm currently struggling to implement a linear gradient background on my Vue-chart.js line chart. Despite searching high and low, the documentation and examples available are not proving to be helpful. After importing the Line component from vue-char ...

The transfer of JSON information from View to Controller yields no value

My goal is to create functionality where users can add and delete JQuery tabs with specific model data, and then save this data to a database. I'm attempting to use an ajax call to send JSON data to the controller, but I am encountering an issue where ...

Comparison of efficiency in declaring JSON data using JSON.parse versus an object literal

In a recent video from the 2019 Chrome Dev Summit titled "Boosting App Speed with JSON.parse", it was revealed that utilizing JSON.parse with a string literal instead of an object literal can result in a significant enhancement in speed. The official Googl ...

Harnessing PHP-grown JSON to retrieve information using JQuery

After successfully using Alert on the response parameter in jQuery, I can see the values I need. However, the issue arises when trying to extract them using key/value pairs. I'm not sure if this is a compatibility problem with the JSON format from PHP ...

How can I retrieve the numeric key code when the 'Shift' key is being held down during a KeyboardEvent?

When working on my application, I encountered the need to identify if the user pressed any number keys (main keyboard or numpad) in combination with the shift/ctrl/alt keys. This is crucial because the key pressed corresponds to a number in the array (ran ...

What is the best way for AngularJS ng-repeat to access the key of an item?

For more information, check out the documentation: https://code.angularjs.org/1.2.26/docs/api/ng/directive/ngRepeat The ngRepeat directive creates a template for each item in a collection. Each template has its own scope with the current item assigned t ...

Storing text inputs in browser storage via JavaScript

I am a Javascript beginner and struggling with an error in my program. The code I have so far looks like this: function addTextEntry(key, text, isNewEntry) { // Create a textarea element to edit the entry var textareaElement = document.createElem ...

Nested routing in Nextjs is encountering issues when implemented with a specific file

I'm struggling with setting up routes in Next.js. When I create the path "/app/[locale]/admin/page.tsx," I can access http://url/admin/ without any issues. However, when I try to set up "/app/[locale]/admin/login.tsx," I encounter an error and cannot ...

The Webdriver sendKeys() function seems to be malfunctioning. Even attempting to use JavaScript as

Struggling to use WebDriver sendKeys() function to input text in a text field View the HTML below: <table class="gridtable" cellspacing="0" __gwtcellbasedwidgetimpldispatchingfocus="true" gwtcellbasedwidgetimpldispatchingblur="tru ...

Setting up an event listener for a newly added list through the use of node appendChild

I am currently working on dynamically adding a select list to my HTML document. While I have successfully added the node to the DOM, I am struggling with creating an event listener in a separate JavaScript file that recognizes the newly created select list ...

How to iterate over an array within a prop of a JSX/React component

This one's a bit tricky so my apologies for any confusion. Within the component PersonalInfo.jsx, there are three Input.jsx components and one Button.jsx component. PersonalInfo.jsx utilizes the state [valid, setValid] = useState([]). Upon clicking ...

Anticipate the file format on the .Net server when transmitting files with HTML5 FormData

When using html5 FormData to send files to the server, I am encountering an issue where the incoming photos object is always null. Despite seeing the files being sent in the network monitor, the type that I am expecting appears to be incorrect. Currently, ...