Question posted in
You can find the official documentation here.

Jquery ajax – Finding Id that is equal to id passing in with variable – Jquery

This is the code that it executed upon a successful ajax call in which JSON data is returned. I attempting to iterate over the data and append the values to variables. Those variables are then used in the switch statement that compares the fieldType, which will be an Input, Button or Select. If matches, the fieldValue is appended or if there is a button the field variable is clicked.

The data is being successful returned and looks like this:

{
    "scenarioDataId": 1,
    "scenarioId": 1,
    "fieldType": "Input",
    "fieldName": "HouseNumberOrName",
    "fieldValue": "28"
  },

In this example fieldType is equal to Input, fieldName (which is the id of the field) is equal to HouseNumberOrName and fieldValue which is equal to the value 28. I am attempting to compare the fieldType and according on that type do so meting such as append a value to the input field in the UI which has the matching id.

function scenarioData(response) {
  $.each(response, function(key, val) {
    var fieldType = val.fieldType;
    var fieldName = val.fieldName;
    var fieldValue = val.fieldValue;

    var field = $(fieldName); //// Here is my issue

    console.log(field);

    if (field != undefined) {
      switch (fieldType) {
        case "Input":
          $(field).val(fieldValue);
          console.log(fieldValue);
          break;
        case "Button":
          $(field).click();
          break;
        case "Select":
          $(field).val(fieldValue);
          break;
      }
    }
  })
}

Hopefully this makes sense, but I want to use the variable field (which is equal to the field id) to find a specific field in the UI. For example in this instance there is a field called House Number with the Id HouseNumberOrName. I want to assign the fieldName to field and then use field variable to find the corresponding id in the html for my UI and then the switch statement matches the type and in this instance appends a value to that field.

How would I go about setting the field variable to find the id with the matching field name?

Tags:

2

Answers


  1. 0

    You need to use # while using jquery id selector and then get the dom element. Also, once you get the jquery object, you don’t need to wrap it in $() again, you can use it as it is for peforming jquery calls / methods.

    NOTE: use $ while declaring variable for jquery object. It is just a standard way but not mandatory

    See below code

    function scenarioData(response) {
                        $.each(response, function(key, val) {
                            var fieldType = val.fieldType;
                            var fieldName = val.fieldName;
                            var fieldValue = val.fieldValue;

                            var $field = $('#'+fieldName); //prepend # for id

                            console.log($field);

                            if(field != undefined) {
                                switch (fieldType) {
                                    case "Input":
                                        $field.val(fieldValue);
                                        console.log(fieldValue);
                                        break;
                                    case "Button":
                                        $field.click();
                                        break;
                                    case "Select":
                                        $field.val(fieldValue);
                                        break;
                                }
                            }
                        })
                    }
    Login or Signup to reply.
  2. 0

    You want to add the # selector and test the length of the object returned

    $field = $("#"+fieldName);

    Something like this

    function scenarioData(response) {
  $.each(response, function(key, val) {
    const [fieldType, fieldName, fieldValue] = val;
    const $field = $("#" + fieldName);
    if ($field.length > 0) {
      if (fieldType === "Input" || fieldType === "Select") {
        $field.val(fieldValue);
      } else if (fieldType === "Button") {
        $field.click();
      }
    }
  })
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search