Merge remote-tracking branch 'remotes/masone/form_tests' into issue518

jquery.pjax.js

@@ -119,14 +119,15 @@ function handleSubmit(event, container, options) {
  options = optionsFor(container, options)
 
  var form = event.currentTarget
+ var $form = $(form)
 
  if (form.tagName.toUpperCase() !== 'FORM')
  throw "$.pjax.submit requires a form element"
 
  var defaults = {
- type: form.method.toUpperCase(),
- url: form.action,
- container: $(form).attr('data-pjax'),
+ type: ($form.attr('method') || 'GET').toUpperCase(),
+ url: $form.attr('action'),
+ container: $form.attr('data-pjax'),
  target: form
  }
 
@@ -292,10 +293,15 @@ function pjax(options) {
  window.history.replaceState(pjax.state, container.title, container.url)
  }
 
+ // Only blur the focus if the focused element is within the container.
+ var blurFocus = $.contains(options.container, document.activeElement)
+
  // Clear out any focused controls before inserting new page contents.
- try {
- document.activeElement.blur()
- } catch (e) { }
+ if (blurFocus) {
+ try {
+ document.activeElement.blur()
+ } catch (e) { }
+ }
 
  if (container.title) document.title = container.title
 

test/unit/pjax.js

@@ -1099,4 +1099,161 @@ if ($.support.pjax) {
  equal(frame.location.search, "")
  })
  })
+
+ asyncTest("preserves input value when going back and forth", 1, function() {
+ var count = 0
+ var frame = this.frame
+
+ frame.$.pjax({url: "form.html", container: "#main"})
+
+ frame.$("#main").on("pjax:end", function() {
+ count++
+ var field = frame.$("input[type=text]")
+
+ if (count == 1) {
+ // Form
+ field.val("changed")
+ frame.history.back()
+ } else if (count == 2) {
+ // Hello
+ frame.history.forward()
+ } else if (count == 3) {
+ // Form
+ equal(field.val(), "changed", "Field value is preserved")
+ start()
+ }
+ })
+ })
+
+ asyncTest("preserves textarea value when going back and forth", 1, function() {
+ var count = 0
+ var frame = this.frame
+
+ frame.$.pjax({url: "form.html", container: "#main"})
+
+ frame.$("#main").on("pjax:end", function() {
+ count++
+ var field = frame.$("textarea")
+
+ if (count == 1) {
+ // Form
+ field.val("changed")
+ frame.history.back()
+ } else if (count == 2) {
+ // Hello
+ frame.history.forward()
+ } else if (count == 3) {
+ // Form
+ equal(field.val(), "changed", "Field value is preserved")
+ start()
+ }
+ })
+ })
+
+ asyncTest("preserves checkbox value when going back and forth", 1, function() {
+ var count = 0
+ var frame = this.frame
+
+ frame.$.pjax({url: "form.html", container: "#main"})
+
+ frame.$("#main").on("pjax:end", function() {
+ count++
+ var field = frame.$("input[type=checkbox]")
+
+ if (count == 1) {
+ // Form
+ field.prop("checked", true)
+ frame.history.back()
+ } else if (count == 2) {
+ // Hello
+ frame.history.forward()
+ } else if (count == 3) {
+ // Form
+ ok(field.prop("checked"), "Field value is preserved")
+ start()
+ }
+ })
+ })
+
+ asyncTest("preserves checkbox value when going back and forth", 1, function() {
+ var count = 0
+ var frame = this.frame
+
+ frame.$.pjax({url: "form.html", container: "#main"})
+
+ frame.$("#main").on("pjax:end", function() {
+ count++
+ var field = frame.$("input[type=radio]")
+
+ if (count == 1) {
+ // Form
+ field.prop("checked", true)
+ frame.history.back()
+ } else if (count == 2) {
+ // Hello
+ frame.history.forward()
+ } else if (count == 3) {
+ // Form
+ ok(field.prop("checked"), "Field value is preserved")
+ start()
+ }
+ })
+ })
+
+ asyncTest("preserves select value when going back and forth", 1, function() {
+ var count = 0
+ var frame = this.frame
+
+ frame.$.pjax({url: "form.html", container: "#main"})
+
+ frame.$("#main").on("pjax:end", function() {
+ count++
+ var option = frame.$("select option:last")
+
+ if (count == 1) {
+ // Form
+ option.prop("selected", true)
+
+ frame.history.back()
+ } else if (count == 2) {
+ // Hello
+ frame.history.forward()
+ } else if (count == 3) {
+ // Form
+ //var option = frame.$("select option:last")
+ equal(option.prop("selected"), true, "Field value is preserved")
+ start()
+ }
+ })
+ })
+
+ asyncTest("preserves multiple select value when going back and forth", 3, function() {
+ var count = 0
+ var frame = this.frame
+
+ frame.$.pjax({url: "form.html", container: "#main"})
+
+ frame.$("#main").on("pjax:end", function() {
+ count++
+ var field = frame.$("select").prop("multiple", true)
+ var options = field.find("option")
+
+ if (count == 1) {
+ // Form
+ options.prop("selected", true)
+
+ frame.history.back()
+ } else if (count == 2) {
+ // Hello
+ frame.history.forward()
+ } else if (count == 3) {
+ // Form
+ options.each(function(){
+ equal($(this).prop("selected"), true, "Field value is preserved")
+ })
+ start()
+ }
+ })
+ })
+
 }

test/views/form.erb

@@ -0,0 +1,18 @@
+<%= title 'Form' %>
+
+<form action="env.html" method="GET">
+ <input type="text" value="foo">
+ <textarea>foo</textarea>
+
+ <input type="checkbox" value="foo">
+ <input type="radio" value="foo">
+
+ <select>
+ <option value="foo">foo</option>
+ <option value="bar">bar</option>
+ <option value="baz">baz</option>
+ </select>
+
+</form>
+
+<script type="text/javascript">window.parent.iframeLoad(window)</script>