CODEWITHSUNDEEP
jqueryhtmlruby-on-railsinternet-explorerparameters
Trip
Trip

Reputation: 27114

IE7 and IE6 do not pass params in a form_tag in Rails

Strangest bug I've ever come across. Just kidding, but its definately at the top.

If I created a dynamic form like so..

= form_tag main_index_path, :method => :post do
  .payment
    = text_field_tag "payments[0][:date_paid]"
    = text_field_tag "payments[0][:amount_paid]"
    %br/
  = link_to 'Add Another Payment', '#', :class => "add_another"

  .actions
    %br/
    = submit_tag 'calculate'

And click on 'Add Another Payment'

A new .payment div will appear like so :

.payment
  = text_field_tag "payments[1][:date_paid]"
  = text_field_tag "payments[1][:amount_paid]"

Strange as it is only in IE6 and IE7, it will pass only the first and last Payments.

How/Why/What can I do to fix this?

For reference, here is the 'add_another' method :

$(".add_another").click(function(){
  if ($(".payment:last").find("input").val() != "") {
    var $newdiv = $(".payment:last").clone(true);
    $newdiv.find('input').each(function() {
        var $this = $(this);
        $this.attr('id', $this.attr('id').replace(/_(\d+)_/, function($0, $1) {
            return '_' + (+$1 + 1) + '_';
        }));
        $this.attr('name', $this.attr('name').replace(/\[(\d+)\]/, function($0, $1) {
            return '[' + (+$1 + 1) + ']';
        }));
        $this.val('');
    });
    $newdiv.find('textarea').each(function(){
      var $this = $(this);
      $this.attr('id', $this.attr('id').replace(/_(\d+)_/, function($0, $1) {
          return '_' + (+$1 + 1) + '_';
      }));
      $this.attr('name', $this.attr('name').replace(/\[(\d+)\]/, function($0, $1) {
          return '[' + (+$1 + 1) + ']';
      }));
      $this.css("color","#cccccc");
    });
    $newdiv.insertAfter('.payment:last').hide().slideDown();
  };
  return false;
});

Upvotes: 0

Views: 164

Answers (2)

Trip
Trip

Reputation: 27114

IE7 requires you to clone using OuterHTML

      var $this = $(this);
      if (!$.browser.msie || parseInt($.browser.version) > 7) {
        $this.attr('id', $this.attr('id').replace(/_(\d+)_/, function($0, $1) {
            return '_' + (+$1 + 1) + '_';
        }));
        $this.attr('name', $this.attr('name').replace(/\[(\d+)\]/, function($0, $1) {
            return '[' + (+$1 + 1) + ']';
        }));
      } else {
        foob_name = $this.attr('name').replace(/\[(\d+)\]/, function($0, $1) {
            return '[' + (+$1 + 1) + ']';
        });
        foob_id = $this.attr('id', $this.attr('id').replace(/_(\d+)_/, function($0, $1) {
            return '_' + (+$1 + 1) + '_';
        }));

        $this.attr("outerHTML", "<input type='test' name=" + foob_name + " id=" + foob_id + " />");

      };

Upvotes: 0

2potatocakes
2potatocakes

Reputation: 2260

It's weird that you're getting the first and last payments.. Tis a long shot, but being IE..

Is there any way you can check if your insertAfter is working correctly in that your CSS selector .selector:last is actually selecting the new last element in your group?

I haven't checked this but what happens if you replace: 

$newdiv.insertAfter('.payment:last').hide().slideDown();

with this:

$(".payment").last().after($newdiv).hide().slideDown();

Upvotes: 1

Related Questions