Using Rails to render a partial through Ajax and then modifying that partial using JavaScript

Question

Using Rails to render a partial through Ajax and then modifying that partial using JavaScript

My application allows users to click a button that triggers the appearance of a text field using ajax.

After the text field appears, I am attempting to focus on it.

Interestingly, $("#my-textfield").focus() works perfectly when executed in the console, but fails to work when placed in my js.erb file. Even trying it with a setTimeout did not yield the desired results.

When attempting

document.getElementById('my-textfield').focus();

, I encounter an error message stating "cannot focus on null".

Is there a need to somehow "reload" the DOM after loading a partial through ajax?

javascript ruby-on-rails ajax

Answer 1

Answer №1

One potential solution is to utilize the DOMNodeInserted event along with the .on() method. Although it may not be widely supported and I personally haven't tested it, this approach seems promising for achieving your desired functionality.

Answer 2

One potential solution is to utilize the DOMNodeInserted event along with the .on() method. Although it may not be widely supported and I personally haven't tested it, this approach seems promising for achieving your desired functionality.

Answer 3

Answer №2

I've never attempted this before, but you may want to give it a shot

$function() {
  $("#my-textfield").load(function() {
    $(this).focus();
  });
});

In order to ensure that it has been fully loaded.

Answer 4

I've never attempted this before, but you may want to give it a shot

$function() {
  $("#my-textfield").load(function() {
    $(this).focus();
  });
});

In order to ensure that it has been fully loaded.

Using Rails to render a partial through Ajax and then modifying that partial using JavaScript

Answer №1

Answer №2

Similar questions

Rotation of table columns slider

I'm encountering an issue with this error message: "Warning: Each item in a list must be assigned a unique 'key' prop."

Combining various array values into a single key in JSON格式

Having trouble retrieving data sent via ajax in PHP

Custom directives are unable to interact with inbuilt directives

Lodash Debounce failing to properly debounce

What is the process for uploading a file in binary format using the ng-file upload library in AngularJS?

How does React-router handle component reloading when there is a change in the state of the parent component

What is the most effective way to extract information from a .txt file and showcase a random line of it using HTML?

The value of a variable undergoes a transformation following its insertion into an

Incorrect pathing in express.js

What flaws are present in this authentication system?

React-xarrows is a stunning display of multiple arrows overlapping each other in a mesmerizing fashion

Uploading files using jQuery AJAX

Using the innerHTML property to place an Img tag within a div element

The Ajax sign up request for the Express route is failing with a POST error code 404 at http://localhost:300

The Parse-JS-SDK currently doesn't support using the objectId in the matchesKeyInQuery method

Retrieving the content of a dynamic template with Angular-UI-Router

What is the best way to eliminate an item from an array in JavaScript or AngularJS?

Upon completion of an Ajax call, ReactJS will execute a callback function