I should see: "Hello" after hitting submit, but I don't. Why?
http://jsfiddle.net/GbfLG/1/
<div data-role="page" id="create">
<script type="text/javascript">
alert("HERE");
$('#form').submit(function() {
$.post("/").success(function(resp) {
alert("RET");
$.mobile.changePage($("#final"));
});
return false;
});
</script>
<div data-role="content">
<form id="form">
<input type="submit" name="g" value="Submit" id="g"/>
</form>
</div>
</div>
<div data-role="page" id="final">
Hello
</div>
jQM has a different set of rules then the normal web page. You have used your java script in the wrong place. With jQM, if possible write all you js code in separate file/files.
This is a fix made to your jsFiddle code, it is working now, I have just put it in right context. Your js code was not changed a bit.
Example:
$('#create').live('pagebeforeshow',function(e,data){
$('#form').submit(function() {
$.post("/").success(function(resp) {
$.mobile.changePage($("#final"));
});
return false;
});
});
Your form is submiting - the return false; isn't working as it should.
Try..
$('#form').submit(function(e) {
e.preventDefault();
e.stopPropagation();
... stuff ...
});
Also in your fiddle you haven't defined $.changePage so it comes out as 'undefined'.
Related
In my jquery mobile ios phonegap application, i use iscroll. On using iscroll, text boxes behave weirdly (move up and down on entering each character).
I enabled iscroll in my app by,
Added following scripts:
<script src="js/iscroll.js"></script>
<script src="js/jquery.mobile.iscrollview.js"></script>
My page looks like,
<div data-role="page" id="index">
<div data-theme="a" data-role="header" data-position="fixed" data-id="footer" data-tap-toggle="false" data-transition="none">
</div>
<div data-role="content" data-iscroll>
// following text field works weirdly
<input id="txtComment" placeholder="COMMENTS" value="" type="text" data-theme="b"/>
</div>
<div data-role="navbar" data-position="fixed" data-theme="a" data-id="footer" data-tap-toggle="false" data-transition="none">
</div>
</div>
I tried adding the following code, but didn't work
var selectField = document.getElementById('txtComment');
selectField.addEventListener('touchstart', function(e) {
e.stopPropagation();
}, false);
How can i fix it?
Please help.
Use this function with iscroll you can type in form fields.....
<script type="text/javascript">
var myScroll;
function loaded() {
myScroll = new iScroll('wrapper', {
useTransform: false,
onBeforeScrollStart: function (e) {
var target = e.target;
while (target.nodeType != 1) target = target.parentNode;
if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA')
e.preventDefault();
}
});
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', loaded, false);
</script>
Try:
in the Android Manifest activity: android:windowSoftInputMode = "adjustNothing"
same problem raised for me.just refresh your scroll using
setTimeout(function ()
{
myScroll.refresh();
}, 1000);
by adding refresh at correct place you can overcome this problem.i have gone through many websites and tried a lot.its work me perfectly.
if it doesn't works then its Mobile version(android,ios) problem because scroll deosn't support.
hope it will helps u.
I write a link by jquery mobile like:
< a href="#detail" />
it work first time.
then I modify it use ko bind,like:
< a href="#detail" data-bind="click:newAdvice">
it can not chagePage, I do not know why?who can help me?
Try to set for link data-bind click:
<a data-bind="click: showHomepage" data-role="button">Homepage</a>
This is javascript:
self.showHomepage= function () {
$.mobile.changePage("#Homepage", {
transition: "slide"
});
return false;
};
and html for Homepage is:
<div data-role="page" id="Dashboard">
...
</div>
The page i use js to show and hide some elements.but there is problem when i use browser back.
<div data-role="page">
<div class="step1">
step1 content...
next
</div>
<div class="step2" style="display:none">
step2 content...
next
</div>
<div class="step3" style="display:none">
step3 content...
next
</div>
<script>
some script...
$('.nextBtn').click(function(){
ok = do something...
if(ok){
$('.step1').hide();
$('.step2').show();
}
});
$('.okBtn').click(function(){
ok = do something...
if(ok){
$('.step2').hide();
$('.step3').show();
}
});
</script>
</div>
but when i use browser back button.there a problem. I mean when 'step2' is showing,i click back button,i want to go 'step1' is show.
If you want .step1 to be visible when you load the page, here's the code.
$(document).on('pagebeforeshow', '[data-role="page"]', function () {
$('div.step1').show();
});
I suggest you to use https://github.com/browserstate/History.js
to manipulate the history of your browser
I have just encountered a strange problem when using jQuery Mobile.
I have a link inside a form element label - a checkbox label to be exact but the link does not work.
I have tried reading the docs but can't seem to find anything on it.
Here is my markup:
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<input type="checkbox" class="cbox" name="OptIn" id="OptIn"/>
<label for="OptIn">Receive E-mails From Us</label>
<input type="checkbox" value="1" class="cbox" name="tandc" id="tandc"/>
<label for="tandc">I agree to the <a href="/tandcs.html" target="_BLANK" >Terms & Conditions</a></label>
</fieldset>
</div>
When the link is clicked it just toggles the checkbox state.
UPDATE
Just realised I can open the link by right clicking but obviously on a mobile device that's not very useful....
this is the correct solution for mobile and non mobile browsers
$('.ui-checkbox a').bind("tap click", function( event, data ){
event.stopPropagation();
$.mobile.changePage($(this).attr('href'));
});
Had the same problem and solved it using:
$('.ui-btn-text a').click(function(event) {
var $this = $(this);
window.open($this.attr('href'), $this.attr('target'));
});
So if any link within a button-text is clicked it will be opened in a new window. If you want it in the same window just use $.mobile.changePage as Phil showed.
I tried the above mentioned solutions on jQuery Mobile 1.1.0 with jQuery 1.7.2 without success.
After a bit of tinkering and reading into the new jQuery event functions I came up with my own solution to make all anchors in labels clickable without loosing jQuery Mobile default behaviour on the rest of the label:
jQuery('label').each(function(){
var e = jQuery(this).data('events');
jQuery('.agree label').undelegate();
jQuery('.agree label *:not(a)').delegate(e);
});
use on() and off() instead
$('label').each(function(){
var e = $(this).data('events');
$('label').off();
$('label').not('a').on(e);
});
There a some improvements that can be made but here is a rough draft:
http://jsfiddle.net/KADqA/
JS
$('.ui-btn-text').click(function(event) {
var checked = $("#tandc[type='checkbox']").is(":checked");
var $this = $(this);
if($this.children('a').length) {
$.mobile.changePage('#tc', {
transition : 'pop',
role : 'dialog'
});
}
stateOfCheckbox(checked);
});
function stateOfCheckbox(checked) {
$('#home').live( 'pagebeforeshow',function(event){
$("#tandc[type='checkbox']").attr("checked",checked).checkboxradio("refresh");
});
}
HTML
<div data-role="page" id="home">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<input type="checkbox" class="cbox" name="OptIn" id="OptIn"/>
<label for="OptIn">Receive E-mails From Us</label>
<input type="checkbox" value="1" class="cbox" name="tandc" id="tandc"/>
<label for="tandc">I agree to the <a href="#tc" data-rel="dialog" >Terms & Conditions</a></label>
</fieldset>
</div>
</div>
<div data-role="page" id="tc">
<div data-role="header">
<h1>T and C</h1>
</div>
Read me
</div>
You could also just override the event:
$('.ui-checkbox a').click(function(e) {
e.stopPropagation();
})
On Android the solutions above did not work on Android.
It only works when using on pagecreate and without event delegation.
$(document).on('pagecreate', function(event, ui) {
$(".ui-checkbox a").on("click tap", function() {
$(':mobile-pagecontainer').pagecontainer('change', this.href);
return false;
});
} );
This is posible solution if you want to open the link in a popup.
$('.ui-checkbox a').bind('click tap', function (event) {
event.stopPropagation();
$($(this).attr('href')).popup('open');
});
Add Id or class into parent label have a tag
and using script of #alex dms
$('#field-contain label a').bind("tap click", function( event, data ){
event.stopPropagation();
$.mobile.changePage($(this).attr('href'));
});
Try it, work perfecly on my mobile and desktop
https://jsfiddle.net/vulieumang/p91zhmnp/
I have this atm:
<img src="/Content/Admin/Images/Icons/delete.gif" />
How can I modify this one so it also shows a confirm messagebox?
As it is now nothing happens when I click it, it doesnt post, what more is needed for it to work?
EDIT:
<form action="/Admin/Users" method="post">
<script type="text/javascript">
$(function() {
$('.delete').click(function() {
$.post(this.href, {}, function(data) {
});
return false;
});
});
</script>
And each link:
<a class="delete" href="/Admin/User/Delete/71"><img src="/Content/Admin/Images/Icons/delete.gif" /></a>
no luck, nothing happens "onclick", not even a javascript error
/M
Indeed more is needed. I would advice you to separate javascript from HTML:
<a id="delete" href="<%= Url.RouteUrl("UserDelete", new { userID = item.UserID }) %>">
<img src="/Content/Admin/Images/Icons/delete.gif" />
</a>
and then register a click handler to this anchor in javascript:
<script type="text/javascript">
$(function() {
$('#delete').click(function() {
$.post(this.href, {}, function(data) {
alert('user successfully deleted');
});
return false;
});
});
</script>
Are you sure nothing is happening? Just calling $.post(url) will request the page, but it ignores any result. You may want to review the docs for the $.post function to accomplish what you'd like to do?
You can add a confirm box like this:
onclick = "if (confirm('Are you sure?')) $.post(this.href); return false;"