I am new to Ajax and Jquery.I have a form where there is a DepositAccountNumberId text box and its value is stored in a Hidden Field for Validation.
OnBlur event of DepositAccountNumberId TextBox should give a bootbox alert ("This Account Number has been Suspended"). I have posted the code below:
Javascript Function to CheckAccountSuspension()
var exist = true;
function checkAccountSuspension() {
var accountNumberId = $('#DepositAccountNumberIdHiddenField').val();
// alert(accountNumberId);
if (accountNumberId == "") {
//
} else {
try {
var url = '/WebMethods/AccountDetails.asmx/IsAccountSuspended';
var d = { accountNumberId: accountNumberId };
//var jqXhr = $.post(url, d);
//jqXhr.done(function(data) {
$.post(url, d, function (data) {
if (data) {
var ret = data.d;
if (ret) {
$('#DepositAccountNumberIdHiddenField').val(accountNumberId);
exist = true;
} else {
$('#DepositAccountNumberIdHiddenField').val('');
bootbox.alert("This Account Has been Suspended");
exist = false;
}
}
}).fail(function() {
$('#DepositAccountNumberIdHiddenField').val('');
});
} catch (e) {
bootbox.alert('Error: ' + e);
}
}
Web Method
[WebMethod(EnableSession = true)]
public bool IsAccountSuspended(string accountNumberId)
{
int officeId = OfficeId;
return BusinessLayer.Transactions.Transactions.IsAccountSuspended(officeId, accountNumberId.ToLong());
}
IsAccountSuspended in Business Layer
public static bool IsAccountSuspended(int officeId, long accountNumberId)
{
if (accountNumberId <= 0)
{
return false;
}
return DatabaseLayer.Transactions.Transactions.IsAccountSuspended(officeId,accountNumberId);
}
IsAccountSuspended in Database Layer
public static bool IsAccountSuspended(int officeId, long accountNumberId)
{
if (accountNumberId <= 0)
{
return false;
}
var sql = "SELECT * FROM deposit.is_suspended(#AccountNumberId::bigint);";
using (var command = new NpgsqlCommand(sql))
{
command.Parameters.AddWithValue("#AccountNumberId", accountNumberId);
using (var table = DBOperations.GetDataTable(command))
{
if (table.Rows.Count >= 1)
{
return true;
}
return false;
}
}
}
The Validation does not work.The ajax is not called to check if the account is suspended.Help Please.
Try to use $.post method:
var exist = true;
function checkAccountSuspension() {
var accountNumberId = $('#DepositAccountNumberIdHiddenField').val();
// alert(accountNumberId);
if (accountNumberId == "") {
//
} else {
try {
var url = '/WebMethods/AccountDetails.asmx/IsAccountSuspended';
var d = {accountNumberId: accountNumberId};
var jqXhr = $.post(url, d);
jqXhr.done(function (data) {
if (data) {
var ret = data.d;
if (ret) {
$('#DepositAccountNumberIdHiddenField').val(accountNumberId);
exist = true;
} else {
$('#DepositAccountNumberIdHiddenField').val('');
bootbox.alert("This Account Has been Suspended");
exist = false;
}
}
}).fail(function () {
$('#DepositAccountNumberIdHiddenField').val('');
});
} catch (e) {
bootbox.alert('Error: ' + e);
}
}
}
$('#DepositAccountNumberTextBox').on('blur', function () {
checkAccountSuspension();
});
There is no such method like ajaxPost in JQuery. Use $.Post at its place.
try {
var url = '/WebMethods/AccountDetails.asmx/IsAccountSuspended';
var d = { accountNumberId: accountNumberId };
$.post(url,d,function(data){
if (data) {
var ret = data.d;
if (ret) {
$('#DepositAccountNumberIdHiddenField').val(accountNumberId);
exist = true;
}
else {
$('#DepositAccountNumberIdHiddenField').val('');
bootbox.alert("This Account Has been Suspended");
exist = false;
}
}
}).error(function() {
$('#DepositAccountNumberIdHiddenField').val('');
})
}
catch (e) {
bootbox.alert('Error: ' + e);
}
This is How it worked.
Like some of the experts above said about the use of postAjax and $.post.
As everywhere in the project it was used as postAjax by previous developers here.
I was actually passing a null value again in the hidden field.
This code worked.
var exist = true;
function checkAccountSuspension() {
var accountNumberId = $('#DepositAccountNumberIdHiddenField').val();
if (accountNumberId == "") {
//
} else {
try {
var url = '/WebMethods/AccountDetails.asmx/IsAccountSuspended';
var d = { accountNumberId: accountNumberId };
//$.post(url, d, function (data) {
var jqXhr = ajaxPost(url, d, true);
jqXhr.done(function (data) {
var ret = data.d;
if (!ret) {
$('#DepositAccountNumberIdHiddenField').val(accountNumberId);
exist = true;
}
else {
//$('#DepositAccountNumberIdHiddenField').val('');
// bootbox.alert("<b class='text-red'>Suspended Account</b> <br/>This Account has been Suspended.");
swal({
title: "Suspended Account!",
text: "This Account is Suspended",
type: "error",
confirmButtonText: "OK",
imageSize: "20x20"
});
exist = false;
resetAllInputs();
}
}).fail(function (ex) {
bootbox.alert("Requested process fail to execute");
//$('#DepositAccountNumberIdHiddenField').val('');
});
}
catch (e) {
bootbox.alert('Error: ' + e);
}
}
}
Related
I've got a page, on the page there is a button wrapped in an anchor tag:
This calls a function labeled as AddNewThread, now this function opens up a dialog Box using jQuery, and in the dialog box there is a text field that you enter text to, and this text is then pasted on the page using ajax.
The problem:
I want to remove the click event entirely; I want to have it on page load, it will load the text box, and the functionality is remaining the same, But I just don't know how to go about this.
Here's the code for the AddNewThread function:
function DiscussionViewModel() {
var self = this;
self.New = ko.mapping.fromJS(newDiscussion);
self.Threads = ko.mapping.fromJS(threads, mapping);
self.AddNewThread = function () {
$("#dvAddDiscussion").dialog('open');
ko.mapping.fromJS(newDiscussion, self.New);
if (CKEDITOR.instances["txtDiscussioinDescription"] != undefined) {
CKEDITOR.instances["txtDiscussioinDescription"].setData('');
}
};
self.AddReply = function (thread) {
$("#txtDiscussioinDescription").val('');
self.LastDiscussionId(thread.New.ParentId());
self.New.Title('');
self.New.DiscussionId(thread.New.DiscussionId());
self.New.Type(thread.New.Type());
self.New.TypeId(thread.New.TypeId());
self.New.Description('');
self.New.ParentId(thread.New.ParentId());
self.New.UserId(thread.New.UserId());
self.New.User(thread.New.User());
$("#dvAddDiscussion").dialog('open');
};
self.LastDiscussionId = ko.observable();
self.SubmitReply = function (form) {
var jForm = $(form);
$("#dvAddDiscussion").dialog('close');
var request = jForm.serialize();
var discussionId = $("#DiscussionID").val();
var parentId = $("#ParentId").val();
$.post(addDiscussionUrl, request, function (response) {
if (response) {
if ((discussionId == '' || discussionId == undefined) && parentId == '') {
$.post(summariesUrl, { type: type, objectId: objectId }, function (response) {
ko.mapping.fromJS(response, mapping, self.Threads);
$("abbr.timeago").timeago();
});
} else {
self.LoadReplies(self.LastDiscussionId());
}
} else {
alert("Error occured while adding discussion");
}
});
};
self.GetReplies = function (data) {
var thread;
if (data.IsMaximized() == true) {
for (var i = 0; i < self.Threads().length; i++) {
if (self.Threads()[i].DiscussionId() == data.DiscussionId()) {
self.Threads()[i].IsMaximized(false);
break;
}
}
} else {
for (var i = 0; i < self.Threads().length; i++) {
if (self.Threads()[i].DiscussionId() == data.DiscussionId()) {
self.Threads()[i].IsMaximized(true);
self.LoadReplies(data.DiscussionId());
break;
}
}
}
};
self.LoadReplies = function (discussionId) {
var request = {
discussionId: discussionId,
type: type,
objectId: objectId
};
$.post(threadsUrl, request, function (response) {
for (var i = 0; i < self.Threads().length; i++) {
if (self.Threads()[i].DiscussionId() == discussionId) {
self.Threads()[i].Replies.splice(0, self.Threads()[i].Replies().length);
for (var j = 0; j < response.length; j++) {
self.Threads()[i].Replies.push(new ReplyModel(response[j]));
}
break;
}
}
$("abbr.timeago").timeago();
});
};
self.EditReply = function (dicussion) {
self.New.Title(dicussion.Title());
self.New.DiscussionId(dicussion.DiscussionId());
self.New.Type(dicussion.Type());
self.New.TypeId(dicussion.TypeId());
self.New.Description(dicussion.Description());
self.New.ParentId(dicussion.ParentId());
self.New.UserId(dicussion.UserId());
self.New.User(dicussion.User());
self.LastDiscussionId(dicussion.DiscussionId());
$("#dvAddDiscussion").dialog('open');
};
self.ToggleView = function (data) {
for (var i = 0; i < self.Threads().length; i++) {
for (var j = 0; j < self.Threads()[i].Replies().length; j++) {
if (self.Threads()[i].Replies()[j].DiscussionId == data.DiscussionId) {
self.Threads()[i].Replies()[j].HasMore(!self.Threads()[i].Replies()[j].HasMore());
break;
}
}
}
};
}
var discussionViewmodel = new DiscussionViewModel();
ko.applyBindings(discussionViewmodel, document.getElementById("dvThreads"));
$(function () {
$("#accordion").accordion();
var dialog = $("#dvAddDiscussion").dialog({
autoOpen: false,
width: 720,
height: 500,
title: 'Discussion',
modal: true,
open: function () {
if (typeof DISABLE_FOR_DIALOG != 'undefined')
DISABLE_FOR_DIALOG = true;
CKEDITOR.replace('txtDiscussioinDescription');
},
close: function (parameters) {
if (typeof DISABLE_FOR_DIALOG != 'undefined')
DISABLE_FOR_DIALOG = false;
if (CKEDITOR.instances["txtDiscussioinDescription"] != undefined) {
CKEDITOR.instances.txtDiscussioinDescription.updateElement();
CKEDITOR.instances.txtDiscussioinDescription.destroy();
}
}
});
dialog.parent().appendTo($("#dvDialogs"));
$("#frmAddDiscussion").data("validator").settings.submitHandler = discussionViewmodel.SubmitReply;
$("#frmAddDiscussion").bind('click', function () {
CKEDITOR.instances.txtDiscussioinDescription.updateElement();
});
});
</script>
You just need to call the function at the appropriate time, which in this case is within your jQuery ready handler, right after this block:
$("#frmAddDiscussion").bind('click', function () {
CKEDITOR.instances.txtDiscussioinDescription.updateElement();
});
You should be able to just add:
discussionViewmodel.AddNewThread();
This will invoke the function the same way that knockout would have done through the click data binding.
I have following Angular JS service which is accessing to the cordova media plugin.
MediaSrv.loadMedia(filePath, mediaSuccess, null, status).then(function(media, status, test, status1){
media.play({ numberOfLoops: 999 });
media.setVolume(volume);
$scope.selectedSounds[index].state = 1;
$scope.selectedSounds[index].mediaInstance = media;
$scope.someSoundsArePlaying = true;
});
I would like to ask, how can i do loop playing of the selected file which can be stopped after passing mediaInstance to stop function?
I tried mediaSuccess Callback and status CallBack but it does not work properly.
Service is following:
'use strict';
angular.module('MaxRelax')
.factory('MediaSrv', function($q, $ionicPlatform, $window){
var service = {
loadMedia: loadMedia,
getStatusMessage: getStatusMessage,
getErrorMessage: getErrorMessage
};
function loadMedia(src, onError, onStatus, onStop){
var defer = $q.defer();
$ionicPlatform.ready(function(){
var mediaSuccess = function(){
if(onStop){onStop();}
};
var mediaError = function(err){
_logError(src, err);
if(onError){onError(err);}
};
var mediaStatus = function(status){
console.log(status);
if(onStatus){onStatus(status);}
};
if($ionicPlatform.is('android')){src = '/android_asset/www/' + src;}
defer.resolve(new $window.Media(src, mediaSuccess, mediaError, mediaStatus));
});
return defer.promise;
}
function _logError(src, err){
console.error('media error', {
code: err.code,
message: getErrorMessage(err.code)
});
}
function getStatusMessage(status){
if(status === 0){return 'Media.MEDIA_NONE';}
else if(status === 1){return 'Media.MEDIA_STARTING';}
else if(status === 2){return 'Media.MEDIA_RUNNING';}
else if(status === 3){return 'Media.MEDIA_PAUSED';}
else if(status === 4){return 'Media.MEDIA_STOPPED';}
else {return 'Unknown status <'+status+'>';}
}
function getErrorMessage(code){
if(code === 1){return 'MediaError.MEDIA_ERR_ABORTED';}
else if(code === 2){return 'MediaError.MEDIA_ERR_NETWORK';}
else if(code === 3){return 'MediaError.MEDIA_ERR_DECODE';}
else if(code === 4){return 'MediaError.MEDIA_ERR_NONE_SUPPORTED';}
else {return 'Unknown code <'+code+'>';}
}
return service;
});
Many, many thanks for any help.
EDIT:
Playing of the item is processed by the following method:
$scope.playSelectedItem = function(index) {
try {
var fileName = $scope.selectedSounds[index].file;
var volume = $scope.selectedSounds[index].defaultVolume;
var filePath = "sounds/" +fileName+".mp3";
console.log(filePath);
MediaSrv.loadMedia(
filePath,
function onError(err){ console.log('onError', MediaSrv.getErrorMessage(err)); },
function onStatus(status){ console.log('onStatus', MediaSrv.getStatusMessage(status)); },
function onStop(){ console.log('onStop'); myMedia.play(); }
).then(function(media){
myMedia = media;
media.play({ numberOfLoops: 999 });
media.setVolume(volume);
$scope.selectedSounds[index].state = 1;
$scope.selectedSounds[index].mediaInstance = media;
$scope.someSoundsArePlaying = true;
});
} catch(e) {
alert(JSON.stringify(e));
console.log(e);
$scope.showAlert("Error", "Error during the playing item");
}
};
Stopping:
$scope.stopSelectedItem = function(index) {
try {
var leng = 0;
if($scope.selectedSounds[index].state == 1) {
var mediaInstance = $scope.selectedSounds[index].mediaInstance;
mediaInstance.stop();
$scope.selectedSounds[index].state = 0;
$scope.selectedSounds[index].mediaInstance = "";
myMedia.stop();
}
angular.forEach($scope.selectedSounds, function loadMedia(selectedSound, idx){
if($scope.selectedSounds[idx].state == 1) {
leng ++;
}
});
if(leng <= 0) {
$scope.someSoundsArePlaying = false;
console.log("No sound are playing");
}
if(leng > 0) {
$scope.someSoundsArePlaying = true;
console.log("Some sound are playing");
}
console.log("Leng is:");
console.log(leng);
} catch(e) {
alert(JSON.stringify(e));
console.log(e);
$scope.showAlert("Error", "Cannot stop playing of item");
}
};
EDIT2:
I finally solved it using storing myMedia instance in the simple array.
$scope.playSelectedItem = function(index) {
try {
var fileName = $scope.selectedSounds[index].file;
var volume = $scope.selectedSounds[index].defaultVolume;
var filePath = "sounds/" +fileName+".mp3";
console.log(filePath);
MediaSrv.loadMedia(
filePath,
function onError(err){ console.log('onError', MediaSrv.getErrorMessage(err)); },
function onStatus(status){ console.log('onStatus', MediaSrv.getStatusMessage(status)); },
function onStop(){
console.log('onStop');
if($scope.selectedSounds[index].state == 1) {
console.log('For index ' +index+' is state '+$scope.selectedSounds[index].state);
myMedia[index].play();
}
}
).then(function(media){
myMedia[index] = media;
media.play({ numberOfLoops: 999 });
media.setVolume(volume);
$scope.selectedSounds[index].state = 1;
$scope.selectedSounds[index].mediaInstance = media;
$scope.someSoundsArePlaying = true;
});
} catch(e) {
alert(JSON.stringify(e));
console.log(e);
$scope.showAlert("Error", "Error during the playing item");
}
};
I'm pleased that you find my angular service usefull.
In your sample you seems to mess up with parameter order :
MediaSrv.loadMedia(filePath, mediaSuccess, null, status) vs
function loadMedia(src, onError, onStatus, onStop)
BTW, play parameter numberOfLoops does not seems to work (at least on my nexus4). If you want to loop, you will need to call play() every time the mp3 ends.
Here is a short example :
var myMedia = null;
MediaSrv.loadMedia(
'sounds/1023.mp3',
function onError(err){ console.log('onError', MediaSrv.getErrorMessage(err)); },
function onStatus(status){ console.log('onStatus', MediaSrv.getStatusMessage(status)); },
function onStop(){ console.log('onError'); myMedia.play(); },
).then(function(media){
myMedia = media;
myMedia.play();
});
With this code, your sound should play, forever... To control when your sound should stop, I suggest you to add a control parameter, like this :
var myMedia = null;
var shouldPlay = false;
MediaSrv.loadMedia(
'sounds/1023.mp3',
function onError(err){ console.log('onError', MediaSrv.getErrorMessage(err)); },
function onStatus(status){ console.log('onStatus', MediaSrv.getStatusMessage(status)); },
function onStop(){ console.log('onError'); if(shouldPlay){myMedia.play();} },
).then(function(media){
myMedia = media;
});
function playStart(){
shouldPlay = true;
myMedia.play();
}
function playStop(){
shouldPlay = false;
myMedia.stop();
}
To play multiples files in a loop, you have to store all media references and play them successively. See there :
var shouldPlay = false;
var playingMedia = null;
var soundFiles = ['sounds/1.mp3', 'sounds/2.mp3', 'sounds/3.mp3'];
var mediaInstances = [];
var onPlayStop = function(){
if(shouldPlay){
if(playingMedia === null){
playingMedia = 0;
} else {
playingMedia = (playingMedia+1) % mediaInstances.length;
}
mediaInstances[playingMedia].play();
}
};
for(var i in soundFiles){
MediaSrv.loadMedia(soundFiles[i], null, null, onPlayStop).then(function(media){
mediaInstances.push(media);
});
}
function playStart(){
shouldPlay = true;
onPlayStop();
}
function playStop(){
shouldPlay = false;
mediaInstances[playingMedia].stop();
}
I hope this will helps :D
The question is very simple but also a bit theoretical.
Let's imagine you have a long JQuery script which modifies and animate the graphics of the web site. It's objective is to handle the UI. The UI has to be responsive so the real need for this JQuery is to mix some state of visualization (sportlist visible / not visible) with some need due to Responsive UI.
Thinking from an MVC / AngularJS point of view. How should a programmer handle that?
How to refactor JS / JQuery code to implement separation of concerns described by MVC / AngularJS?
I provide an example of JQuery code to speak over something concrete.
$.noConflict();
jQuery(document).ready(function ($) {
/*variables*/
var sliderMenuVisible = false;
/*dom object variables*/
var $document = $(document);
var $window = $(window);
var $pageHost = $(".page-host");
var $sportsList = $("#sports-list");
var $mainBody = $("#mainBody");
var $toTopButtonContainer = $('#to-top-button-container');
/*eventHandlers*/
var displayError = function (form, error) {
$("#error").html(error).removeClass("hidden");
};
var calculatePageLayout = function () {
$pageHost.height($(window).height());
if ($window.width() > 697) {
$sportsList.removeAttr("style");
$mainBody
.removeAttr("style")
.unbind('touchmove')
.removeClass('stop-scroll');
if ($(".betslip-access-button")[0]) {
$(".betslip-access-button").fadeIn(500);
}
sliderMenuVisible = false;
} else {
$(".betslip-access-button").fadeOut(500);
}
};
var formSubmitHandler = function (e) {
var $form = $(this);
// We check if jQuery.validator exists on the form
if (!$form.valid || $form.valid()) {
$.post($form.attr("action"), $form.serializeArray())
.done(function (json) {
json = json || {};
// In case of success, we redirect to the provided URL or the same page.
if (json.success) {
window.location = json.redirect || location.href;
} else if (json.error) {
displayError($form, json.error);
}
})
.error(function () {
displayError($form, "Login service not available, please try again later.");
});
}
// Prevent the normal behavior since we opened the dialog
e.preventDefault();
};
//preliminary functions//
$window.on("load", calculatePageLayout);
$window.on("resize", calculatePageLayout);
//$(document).on("click","a",function (event) {
// event.preventDefault();
// window.location = $(this).attr("href");
//});
/*evet listeners*/
$("#login-form").submit(formSubmitHandler);
$("section.navigation").on("shown hidden", ".collapse", function (e) {
var $icon = $(this).parent().children("button").children("i").first();
if (!$icon.hasClass("icon-spin")) {
if (e.type === "shown") {
$icon.removeClass("icon-caret-right").addClass("icon-caret-down");
} else {
$icon.removeClass("icon-caret-down").addClass("icon-caret-right");
}
}
toggleBackToTopButton();
e.stopPropagation();
});
$(".collapse[data-src]").on("show", function () {
var $this = $(this);
if (!$this.data("loaded")) {
var $icon = $this.parent().children("button").children("i").first();
$icon.removeClass("icon-caret-right icon-caret-down").addClass("icon-refresh icon-spin");
console.log("added class - " + $icon.parent().html());
$this.load($this.data("src"), function () {
$this.data("loaded", true);
$icon.removeClass("icon-refresh icon-spin icon-caret-right").addClass("icon-caret-down");
console.log("removed class - " + $icon.parent().html());
});
}
toggleBackToTopButton();
});
$("#sports-list-button").on("click", function (e)
{
if (!sliderMenuVisible)
{
$sportsList.animate({ left: "0" }, 500);
$mainBody.animate({ left: "85%" }, 500)
.bind('touchmove', function (e2) { e2.preventDefault(); })
.addClass('stop-scroll');
$(".betslip-access-button").fadeOut(500);
sliderMenuVisible = true;
}
else
{
$sportsList.animate({ left: "-85%" }, 500).removeAttr("style");
$mainBody.animate({ left: "0" }, 500).removeAttr("style")
.unbind('touchmove').removeClass('stop-scroll');
$(".betslip-access-button").fadeIn(500);
sliderMenuVisible = false;
}
e.preventDefault();
});
$mainBody.on("click", function (e) {
if (sliderMenuVisible) {
$sportsList.animate({ left: "-85%" }, 500).removeAttr("style");
$mainBody.animate({ left: "0" }, 500)
.removeAttr("style")
.unbind('touchmove')
.removeClass('stop-scroll');
$(".betslip-access-button").fadeIn(500);
sliderMenuVisible = false;
e.stopPropagation();
e.preventDefault();
}
});
$document.on("click", "div.event-info", function () {
if (!sliderMenuVisible) {
var url = $(this).data("url");
if (url) {
window.location = url;
}
}
});
function whatDecimalSeparator() {
var n = 1.1;
n = n.toLocaleString().substring(1, 2);
return n;
}
function getValue(textBox) {
var value = textBox.val();
var separator = whatDecimalSeparator();
var old = separator == "," ? "." : ",";
var converted = parseFloat(value.replace(old, separator));
return converted;
}
$(document).on("click", "a.selection", function (e) {
if (sliderMenuVisible) {
return;
}
var $this = $(this);
var isLive = $this.data("live");
var url = "/" + _language + "/BetSlip/Add/" + $this.data("selection") + "?odds=" + $this.data("odds") + "&live=" + isLive;
var urlHoveringBtn = "/" + _language + '/BetSlip/AddHoveringButton/' + $this.data("selection") + "?odds=" + $this.data("odds") + "&live=" + isLive;
$.ajax(urlHoveringBtn).done(function (dataBtn) {
if ($(".betslip-access-button").length == 0 && dataBtn.length > 0) {
$("body").append(dataBtn);
}
});
$.ajax(url).done(function (data) {
if ($(".betslip-access").length == 0 && data.length > 0) {
$(".navbar").append(data);
$pageHost.addClass("betslipLinkInHeader");
var placeBetText = $("#live-betslip-popup").data("placebettext");
var continueText = $("#live-betslip-popup").data("continuetext");
var useQuickBetLive = $("#live-betslip-popup").data("usequickbetlive").toLowerCase() == "true";
var useQuickBetPrematch = $("#live-betslip-popup").data("usequickbetprematch").toLowerCase() == "true";
if ((isLive && useQuickBetLive) || (!isLive && useQuickBetPrematch)) {
var dialog = $("#live-betslip-popup").dialog({
modal: true,
dialogClass: "fixed-dialog"
});
dialog.dialog("option", "buttons", [
{
text: placeBetText,
click: function () {
var placeBetUrl = "/" + _language + "/BetSlip/QuickBet?amount=" + getValue($("#live-betslip-popup-amount")) + "&live=" + $this.data("live");
window.location = placeBetUrl;
}
},
{
text: continueText,
click: function () {
dialog.dialog("close");
}
}
]);
}
}
if (data.length > 0) {
$this.addClass("in-betslip");
}
});
e.preventDefault();
});
$(document).on("click", "a.selection.in-betslip", function (e) {
if (sliderMenuVisible) {
return;
}
var $this = $(this);
var isLive = $this.data("live");
var url = "/" + _language + "/BetSlip/RemoveAjax/" + $this.data("selection") + "?odds=" + $this.data("odds") + "&live=" + isLive;
$.ajax(url).done(function (data) {
if (data.success) {
$this.removeClass("in-betslip");
if (data.selections == 0) {
$(".betslip-access").remove();
$(".betslip-access-button").remove();
$(".page-host").removeClass("betslipLinkInHeader");
}
}
});
e.preventDefault();
});
$("section.betslip .total-stake button.live-betslip-popup-plusminus").click(function (e) {
if (sliderMenuVisible) {
return;
}
e.preventDefault();
var action = $(this).data("action");
var amount = parseFloat($(this).data("amount"));
if (!isNumeric(amount)) amount = 1;
var totalStake = $("#live-betslip-popup-amount").val();
if (isNumeric(totalStake)) {
totalStake = parseFloat(totalStake);
} else {
totalStake = 0;
}
if (action == "decrease") {
if (totalStake < 1.21) {
totalStake = 1.21;
}
totalStake -= amount;
} else if (action == "increase") {
totalStake += amount;
}
$("#live-betslip-popup-amount").val(totalStake);
});
toggleBackToTopButton();
function toggleBackToTopButton() {
isScrollable() ? $toTopButtonContainer.show() : $toTopButtonContainer.hide();
}
$("#to-top-button").on("click", function () { $("#mainBody").animate({ scrollTop: 0 }); });
function isScrollable() {
return $("section.navigation").height() > $(window).height() + 93;
}
var isNumeric = function (string) {
return !isNaN(string) && isFinite(string) && string != "";
};
function enableQuickBet() {
}
});
My steps in such cases are:
First of all write (at least) one controller
Replace all eventhandler with ng-directives (ng-click most of all)
Pull the view state out of the controller with ng-style and ng-class. In most of all cases ng-show and ng-hide will be sufficed
If there is code that will be used more than once, consider writing a directive.
And code that has nothing todo with the view state - put the code in a service
write unit tests (i guess there is no one until now:) )
So I've been following this tutorial here and it shows you how to validate dates compared with each other. I'm getting an error in the first block of code which I've commented and it says "Unable to get property 'element' of undefined or null reference" which originates from this line of code customValidation.formValidator = $(event.data.source).closest('form').data('validator') does anyone know of a work around for this so I don't get an error. I'm using the latest unobtrusive validation
window.customValidation = window.customValidation ||
{
relatedControlValidationCalled: function (event) {
if (!customValidation.activeValidator) {
customValidation.formValidator = $(event.data.source).closest('form').data('validator');
}
// code error below
customValidation.formValidator.element($(event.data.target));
},
relatedControlCollection: [],
formValidator: undefined,
addDependatControlValidaitonHandler: function (element, dependentPropertyName) {
var id = $(element).attr('id');
if ($.inArray(id, customValidation.relatedControlCollection) < 0) {
customValidation.relatedControlCollection.push(id);
$(element).on(
'blur',
{ source: $(element), target: $('#' + dependentPropertyName) },
customValidation.relatedControlValidationCalled);
}
}
};
adapter:
$.validator.unobtrusive.adapters.add('comparedates', ['otherpropertyname', 'allowequality'],
function (options) {
options.rules['comparedates'] = options.params;
if (options.message) {
options.messages['comparedates'] = options.message;
}
}
);
validator method:
$.validator.addMethod('comparedates', function (value, element, params) {
var otherFieldValue = $('input[name="' + params.otherpropertyname + '"]').val();
if (otherFieldValue && value) {
var currentValue = Date.parse(value);
var otherValue = Date.parse(otherFieldValue);
if ($(element).attr('name').toLowerCase().indexOf('begin') >= 0) {
if (params.allowequality) {
if (currentValue > otherValue) {
return false;
}
} else {
if (currentValue >= otherValue) {
return false;
}
}
} else {
if (params.allowequality) {
if (currentValue < otherValue) {
return false;
}
} else {
if (currentValue <= otherValue) {
return false;
}
}
}
}
customValidation.addDependatControlValidaitonHandler(element, params.otherpropertyname);
return true;
}, '');
Maybe you are loading this code too early, before the form is in the DOM. Make sure your code is protected by $(document).ready(your code here);
When I click in field, type text, and press return on keyboard it triggers the initializeTable function that refreshes page and gives error form[0] undefined. However, when I use change event to change dropdown selection, it doesn't cause this unexpected behavior. So I'm not sure why pressing return key in text field is causing all this. Thanks for response.
<script>
(function($){
var listview = $('#listview');
var lists = (function(){
var criteria = {
dropFilter: {
insert: function(value){
if(value)
return {"filter" : value};
},
msg: "Filtering..."
},
searchFilter: {
insert: function(value){
if(value)
return {"search" : value}
},
msg: "Searching..."
}
}
return {
create: function(component){
var component = component.href.substring(component.href.lastIndexOf('#') + 1); //sites
return component;
},
setDefaults: function(component){
var parameter = {};
switch(component){
case "sites":
parameter = {
'url': 'sites',
'order': 'site_num',
'per_page': '20'
}
}
return parameter;
},
getCriteria: function(criterion){
return criteria[criterion];
},
addCriteria: function(criterion, method){
criteria[criterion] = method;
}
}
})();
var Form = function(form){
var fields = [];
$(form[0].elements).each(function(){
var field = $(this);
if(typeof field.attr('alter-data') !== 'undefined') fields.push(new Field(field));
})
}
Form.prototype = {
initiate: function(){
for(field in this.fields){
this.fields[field].calculate();
}
},
isCalculable: function(){
for(field in this.fields){
if(!this.fields[field].alterData){
return false;
}
}
return true;
}
}
var Field = function(field){
this.field = field;
this.alterData = true;
this.component = {'url' : window.location.hash.substring(window.location.hash.indexOf('#') + 1)};
this.attach("change");
this.attach("keypress");
}
Field.prototype = {
attach: function(event){
var obj = this; //our Field object
if(event == "change"){
obj.field.bind("change", function(){
return obj.calculate();
})
}
if(event == "keypress"){
obj.field.bind("keypress", function(e){
var code = (e.keyCode ? e.keyCode : e.which);
if(code == 13){
return obj.calculate();
}
})
}
},
calculate: function(){
var obj = this,
field = obj.field,
component = obj.component,
msgClass = "msgClass",
msgList = $(document.createElement("ul")).addClass("msgClass"),
types = field.attr("alter-data").split(" "),
container = field.parent(),
messages = [];
field.next(".msgClass").remove();
for(var type in types){
var criterion = lists.getCriteria(types[type]);
if(field.val()){
var result = criterion.insert(field.val());
container.addClass("waitingMsg");
messages.push(criterion.msg);
obj.alterData = true;
initializeTable(component, result);
}
else {
return false;
obj.alterData = false;
}
}
if(messages.length){
for(msg in messages){
msgList.append("<li>" + messages[msg] + "</li");
}
}
else{
msgList.remove();
}
}
}
$('#dashboard a').click(function(){
var currentComponent = lists.create(this);
var defaults = lists.setDefaults(currentComponent);
initializeTable(defaults);
});
var initializeTable = function(defaults, custom){
var custom = custom || {};
var query_string = $.extend(defaults, custom);
var params = [];
$.each(query_string, function(key,value){
params += key + '=' + value + "&";
})
var url = params.substring(params.indexOf("url")+4,9);
params = params.substring(params.indexOf("&")+1).replace(params.substring(params.lastIndexOf("&")),"");
$.ajax({
type: 'GET',
url: '/' + url,
data: params,
dataType: 'html',
error: function(){},
beforeSend: function(){},
complete: function() {},
success: function(response) {
listview.html(response);
var form = $('form');
form.calculation();
}
})
}
$.extend($.fn, {
calculation: function(){
var formReady = new Form($(this));
if(!formReady.isCalculable){
return false;
}
}
})
})(jQuery)
</script>
Rather than going through whole script, the actual issue is with this:
if(event == "keypress"){
obj.field.bind("keypress", function(e){
var code = (e.keyCode ? e.keyCode : e.which);
if(code == 13){
return obj.calculate();
}
})
}
}
Finally, I got it to work this this:
if(event == "keypress"){
obj.field.bind("keypress", function(e){
var code = (e.keyCode ? e.keyCode : e.which);
if(code == 13){
e.preventDefault();
return obj.calculate();
}
})
}
},
Hence, we first prevent default and then execute our custom function.