Disable jQuery Button with AngularJS and Form Validation - jquery-ui

I would like to disable my jQuery button based on form validation. According to the docs this is fairly easy with regular buttons using syntax such as:
<button ng-click="save(user)" ng-disabled="form.$invalid">Save</button>
However, when changing to a jQuery UI button this no longer works. I assume that Angular has no real binding between jQuery UI and AngularJS and thus would require a directive to do the following:
$("button" ).button( "option", "disabled" );
Is that the case or are there other alternatives? A jsFiddle of what I'm trying to do is here: http://jsfiddle.net/blakewell/vbMnN/.
My code looks like this:
View
<div ng-app ng-controller="MyCtrl">
<form name="form" novalidate class="my-form">
Name: <input type="text" ng-model="user.name" required /><br/>
Email: <input type="text" ng-model="user.email" required/><br/>
<button ng-click="save(user)" ng-disabled="form.$invalid">Save</button>
</form>
</div>
Controller
function MyCtrl($scope) {
$scope.save = function (user) {
console.log(user.name);
};
$scope.user = {};
};
$(function () {
$("button").button();
});

Well the thing is with angular, you're supposed to be making directives to apply your JQuery plugins.
So here you could to this:
//NOTE: directives default to be attribute based.
app.directive('jqButton', {
link: function(scope, elem, attr) {
//set up your button.
elem.button();
//watch whatever is passed into the jq-button-disabled attribute
// and use that value to toggle the disabled status.
scope.$watch(attr.jqButtonDisabled, function(value) {
$("button" ).button( "option", "disabled", value );
});
}
});
and then in markup
<button jq-button jq-button-disabled="myForm.$invalid" ng-click="doWhatever()">My Button</button>

This worked for me:
app.directive('jqButton', function() {
return function(scope, element, attrs) {
element.button();
scope.$watch(attrs.jqButtonDisabled, function(value) {
element.button("option", "disabled", value);
});
};
});
With this markup:
<input type="button" value="Button" jq-button jq-button-disabled="myForm.$invalid" />

Related

DirtyForms does not work properly with $.blockUI

I'm using DirtyForms and $.blockUI plugin, the latter to change pages when clicking on links (in my app, some pages take a couple of seconds more to load and a visual feedback is fine).
When I change field content and then click any link, DirtyForms is triggered: but when I cancel the process to stay on the page, $.blockUI starts its game, resulting in a stuck page
$('form[method="post"]').dirtyForms();
$('a').on('click', function(){
$.blockUI();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.dirtyforms/2.0.0/jquery.dirtyforms.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.blockUI/2.70/jquery.blockUI.min.js"></script>
<p>Change the field content to activate DirtyForms, then click on the link.<br>
When the popup appears, click on "cancel" to stay on the page.<br>
Watch blockUI getting fired as the link is going to be followed</p>
<form action="#" method="post">
<input type="text" name="username" required>
<button type="submit">send</button>
</form>
click me after changing field content
Please, any solution?
EDIT: I also tried with stay.dirtyforms and afterstay.dirtyforms events, but they have no effect. defer.dirtyforms seems to work but the event is triggered twice (I put a console.log() to check) and I am not sure this is the way to go...
I've edit my answer: I've added some line of code to disable first the onbeforeunload dialog alert, taken from here. And at the end a link to an answer with another idea you can try.
My idea: you have to prevent the default link action and use the $.blockUI Modal Dialogs methods to open a custom dialog, then catch the link attribute href from the link put it inside a variable and use the variable value for the #yes button of the dialog.
See if this solution can meet your needs
/* beforeunload bind and unbind taken from https://gist.github.com/woss/3c2296d9e67e9b91292d */
// call this to restore 'onbeforeunload'
var windowReloadBind = function(message) {
window.onbeforeunload = function(event) {
if (message.length === 0) {
message = '';
};
if (typeof event == 'undefined') {
event = window.event;
};
if (event) {
event.returnValue = message;
};
return message;
}
};
// call this to prevent 'onbeforeunload' dialog
var windowReloadUnBind = function() {
window.onbeforeunload = function() {
return null;
};
};
var linkToFollow; // href to follow
$('form[method="post"]').dirtyForms();
$('a').on('click', function(e){
e.preventDefault();
windowReloadUnBind(); // prevent dialog
$.blockUI({ message: $('#question'), css: { width: '275px' } });
linkToFollow = $(this).attr('href');
});
$('#no').click(function() {
$.unblockUI();
return false;
});
$('#yes').click(function() {
$(window.location).attr('href', linkToFollow);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.dirtyforms/2.0.0/jquery.dirtyforms.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.blockUI/2.70/jquery.blockUI.min.js"></script>
<p>Change the field content to activate DirtyForms, then click on the link.<br>
When the popup appears, click on "cancel" to stay on the page.<br>
Watch blockUI getting fired as the link is going to be followed</p>
<form action="#" method="post">
<input type="text" name="username" required>
<button type="submit">send</button>
</form>
click me after changing field content
<div id="question" style="display:none; cursor: default">
<h6>Would you like to contine?.</h6>
<input type="button" id="yes" value="Yes" />
<input type="button" id="no" value="No" />
</div>
Other idea taken from another answer: Other idea would be to make a simple jQuery.ajax({}) call before return value in beforeunload as seen in this answer

setting value to hidden_field_tag in HAML

I have a HAML file in which there is a line like follows:
%td
= hidden_field_tag "item1"
I am setting its value in jquery as follows:
$("#item1").val(1)
But it is not working, so I have done as follows:
$("#item1").attr("value",1)
Even it is not working also. Actually the item tag is associated with a form so while I am posting it, in handler page when I am printing parameters, it is printing as :item =>""
Edit: Its HTML source is as follows:
<input id="item1" name="item1" type="hidden">
No value field is coming.
Generally, what you have looks fine. I created a sample for you to show reading and setting the value in jQuery here: http://jsfiddle.net/T2v8K/2 . This should help you with debugging.
HTML:
<div>
<form id="myForm">
<table>
<tr>
<td>normal input: <input id="newValue" name="newValue" value="1" /></td>
<td>hidden input: <input id="item1" name="item1" type="hidden" value="someDefaultValue"/></td>
</tr>
</table>
</form>
<button id="showVal" type="button">Show Hidden Input Value</button>
<button id="setVal" type="button">Set Hidden Input Value</button>
</div>
JavaScript / jQuery:
$( document ).ready(function() {
var beforeValue = $( "#item1" ).val();
//alert( "Before = " + beforeValue );
var afterValue = $( "#item1" ).val();
//alert( "After = " + afterValue );
$( "#showVal" ).click( function() {
ShowHiddenInputValue();
})
$( "#setVal" ).click( function() {
SetHiddenInputValue();
})
});
function ShowHiddenInputValue() {
//Show the current value of the hidden input
var hiddenInputValue = $( "#item1" ).val();
alert( "Hidden Input Value = " + hiddenInputValue );
}
function SetHiddenInputValue(){
//Get the value from the input
var newHiddenInputValue = $( "#newValue" ).val();
//Set the hidden input
$( "#item1" ).val(newHiddenInputValue);
ShowHiddenInputValue();
}
Try setting a default value like this and see if you properly read out the value in your form post.
Also, if you aren't sure that jQuery is working (perhaps not referenced properly), you can test that by checking for the version number in an alert like this in your JavaScript:
alert($().jquery);

mobile css for radio button not applying in knock template binding

I have tried to use knockoutjs template binding to bind fieldsets dynamically which contain group of radio buttons. Here my problem is mobile radio button css not applying for radio buttons. I have searched in stackoverflow I have found issue for button but i didn't find for radio buttons. So can you please find me the solution
<script type="text/x-jquery-tmpl" id="MobileQuestionTemplate">
<div data-role="fieldcontain">
<div class="divborder">
<label id="l2" for="select-choice-1" class="questiontext" data-bind="text: QuestionText"></label>
<br />
<fieldset data-role="controlgroup" data-mini="true" align="center" data- bind="attr: { visible: QuestionType==13,id:QuestionID+'_fld'},template: {name:'MobileOptionTemplate', foreach: OptionList}"></fieldset>
</div>
</div>
</script>
<script type="text/x-jquery-tmpl" id="MobileOptionTemplate">
<input type="radio" data-bind="attr: {id:QuestionID+'_'+OptionID+'_rbt',val:OptionID,name: QuestionID+'_selectedObjects'}"/>
<label data-bind="text: OptionText ,attr: { for: QuestionID+'_'+OptionID+'_rbt'}" />
</script>
<table id="tblMobileMgrQuestions" data-bind="template: {name:'MobileQuestionTemplate', foreach: MobileManagerviewmodel.ManagerQuestions}">
</table>
Can you please tell me where I need to change the code in js to apply css
$.ajax(
{
url: "/Render/LoadSurveyManagerQuestions?surveyGuid=" + surveyGuid + "&surveyItemGuid=" + rsg,
success: function (result)
{
ko.bindingHandlers['button'] =
{
init: function (element, valueAccessor)
{
debugger;
$(element).button(ko.utils.unwrapObservable(valueAccessor()));
}
}
debugger;
var SurveyManagerQuestion = function (managerQuestions)
{
var Self = this;
Self.ManagerQuestions = ko.observableArray(managerQuestions);
Self.AssignQuestionAnswer = function (option)
{
ko.utils.arrayFirst(Self.ManagerQuestions(), function (question)
{
if (question.QuestionID == option.QuestionID)
{
question.OptionId = option.OptionID;
question.OptionText = option.OptionText;
}
});
};
Self.Save = function ()
{
alert('hi');
};
};
debugger;
MobileManagerviewmodel = new SurveyManagerQuestion(result);
ko.applyBindings(MobileManagerviewmodel, document.getElementById("tblMobileMgrQuestions"));
}
});
Thanks for any help in advance.
To enhance the markup of radio buttons dynamically, use the below.
$('input[type=radio]').checkboxradio().trigger('create')

jQuery Mobile and Knockout.js templating, styling isnt applied

Ok so this is beginning to drive me insane. I have for several hours now searched and searched, and every single solution doesnt work for me. So yes, this question might be redundant, but i cant for the life of me get solutions to work.
I have a bunch of checkboxes being generated by a jquery template that is databound via knockout.js. However, it turns up unstyled. Afaik, it is something about jquery mobile does the styling before knockout renderes the template, so it ends up unstyled.
I have tried numerous methods to no avail, so i hope someone here can see what i am doing wrong.
(i am using jquery mobile 1.2.0 , jquery 1.8.2 and knockout 2.2.1)
This is the scripts:
<script type="text/javascript">
jQuery.support.cors = true;
var dataFromServer = "";
// create ViewModel with Geography, name, email, frequency and jobtype
var ViewModel = {
email: ko.observable(""),
geographyList: ["Hovedstaden","Sjælland","Fyn + øer","Nordjylland","Midtjylland","Sønderjylland" ],
selectedGeographies: ko.observableArray(dataFromServer.split(",")),
frequencySelection: ko.observable("frequency"),
jobTypes: ["Kontor (administration, sekretær og reception)","Jura","HR, Ledelse, strategi og udvikling","Marketing, kommunikation og PR","Handel og service (butik, service, værtinde og piccoline)","IT","Grafik og design","Lager, chauffør, bud mv.","Økonomi, regnskab og finans","Kundeservice, telefoninterview, salg og telemarketing","Sprog","Øvrige jobtyper"],
selectedJobTypes: ko.observableArray(dataFromServer.split(",")),
workTimes: ["Fulltid","Deltid"],
selectedWorkTimes: ko.observableArray(dataFromServer.split(","))
};
// function for returning checkbox selection as comma separated list
ViewModel.selectedJobTypesDelimited = ko.dependentObservable(function () {
return this.selectedJobTypes().join(",");
}, ViewModel);
var API_URL = "/webapi/api/Subscriptions/";
// function used for parsing json message before sent
function omitKeys(obj, keys) {
var dup = {};
var key;
for (key in obj) {
if (obj.hasOwnProperty(key)) {
if (keys.indexOf(key) === -1) {
dup[key] = obj[key];
}
}
}
return dup;
}
//Function called for inserting new subscription record
function subscribe() {
if($("#jobmailForm").valid()=== true){
//window.alert("add subscriptiooncalled");
var mySubscription = ko.toJS(ViewModel);
//var json = JSON.stringify(mySubscription);
var jsonSmall = JSON.stringify(omitKeys(mySubscription, ['geographyList','jobTypes','selectedJobTypesDelimited','workTimes']));
//window.alert(jsonSmall);
$.ajax({
url: API_URL,
cache: false,
type: 'POST',
contentType: 'application/json',
data: jsonSmall,
success: function (data) {
window.alert("success");
},
error: function (error) {
window.alert("ERROR STATUS: " + error.status + " STATUS TEXT: " + error.statusText);
}
});
}
}
function initializeViewModel() {
// Get the post from the API
var self = this; //Declare observable which will be bind with UI
// Activates knockout.js
ko.applyBindings(ViewModel);
}
// Handle the DOM Ready (Finished Rendering the DOM)
$("#jobmail").live("pageinit", function() {
initializeViewModel();
$('#jobmailDiv').trigger('updatelayout');
});
</script>
<script id="geographyTmpl" type="text/html">
<input type="checkbox" data-role="none" data-bind="attr: { value: $data }, attr: { id: $data }, checked: $root.selectedGeographies" />
<label data-bind="attr: { for: $data }"><span data-bind="text: $data"></span></label>
</script>
<script id="jobTypeTmpl" type="text/html">
<label><input type="checkbox" data-role="none" data-bind="attr: { value: $data }, checked: $root.selectedJobTypes" /><span data-bind="text: $data"></span></label>
</script>
Note, "jobmail" is the surrounding "page" div element, not shown here. And this is the markup:
<div data-role="content">
<umbraco:Item field="bodyText" runat="server"></umbraco:Item>
<form id="jobmailForm" runat="server" data-ajax="false">
<div id="jobmailDiv">
<p>
<label for="email">Email</label>
<input type="text" name="email" id="email" class="required email" data-bind="'value': email" />
</p>
<fieldset data-role="controlgroup" data-mini="true" data-bind="template: { name: 'geographyTmpl', foreach: geographyList, templateOptions: { selections: selectedGeographies } }">
<input type="checkbox" id="lol" />
<label for="lol">fkfkufk</label>
</fieldset>
<fieldset data-role="controlgroup" data-mini="true">
<p data-bind="template: { name: 'jobTypeTmpl', foreach: jobTypes, templateOptions: { selections: selectedJobTypes } }"></p>
</fieldset>
<fieldset data-role="controlgroup" data-mini="true">
<input type="radio" id="frequency5" name="frequency" value="5" data-bind="checked: frequencySelection" /><label for="frequency5">Højst 5 gange om ugen</label>
<input type="radio" id="frequency3" name="frequency" value="3" data-bind="checked: frequencySelection" /><label for="frequency3">Højst 3 gange om ugen</label>
<input type="radio" id="frequency1" name="frequency" value="1" data-bind="checked: frequencySelection" /><label for="frequency1">Højst 1 gang om ugen</label>
</fieldset>
<p>
<input type="button" value="Tilmeld" class="nice small radius action button" onClick="subscribe();">
</p>
Tilbage
</div>
</form>
Alternate method of invoking the restyling (doesnt work either):
$(document).on('pagebeforeshow', '#jobmail', function(){
// Get the post from the API
var self = this; //Declare observable which will be bind with UI
// Activates knockout.js
ko.applyBindings(ViewModel);
});
// Handle the DOM Ready (Finished Rendering the DOM)
$("#jobmail").live("pageinit", function() {
$('#jobmail').trigger('pagecreate');
});
Use a custom binding (Knockout) to trigger jQuery Mobile to enhance the dynamically created content produced by Knockout.
Here is a simple custom binding:
ko.bindingHandlers.jqmEnhance = {
update: function (element, valueAccessor) {
// Get jQuery Mobile to enhance elements within this element
$(element).trigger("create");
}
};
Use the custom binding in your HTML like this, where myValue is the part of your view model that changes, triggering the dynamic content to be inserted into the DOM:
<div data-bind="jqmEnhance: myValue">
<span data-bind="text: someProperty"></span>
My Button
<input type="radio" id="my-id" name="my-name" value="1" data-bind="checked: someOtherProperty" /><label for="my-id">My Label</label>
</div>
In my own case, myValue was part of an expression in an if binding, which would trigger content to be added to the DOM.
<!-- ko if: myValue -->
<span data-bind="jqmEnhance: myValue">
<!-- My content with data-bind attributes -->
</span>
<!-- /ko -->
Every dynamically generated jQuery Mobile content must be manually enhanced.
It can be done in few ways, but most common one can be done through the jQuery Mobile function .trigger( .
Example:
Enhance only page content
$('#page-id').trigger('create');
Enhance full page (header + content + footer):
$('#page-id').trigger('pagecreate');
If you want to find more about this topic take a look my other ARTICLE, to be more transparent it is my personal blog. Or find it HERE.

Is it possible to use links in a JQuery Mobile Form Label?

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/

Resources