Rails: Rendering a partial doesn't render the javascript code within it

Question

In my Rails 5 code, I have a partial that loads on a successful return of an ajax call. This partial has a div id which is for a grid that is loaded by ExtJS code in assets file. The first time the page loads, all the UI is rendered fine including the ExtJS grid. But any time after that, when the ajax call executes, though the partial loads, the grid doesn't load. The code inside Ext.onReady(function() doesn't execute unless the entire page is reloaded. How can I change this?

myapp/app/view/index.html.erb

<div id="test">                   
  <%= render partial: 'my_partial' %>
 </div> 

<script type="text/javascript">
  function someAjax(){
    $.ajax({
       url: '/mycontroller/my_data',                     
       success: function(result) {
          $('#test').html(result);          
        }                       
    }); 

  }  
</script>

myapp/app/view/_my_partial.html.erb

<li>                     
    <span>Some data </span><span><%= @value1 %></span> 
  </li>
<br>
<div>
  <div id="my-js-code"></div>
</div>

myapp/app/assets/javascript/my_grid_code.js.erb

Ext.Loader.setConfig({
    enabled: true,
    paths: {
        'Ext.ux': '/ext/ux'
    }
});

Ext.onReady(function(){
if(Ext.get('my-js-code')){
//code that creates a grid



Ext.define('mymodel', {
        extend: 'Ext.data.Model',
        fields: ['mycol1','mycol2']
    });
var store = Ext.create('Ext.data.Store', {
        autoLoad: true,
        model: 'mymodel',
        pageSize: 10,
        proxy: {
            type: 'rest',
            format: 'json',
            url: '/mycontroller/list',                
           reader: {
                type: 'json',
                root: ‘result’,
                totalProperty: 'totalCount'
        }
    }
});
    gridColumns = [{
            header: ‘My Col1’,            
            dataIndex: 'my_col1’        
    },{
            header: ‘My Col2’,
            dataIndex: 'my_col2’        
    }];

var grid = Ext.create('Ext.grid.Panel', {
            renderTo: 'my-js-code',
            store: store,                        
            columns: gridColumns
        });
});

myapp/app/controllers/my_controller.rb

def my_data
  respond_to do |format|
      format.html { render :partial => "my_partial" }  
  end 
end

Answer 1

If think this is caused by Ext.onReady method which might only fire once.

The second time, extJS framework is already loaded and therefore the callback wont get invoked.

One simple fix could be to check it via Ext.isReady property (bool).

docs:

https://docs.sencha.com/extjs/6.2.0/classic/Ext.html#property-isReady https://docs.sencha.com/extjs/6.2.0/classic/Ext.html#method-onReady

---

Ext.Loader.setConfig({
  enabled: true,
  paths: {
    'Ext.ux': '/ext/ux'
  }
})

var renderGrid = function (target) {
  if (Ext.get(target)) {
    var grid = Ext.create('Ext.grid.Panel', {
      renderTo: target,
      store: Ext.create('Ext.data.Store', {
        autoLoad: true,
        pageSize: 10,
        proxy: {
          type: 'rest',
          format: 'json',
          url: '/mycontroller/list',
          reader: {
            type: 'json',
            root: 'result',
            totalProperty: 'totalCount'
          }
        }
      }),
      columns: [
        {
          header: 'My Col1',
          dataIndex: 'my_col1'
        }, {
          header: 'My Col2',
          dataIndex: 'my_col2'
        }]
    })
  }
}

Ext.isReady ? renderGrid('my-js-code') : Ext.onReady(renderGrid('my-js-code'))