Skip to content

Commit 96d941e

Browse files
johnbenderjohnbender
committed
added the ability to disable ajax forms with data-ajax=false, attribute up for debate, Fixes jquery-archive#519 
1 parent cc39cbc commit 96d941e

File tree

5 files changed

+159
-106
lines changed

5 files changed

+159
-106
lines changed

‎js/jquery.mobile.navigation.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -380,7 +380,7 @@
380380
/* Event Bindings - hashchange, submit, and click */
381381

382382
//bind to form submit events, handle with Ajax
383-
$('form').live('submit', function(event){
383+
$("form[data-ajax!='false']").live('submit', function(event){
384384
if( !$.mobile.ajaxFormsEnabled ){ return; }
385385

386386
var type = $(this).attr("method"),

‎tests/unit/listview/listview_core.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55

66
// TODO splite out into seperate test files
7-
(function(){
7+
(function($){
88
module('Basic Linked list');
99

1010
asyncTest( "The page should enhanced correctly", function(){
@@ -200,4 +200,4 @@
200200
start();
201201
}, 1000);
202202
});
203-
})();
203+
})(jQuery);

‎tests/unit/navigation/index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@
3737
<link rel="stylesheet" href="../../../external/qunit.css" type="text/css"/>
3838
<script type="text/javascript" src="../../../external/qunit.js"></script>
3939

40+
<script type="text/javascript" src="navigation_transitions.js"></script>
4041
<script type="text/javascript" src="navigation_core.js"></script>
4142
</head>
4243
<body>
@@ -93,5 +94,16 @@ <h2 id="qunit-userAgent"></h2>
9394
<div id="default-trans" data-role="page">
9495
<a href="#no-trans"></a>
9596
</div>
97+
98+
<div id="ajax-diabled-form" data-role="page">
99+
<form method="POST" id="non-ajax-form" action="/ajax-disabled-form" data-ajax="false">
100+
</form>
101+
102+
<form method="POST" id="ajax-form" action="/ajax-diabled-form">
103+
</form>
104+
105+
<form method="POST" id="rand-ajax-form" action="/ajax-disabled-form" data-ajax="foo">
106+
</form>
107+
</div>
96108
</body>
97109
</html>

‎tests/unit/navigation/navigation_core.js‎

Lines changed: 33 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -1,110 +1,40 @@
11
/*
22
* mobile navigation unit tests
33
*/
4-
// TODO move tests to navigation_transitions.js
5-
var perspective = "ui-mobile-viewport-perspective",
6-
transitioning = "ui-mobile-viewport-transitioning",
7-
animationCompleteFn = $.fn.animationComplete,
8-
9-
removeBodyClasses = function(){
10-
$("body").removeClass([perspective, transitioning].join(" "));
11-
},
12-
13-
removePageTransClasses = function(){
14-
$("[data-role='page']").removeClass("in out fade slide flip reverse pop");
4+
(function($){
5+
var changePageFn = $.mobile.changePage;
6+
module('jquery.mobile.navigation.js', {
7+
teardown: function(){
8+
$.mobile.changePage = changePageFn;
9+
}
10+
});
11+
12+
test( "forms with data attribute ajax set to false will not call changePage", function(){
13+
var called = false;
14+
$.mobile.changePage = function(){
15+
called = true;
1516
};
1617

17-
module('jquery.mobile.navigation.js', {
18-
setup: function(){
19-
//stub to prevent class removal
20-
$.fn.animationComplete = function(){};
21-
},
22-
23-
teardown: function(){
24-
// unmock animation complete
25-
$.fn.animationComplete = animationCompleteFn;
26-
27-
// required cleanup from animation complete mocking
28-
removeBodyClasses();
29-
}
30-
});
31-
32-
test( "changePage applys perspective class to mobile viewport for flip", function(){
33-
$("#foo > a").click();
34-
35-
ok($("body").hasClass(perspective), "has perspective class");
36-
});
37-
38-
test( "changePage does not apply perspective class to mobile viewport for transitions other than flip", function(){
39-
$("#bar > a").click();
40-
41-
ok(!$("body").hasClass(perspective), "doesn't have perspective class");
42-
});
43-
44-
test( "changePage applys transition class to mobile viewport for default transition", function(){
45-
$("#baz > a").click();
46-
47-
ok($("body").hasClass(transitioning), "has transitioning class");
48-
});
49-
50-
test( "explicit transition preferred for page navigation reversal (ie back)", function(){
51-
$.fn.animationComplete = function(){};
52-
53-
stop();
54-
setTimeout(function(){
55-
$("#fade-trans > a").click();
56-
}, 300);
57-
58-
setTimeout(function(){
59-
$("#flip-trans > a").click();
60-
}, 600);
61-
62-
setTimeout(function(){
63-
//guarantee that we check only the newest changes
64-
removePageTransClasses();
65-
66-
$("#fade-trans > a").click();
67-
68-
ok($("#flip-trans").hasClass("fade"), "has fade class");
69-
70-
start();
71-
}, 900);
72-
});
73-
74-
test( "previous transition used when not set and going back through url stack", function(){
75-
76-
stop();
77-
setTimeout(function(){
78-
$("#no-trans > a").click();
79-
}, 300);
80-
81-
setTimeout(function(){
82-
$("#pop-trans > a").click();
83-
}, 600);
84-
85-
86-
setTimeout(function(){
87-
//guarantee that we check only the newest changes
88-
removePageTransClasses();
89-
90-
$("#no-trans > a").click();
91-
92-
ok($("#pop-trans").hasClass("pop"), "has pop class");
93-
94-
start();
95-
}, 900);
96-
});
97-
98-
test( "default transition is slide", function(){
99-
stop();
100-
setTimeout(function(){
101-
//guarantee that we check only the newest changes
102-
removePageTransClasses();
103-
104-
$("#default-trans > a").click();
18+
stop();
19+
$('#non-ajax-form').live('submit', function(event){
20+
ok(true, 'submit callbacks are fired');
21+
start();
22+
event.preventDefault();
23+
}).submit();
24+
25+
ok(!called, "change page should not be called");
26+
});
27+
28+
test( "forms with data attribute ajax not set or set to anything but false will call changepage", function(){
29+
var called = 0;
30+
$.mobile.changePage = function(){
31+
called += 1;
32+
if(called > 1){ start(); }
33+
};
10534

106-
ok($("#no-trans").hasClass("slide"), "has slide class");
35+
stop();
36+
$('#ajax-form, #rand-ajax-form').submit();
10737

108-
start();
109-
}, 900);
110-
});
38+
same(called, 2, "change page should be called twice");
39+
});
40+
})(jQuery);

‎tests/unit/navigation/navigation_transitions.js‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
/*
2+
* mobile navigation unit tests
3+
*/
4+
(function($){
5+
var perspective = "ui-mobile-viewport-perspective",
6+
transitioning = "ui-mobile-viewport-transitioning",
7+
animationCompleteFn = $.fn.animationComplete,
8+
9+
removeBodyClasses = function(){
10+
$("body").removeClass([perspective, transitioning].join(" "));
11+
},
12+
13+
removePageTransClasses = function(){
14+
$("[data-role='page']").removeClass("in out fade slide flip reverse pop");
15+
};
16+
17+
module('jquery.mobile.navigation.js', {
18+
setup: function(){
19+
//stub to prevent class removal
20+
$.fn.animationComplete = function(){};
21+
},
22+
23+
teardown: function(){
24+
// unmock animation complete
25+
$.fn.animationComplete = animationCompleteFn;
26+
27+
// required cleanup from animation complete mocking
28+
removeBodyClasses();
29+
}
30+
});
31+
32+
test( "changePage applys perspective class to mobile viewport for flip", function(){
33+
$("#foo > a").click();
34+
35+
ok($("body").hasClass(perspective), "has perspective class");
36+
});
37+
38+
test( "changePage does not apply perspective class to mobile viewport for transitions other than flip", function(){
39+
$("#bar > a").click();
40+
41+
ok(!$("body").hasClass(perspective), "doesn't have perspective class");
42+
});
43+
44+
test( "changePage applys transition class to mobile viewport for default transition", function(){
45+
$("#baz > a").click();
46+
47+
ok($("body").hasClass(transitioning), "has transitioning class");
48+
});
49+
50+
test( "explicit transition preferred for page navigation reversal (ie back)", function(){
51+
$.fn.animationComplete = function(){};
52+
53+
stop();
54+
setTimeout(function(){
55+
$("#fade-trans > a").click();
56+
}, 300);
57+
58+
setTimeout(function(){
59+
$("#flip-trans > a").click();
60+
}, 600);
61+
62+
setTimeout(function(){
63+
//guarantee that we check only the newest changes
64+
removePageTransClasses();
65+
66+
$("#fade-trans > a").click();
67+
68+
ok($("#flip-trans").hasClass("fade"), "has fade class");
69+
70+
start();
71+
}, 900);
72+
});
73+
74+
test( "previous transition used when not set and going back through url stack", function(){
75+
76+
stop();
77+
setTimeout(function(){
78+
$("#no-trans > a").click();
79+
}, 300);
80+
81+
setTimeout(function(){
82+
$("#pop-trans > a").click();
83+
}, 600);
84+
85+
86+
setTimeout(function(){
87+
//guarantee that we check only the newest changes
88+
removePageTransClasses();
89+
90+
$("#no-trans > a").click();
91+
92+
ok($("#pop-trans").hasClass("pop"), "has pop class");
93+
94+
start();
95+
}, 900);
96+
});
97+
98+
test( "default transition is slide", function(){
99+
stop();
100+
setTimeout(function(){
101+
//guarantee that we check only the newest changes
102+
removePageTransClasses();
103+
104+
$("#default-trans > a").click();
105+
106+
ok($("#no-trans").hasClass("slide"), "has slide class");
107+
108+
start();
109+
}, 900);
110+
});
111+
})(jQuery);

0 commit comments

Comments
 (0)