Form Broken Using JQuery UI tabs in Chrome Only - javascript

I have looked into many similar problems and solutions but none that have fixed this problem. This form works in Firefox but not Chrome. I would like to understand what Firefox is doing that Chrome is not and fix this page so it works in all browsers.
The form seems to become unusable once it is placed inside JQuery UI tabs but only in Chrome.
<form method="post" action="/data-page/" id="enter_exercise" >
<div id="tabs_ajax">
<ul>
<li>General Info</li>
<li>Heart Rate</li>
<li>Exercise</li>
</ul>
<div id="tabs-1" style="padding:0;" >
Workout Title:<input type='text' name='title' value="" />
</div> <!-- END tab-1 -->
<div id="tabs-2" style="padding:0;" >
Average Heart Rate:<input type='text' name='avgHR' value="" />
</div> <!-- END tab-2 -->
<div id="tabs-3" style="padding:0;" >
Run Miles:<input type='text' name='miles' value="" />
</div> <!-- END tab-3 -->
</div>
</form>
The javascript (which is posted at the bottom of the page)
<script>
$j = jQuery.noConflict();
$j(document).ready(function(){
$j( "#tabs_ajax" ).tabs({
});
});
</script>
This page is for exercise input on a wordpress blog and is initiated as a fancybox popup. I use include("../../../wp-load.php"); to allow this popup to access the wordpress functions. I also use wp_enqueue_scripts("jquery"); and wp_enqueue_script('jquery-ui-tabs');
If I create a plain form on this popup, it works, but when I place the form within the <div id="tabs_ajax">content, it does not allow me to enter form data in Chrome. It works in Firefox but Chrome is unresponsive, including the submit button.

Related

Correct way to include popup input in main form in jquery mobile

When the JQM js (1.4.5) library has finished manipulating the DOM to include all its widgets, it moves popup divs to just before the page closing div. In my case, I have inputs in the popup that I want to be POSTed as part of the <form> by which they were contained in the source.
Here's an illustation of what I mean:
Source:
<div id="page1" data-role="main">
<form>
<input name="someinput">
<div id="mypopup"><input name="Oops"></div>
</form>
</div>
DOM post-processing:
<div id="page1" data-role="main">
<form>
<input name="someinput">
</form>
<div id="mypopup"><input name="Oops"></div>
</div>
What's the best practice way to get that input back into the form where it can be sent via POST?

How to handle jQuery error after form is submitted to itself

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();
});

Loading Placeholder tag in FORM when variables are set

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.

Update visual styling of dynamically added checkbox in jQuery Mobile

I'm currently adding a bunch of checkboxes dynamically during the "pageinit" event, which I am able to both add and check successfully. The checkboxes are added by appending instances of the following stub to a "ul"-component:
<li>
<div class = "new-student">
<img class="profile-img nav-ui-thumbnail ui-mini" src="../images/prof_img.gif">
<!-- Block A -->
<div id="grid" class="ui-grid-a ui-mini">
<div class="ui-block-a ui-mini">
<div class="ui-bar ui-bar-a ui-mini">
<h2 class="name-student">Name</h2>
<p class="attendingtime-student">00:00</p>
</div>
</div>
<!-- Block B -->
<div class="ui-block-b">
<div class="ui-bar ui-bar-a ui-mini">
<h2 class="pickuptype-student">null</h2>
<p class="pickuptime-student">00:00</p>
</div>
</div>
</div>
<form>
<!-- Attending -->
<fieldset class="fieldset ui-overlay-shadow" data-role="controlgroup" data-type="horizontal" class="localnav">
<input class="attendance0-student" name="checkbox-h-2a" id="checkbox-h-2a" type="checkbox">
<label for="checkbox-h-2a">1</label>
<input class="attendance1-student" name="checkbox-h-2b" id="checkbox-h-2b" type="checkbox">
<label for="checkbox-h-2b">2</label>
<input class="attendance2-student" name="checkbox-h-2c" id="checkbox-h-2c" type="checkbox">
<label for="checkbox-h-2c">3</label>
</fieldset>
</form>
</div>
However; I am unable to update the visual styling of the checkboxes, which result in all checked boxes looking like this:
I've tried calling ".checkboxradio.('refresh')" but it only results in an error (saying I can't call that method on a component that has yet to be initialized).
Please help!
Regarding this:
I've tried calling ".checkboxradio.('refresh')" but it only results in
an error (saying I can't call that method on a component that has yet
to be initialized).
Usually when this kind of error occurs you need to do this:
$('#someId').checkboxradio.().checkboxradio.('refresh');
First call will initialize checkboxradio widget and second one will enhance its markup.
But this is not case with checkbox widget, to enhance dynamically added checkbox you need to do this:
$('[type="checkbox"]').checkboxradio();
Without refresh parameter.
And here's a working example: http://jsfiddle.net/Gajotres/VAG6F/77/
There are of course other solutions, read this article if you are using older versions of jQuery Mobile up to 1.4 (mentioned functions are currently deprecated).
If you are using jQuery Mobile 1.4 and you are planing in using future versions then use this method:
$('.ui-content').enhanceWithin();
Read more about it here.
There's a third option, instead of pageinit use pagecreate event. Like pageinit it will trigger only once but unlike pageinit it triggers before jQuery Mobile enhances active page. So everything appended at this point will automatically become enhanced.

How to excute a javascript from within an accordion

I am trying to use jQuery accordion widget. I want to use a common javascript code inside all the accordion section. For e.g I am trying to make a tab view inside every accordion section. The tab view is handled through an external javascript file created by me. Also I am using images slideshow inside every section of the accordion.It works for the a single section only. Whenever i try to paste the same html code in the next section of the accordion , javascript does not execute. The accordion still works. Waiting for your suggestions.
This is the html code
<div id="contentList"><h3 class="accHead" onclick="initAll('FoodCheck')">Food Check</h3>
<div class="accContent">
<ul class="menuHoriz">
<li>What ? </li>
<li>How ? </li>
<li>Who ? </li>
<li>Screenshots </li>
</ul>
<div id="what" class="content">
<p>
Details about the projects<br /> What. description
</p>
</div>
<div id="how" class="content">
<p>
Details about the projects<br /> How description
</p>
</div>
<div id="who" class="content">
<p>
Details about the projects<br /> Who description
</p>
</div>
<div id="screenshots" class="content">
<p>
<h2>FoodCheck Snapshots</h2>
<img height="468" width="250" src="images/FoodCheck/Screen_1.png" alt="First screen" id="slideshow" />
<div id="imgText"> </div>
<br clear="all" />
<form action="#">
<input type="button" id="prevLink" value="« Previous" />
<input type ="button" id="startAgain" value="Start Again">
<input type="button" id="nextLink" value="Next »" />
</form>
</p>
</div>
</div>
This is one of the section of accordion.
There are 3 more such sections. Each section has a Tabs (with id What, who, how, screenshots) in it which are controlled by an external javascript
In
<script type="text/javascript">
$(function() {
//set up the news accordion on the lower page
$("#contentList").accordion({ header: "h3", collapsible: true});
});
</script>
You will have to subscribe to element events and not use some global javascript functionality. Every acordion view can have various controls but they would need to be distinguished by either class or id attributes to attach to their events.
Some code would help of course. Can you provide some? but only relevant parts so ot won't be overwhelming.

Categories