I have a form in which on clicking submit button the form data is sent through ajax and the related message may it be error or confirmation details from the server script which has been written in php is displayed . For now every thing is working fine . But what I want to know is that the message whcih is being displayed with help of JS can I change it into JQM popup as I am using JQM 1.4.2 for my design .
Popup
<div data-role="popup" id="mDialog" data-overlay-theme="a" data-theme="c" style="max-width:400px;" class="ui-corner-all">
<div data-role="header" data-theme="a" class="ui-corner-top">
<h1>Attention!!</h1>
</div>
<div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
<h3 class="ui-title">{Are you sure you want to delete this page?</h3>
<p>This action cannot be undone.} <?php if($this->error->description!='')echo trim($this->error->description)?> </p>
Cancel
Delete
</div>
</div>
Thanks in advance
Try this;
Put this in your HTML, above your <form>
<div id="formNotice"><img src="loading.gif" alt="Loading" /></div>
Now put this where you handle the AJAX response
$("#formNotice").html(AJAXResponse);
$("#formNotice").popup("open");
Here's the docs
Jsfiddle (Without JQM - but you get the idea)
Related
I have a page that is using jQuery 1.11.1, the jQuery Validation plugin 1.12.1, jQuery Mobile 1.4.2, and ColdFusion 9.0.1. (I think the ColdFusion part is irrelevant to my issue though.) On this page I have a form that submits to itself for server-side validation. Initially, on the first load of the page, the form and validation all work as I expect. If the form is submitted with valid input it also works as I expect. If, however, the form is submitted with invalid input then I attempt to expand the collapsed collapsible in order to show the validation error message. This part does not work - the collapsible is not expanded and the following JavaScript error is thrown:
cannot call methods on collapsible prior to initialization; attempted to call method 'expand'
Once I receive this error then other features stop working as well. For example, the Cancel button can no longer collapse the collapsible. The validation messages no longer have my custom UI and fall-back to defaults, etc. I'm assuming the I need to somehow bind/delay my attempt to expand the collapsible to something when the page reloads but what?
Below is a self-contained example of my issue (written in CFML). Notice on the first load that you can expand the collapsible and collapse the collapsible using the Cancel button. Also notice the UI if you attempt to submit the form without entering any text. Then enter some text and submit the form. Upon reload you will see that the collapsible is not expanded initially. You will also see that the Cancel button no longer collapses the collapsible and that the UI of the validation messages has fallen back to defaults.
<cftry>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/jquery.validate.min.js"></script>
</head>
<body>
<div id="example" data-role="page" data-theme="b">
<div id="head" data-role="header" data-position="fixed">
<h1 align="center">Example Header</h1>
</div>
<div role="main" class="ui-content">
<div data-role="collapsible" data-content-theme="c" data-collapsed="false" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d">
<h3>Show Info Here</h3>
<p>Some additional information here...</p>
<cfif IsDefined("form.subcc")>
<p>CC form submitted. Form text = [<cfoutput>#form.ccname#</cfoutput>]</p>
</cfif>
<cfif IsDefined("form.subeft")>
<p>EFT form submitted. Form text = [<cfoutput>#form.eftname#</cfoutput>]</p>
</cfif>
<p>Choose one of the payment methods below.</p>
</div>
<div data-role="collapsible-set" data-content-theme="c" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d">
<div id="cc-payment" data-role="collapsible">
<h3>Credit Card Payment</h3>
<p>cc info here</p>
<div class="payment-form">
<form data-ajax="false" id="frmpaycc" method="post" action="">
<div class="ui-field-contain"><label for="ccname" class="ui-hidden-accessible">Text: </label> <input class="txtdata" type="text" id="ccname" name="ccname" size="20" maxlength="60" alphanumericwithbasicpunc="true" required="required" placeholder="Enter Text for CC" /></div>
<p align="center">
<input type="submit" id="subcc" name="subcc" value="Make Payment" data-inline="true" data-mini="true" data-theme="b" />
<a id="cancc" href="#" data-role="button" data-inline="true" data-mini="true">Cancel</a>
</p>
</form>
</div>
</div>
<div id="eft-payment" data-role="collapsible">
<h3>EFT Payment</h3>
<p>eft info here</p>
<div class="payment-form">
<form data-ajax="false" id="frmpayeft" method="post" action="">
<div class="ui-field-contain"><label for="eftname" class="ui-hidden-accessible">Text: </label> <input class="txtdata" type="text" id="eftname" name="eftname" size="20" maxlength="60" alphanumericwithbasicpunc="true" required="required" placeholder="Enter Text for EFT" /></div>
<p align="center">
<input type="submit" id="subeft" name="subeft" value="Make Payment" data-inline="true" data-mini="true" data-theme="b" />
<a id="caneft" href="#" data-role="button" data-inline="true" data-mini="true">Cancel</a>
</p>
</form>
</div>
</div>
</div>
<script type="text/javascript">
<cfif IsDefined("form.subcc")>
$("#cc-payment").collapsible("expand");
</cfif>
$("#cancc").click(function(){
$("#cc-payment").collapsible("collapse");
});
$("#frmpaycc").validate({
errorElement: "div",
submitHandler: function(form) {
$('#subcc').attr('disabled', 'disabled');
$('#frmpaycc,#frmpayeft').hide();
$("#msg-pay-proc").popup("open");
form.submit();
}
});
<cfif IsDefined("form.subeft")>
$("#eft-payment").collapsible("expand");
</cfif>
$("#caneft").click(function(){
$("#eft-payment").collapsible("collapse");
});
$("#frmpayeft").validate({
errorElement: "div",
submitHandler: function(form) {
$('#subeft').attr('disabled', 'disabled');
$('#frmpaycc,#frmpayeft').hide();
$("#msg-pay-proc").popup("open");
form.submit();
}
});
</script>
<div id="msg-pay-proc" class="ui-content" data-role="popup" data-theme="e">
Close
<p>Processing your payment. Please be patient and do not navigate away from this page until a message is returned.</p>
</div>
</div>
<div id="foot" data-role="footer" data-position="fixed" data-mini="true">
<h1 align="center">Example Footer</h1>
</div>
</div>
</body>
</html>
<cfcatch type="any">
<cfdump var="#cfcatch#" />
</cfcatch>
</cftry>
I believe the issue is that the page is reloading itself via jQuery Mobile and perhaps the existing ID's are conflicting with each other in the DOM. The error message is explicit but I'm not sure how to delay or bind my attempt to expand the collapsible to get passed it.
Any JS/jQuery code should be wrapped in pagecreate event. It is equivalent to .ready(), however, it is emitted on page fragments upon creating them and only once per page.
Moreover, this event can be delegated to be bound to specific pages based on their id or any other selector.
$(document).on("pagecreate", ".selector", function () {
/* code */
});
I do not know coldfusion, but if a JQM page is "reloaded", even partially I believe (which it sounds like it is as you are not using JQ client side validation and there is a form POST with data-ajax="false", I could be wrong like I said I do not know CF), then you just have to manually initialize the widgets on pageinit or the appropriate event (add a ID or class to allow for JQ selection of the element) before you can call their respective methods.
So add in a script tag on the page:
$( document ).on( "pageinit", "#example", function( event ) {
$("#yourCollapsibleElemnt").collapsible();
});
I have a simple user settings form written in HTML5 which commits user defined settings to local storage.
I want it so that if someone access the settings page again, and the user settings are defined the placeholders and/or values prefill the form with those settings.
I have tried using window.load, document.ready at the end and the beginning, but I can only get the form to load thre values if I click reload. I need these value to prefil if the page is visited.
Here is my version of the form which loads the values if you RELOAD the page
Script first
function loadUserSettings() {
$("#full_name").attr("placeholder", db_user.full_name);
$("#mobile_number").attr("placeholder", db_user.mobile_number);
$("#email_address").attr("placeholder", db_user.email_address);
$("#full_name").attr("value", db_user.full_name);
$("#mobile_number").attr("value", db_user.mobile_number);
$("#email_address").attr("value", db_user.email_address);
}
and now the form
<body>
<div data-role="page" data-control-title="Settings" data-theme="b" id="settings" class="global_page">
<div data-theme="b" data-role="header" data-position="fixed" class="global_topbar">
<a data-role="button" data-transition="flip" href="index.html" data-icon="back" data-iconpos="left" class="ui-btn-left global_button">
Back
</a>
<a data-role="button" data-transition="flip" href="help_settings.html" data-icon="info" data-iconpos="left" class="ui-btn-right global_button">
Help
</a>
<h3 class="global_header">
Settings
</h3>
</div>
<div data-role="content" style="padding: 1%">
<form id="postSettings" action="" class="global_form">
<div data-role="fieldcontain" data-controltype="textinput" class="full_name">
<label for="full_name">
Name
</label>
<input name="full_name" id="full_name" type="text" data-mini="true"/>
</div>
<div data-role="fieldcontain" data-controltype="textinput" class="email_address">
<label for="email_address">
Email Address
</label>
<input name="email_address" id="email_address" type="email" data-mini="true"/>
</div>
<div data-role="fieldcontain" data-controltype="textinput" class="global_text_input">
<label for="mobile_number">
Mobile Number
</label>
<input name="mobile_number" id="mobile_number" type="tel" data-mini="true"/>
</div>
<input id="store_posting" type="submit" data-icon="plus" data-iconpos="left" value="Store Information" class="global_button" onclick="dbGoUser()"/>
</form>
</div>
</div>
</body>
<script language="JavaScript">
document.ready = loadUserSettings();
</script>
I have managed a workaround using a function that I attach to my settings buttons which basically
function loadSettingsPage() {
window.location.href = "settings.html";
}
and this works everytime prefilling the placeholders / values no problem, however I am using a datatransition link of 'FLIP' which is lost using the above function.
SO ideally I want to either fix injection of the placeholders when I click a normal link (which I suspect is just a page refresh type option that does not loop) or make my loadSettingsPage use the JQuery flip transition.
Thanks in advance for any assistance.
OK, I was able to get around the issue with some custom functions. I had to lose the flip effect, and move to a simple fade but I ended up using
function fadeIn() {
$("body").hide();
$("body").fadeIn(500);
}
function loadPageSettings(urlvar) {
$("body").fadeOut(500, function(){ window.location.href = urlvar; });
}
for the custom functions
All hyperlinks used something like this
<a id="home_new_journey" data-role="button" onclick="loadPageSettings('journey_info.html')" data-icon="plus" data-iconpos="left" class="global_button">New Journey</a>
and at the footer of every page I just had
<script language="javascript">
window.onload = fadeIn();
</script>
So now I have pages loading properly with all dynamic content an a consistent fading effect.
I'm developing a web app using jQuery Mobile.
I have a single html file that contains more jQM pages.
These jQM pages have fixed headers and content loaded dynamically via jQuery (in this case I'm using a Listview with filtering option).
This is the HTML structure of all jQM pages:
<div data-role="page" data-theme="a" id="pageTemplateList">
<div class="ui-header ui-bar-a" role="banner" data-role="header" data-theme="a" data-position="fixed" data-tap-toggle="false">
<a role="button" data-role="button" href="#" class="ui-btn-left ui-alt-icon ui-nodisc-icon ui-btn ui-icon-action ui-btn-icon-notext" data-theme="a">Pubblica</a>
<h1 aria-level="1" role="heading" class="ui-title">Videothron</h1>
<a role="button" data-role="button" href="#panelMenu" class="ui-btn-right ui-alt-icon ui-nodisc-icon ui-btn ui-icon-bars ui-btn-icon-notext" data-theme="a">Menù</a>
</div>
<div data-role="content" id="templateListViewContainer">
<ul id="templateListView" data-role="listview" data-inset="true" data-hide-dividers="false" data-filter="true" data-filter-placeholder="Cerca template...">
</ul>
</div>
</div>
The jQuery code that I call for moving between jQM pages is the following:
location.href = "#pageTemplateList";
When I move from the "first" page (in the image below is "BEFORE") to a "second" page and then come back to the "first" page (in the image below is "AFTER") the Listview content is positioned under the fixed toolbar and the filter input field is partially hidden.
What do you suggest to solve this issue? Do you need further information?
Thanks,
Alex.
I executed each single line of JS code until I found that this issue was caused calling this:
$('div[data-role="page"]').trigger("create");
Removing this line of code (that I was calling after adding input text fields via jQuery) solved the issue.
Instead of calling .trigger("create") on the page div, create a div inside of the page div (eg. <div id="insideThePageDiv">) and call .trigger("create") for the inside div (eg. $("#insideThePageDiv").trigger("create");).
My jQuery mobile popup header doesn't have the same size as the content.
jQuery 1.8.3 and jQuery mobile 1.2.0.
<div data-role="popup" id="commentPopup" style="width: 800px;" class="ui-corner-all">
<div data-role="header" data-theme="b" class="ui-corner-top">
<h1>Please enter your comment</h1>
</div>
<div data-role="content" data-theme="b" class="ui-corner-bottom ui-content">
<textarea></textarea>
OK
CANCEL
</div>
</div>
For info, I open it with $('#commentPopup').popup("open");.
Is it possible to disable the scroll while the popup is opened?
Is it possible to prevent the user from closing the popup when clicking in another place of the page?
Thanks
I was overriding a CSS .ui-content class as #Omar found it.
The problem is solved.
Concerning the dismissible, this is not possible with jQM version < 1.3.0.
I am trying to append buttons to a header if a case is true, but it ends up looking like this:
The edit and new event buttons are supposed to be a control group...
HTML
<div data-role="header">
<h1 class="ui-title" role="heading" id="hdr"></h1>
<div class="ui-btn-right" id ="addbuttons" data-role="controlgroup" data-type="horizontal">
</div>
</div>
JAVASCRIPT
$('#addbuttons').append('<div data-role="button" data-icon="gears" data-theme="b">Edit</div>');
$('#addbuttons').append('<div data-role="button" data-icon="plus" data-theme="b">New Event</div>');
Whenever you do any changes to header or footer, you need to re-enhance the markup this way.
$('[data-role=page]').trigger('pagecreate');
You also can use this,
$('[data-role=header]').trigger('create');