0

The problem I'm running into deals with rendering a partial. I basically have a link which should get updated after the user puts some text in a text field. The first time it works fine. The user types in the text, the link gets updated and then when the link is clicked the partial is rendered with the correct information. However when the text is changed the link also gets update with the new parameters to pass to the action but when the link is clicked it still renders the old partial and no call to the corresponding action is made. Here is my view code:

label.control-label for="color_servers" Colors
        .controls
          input.input-xxlarge type="text" name="colors" id="project_colors" placeholder="comma separated colors" onblur="getColors(this)"
          a data-toggle="modal" id="color_target" href="#" data-target="#color_modal" (Show colors)

.modal.hide#color_modal
  .modal-header
    button.close type="button" data-dismiss="modal" aria-hidden="true" ×
    h3 Color list
  .modal-body
  .modal-footer
    a.btn href="#" data-dismiss="modal" aria-hidden="true" Close

And this is my partial which I am rendering:

ul
    - for color in @colors
        li #{color}

I'm displaying the partial with the information in a lightbox type display. Here is my javascript code for the onBlur event of the text field:

function getColors(elem){
      if(elem.value.trim()){
        $.ajax({
          url: "/project/check_colors",
          type: "GET",
          dataType: "json",
          data:{
            colors: elem.value
          },
          success: function(data){
            $('#color_target').attr('href','/project/show_colors?colors=' + data.color_list)
            console.log(document.getElementById("color_target").href)
            console.log(data.input)
            console.log(data.color_list)
          }
        });
      }
    }

So in the javascript code when I look at the output of the href attribute in the console, it shows the correct link. And finally here is my controller code:

def check_colors
    colors = params[:colors].gsub(/\s+/, "").gsub(/,+/,",")
    colors = colors.chomp(",")
    color_list = Color.expand_colorset(colors).map(&:fullname)
    render 'index', :json => { 
                                :servers => color_list,
                                :input => colors    
                             }
  end

  def show_colors
    colors_string = params[:colors]
    @colors = colors_string.split(",")
    puts @colors
    render partial: 'color_list'
  end

The color_list variable is an array of colors which I send back in order to update the link with. I know that the show_colors action gets called called the first time because the @colors variable's value is printed in my terminal however when I update the text in the textfield and I click on the link again the action is not being called even though the link gets updated because nothing is printed in the terminal. It seems as if the partial is being cached, if that is the problem how can I prevent that. Also when I try to render my partial as a full fledged view rather than a partial, the action is called correctly every time and it renders the correct information even after changing the text field contents, but when I do that then my lightbox functionality does not work correctly. Any help will be appreciated, thank you.

Ameya Savale
  • 431
  • 1
  • 8
  • 21

1 Answers1

0

hi guys for anyone who is interested I figured it out. It is kind of hacky but it works for me. I added this piece of code in my javascript outside of all functions, and it cleared the cached ajax.

$('body').on('hidden', '.modal', function(){$(this).removeData('modal');});

Hopefully it will save someone time in the future.

Ameya Savale
  • 431
  • 1
  • 8
  • 21