I have 2 pages. Index.html and detail.html. On index.html, when I click login, I call this function
$('form').submit(function (event) { //Trigger on form submit
var options = { dimBackground: true };
SpinnerPlugin.activityStart("Loading...", options);
});
It works perfectly. But on detail.html, I call this
$(document).ready(function () {
var options = { dimBackground: true };
SpinnerPlugin.activityStart("Loading...", options);
});
And it gives me the following error.
Uncaught ReferenceError: SpinnerPlugin is not defined
I have installed the SpinnerPlugin using xml as well. Wat should I do? Why is it working on index.html and not on detail.html?
Spinner plugin will only be available after the device ready event. This means that you should wrap your code with it:
$(document).ready(function () {
document.addEventListener("deviceready", onDeviceReady, false);
});
function onDeviceReady() {
var options = { dimBackground: true };
SpinnerPlugin.activityStart("Loading...", options);
}
Related
var $ = function (id) {
"use strict";
return document.getElementById(id);
};
$(document).ready(function () {
"use strict";
$('redirect').click(function () {
window.alert('you clicked the link');
return false;
});
});
Visit Goggle
I have a link in HTML and I wanting to use JavaScript and Jquery for the rest of my code. When the user clicks on the link, I want an alert to pop up with a message but I do not want the link to redirect them to that page. When I view my code in Chrome with the developer tools, I get an error message that says "Uncaught TypeError: cannot read property of 'ready' of null". Why is the ready property coming up null and how do I fix it?
var $ = function (id) {
"use strict";
return document.getElementById(id);
};
$(document).ready (function () {
"use strict";
$('redirect').click(function () {
window.alert('you clicked the link');
return false;
});
});
Visit Goggle
`
You need to use e.preventDefault(), like this:
$(document).ready(function () {
$('#redirect').click(function (e) {
e.preventDefault();
window.alert('you clicked the link');
});
});
Also, if you need to reference elements by class (with jQuery):
$('.someClass').on('click', function() {
...
If you want to access them
by id:
$('#someId').on('click', function() {
...
Your issue is you're redefining jQuery's $ function to your own custom function. Don't do this! It completely nullifies jQuery (you'd have to use the verbose jQuery form). You can also use preventDefault to prevent the hyperlink changing your page.
$(document).ready(function () {
"use strict";
$('redirect').click(function(e) {
e.preventDefault();
window.alert('you clicked the link');
});
});
Also make sure you have jQuery - place this at the top of your page:
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
var $ = function (id) {
"use strict";
return document.getElementById(id);
};
If you use $ as your jQuery wrapper, then the code above override that variable. Meaning it's no longer jQuery but rather that custom function that you have set. Try changing the name of the function or variable above.
I am building a form on a website, and I am having and issue getting a function to run when the ReCaptcha is submitted. This function removes the disabled attribute on the submit button.
There is also a chance that multiple forms may be used on one page so I implemented the following solution to allow multiple captacha forms on one page:
https://stackoverflow.com/a/33535769/2506219
It seems I can either allow multiple ReCaptcha forms or have the submit button allowed but not both.
Here is the code:
HTML
<div class="g-recaptcha" data-callback="verifyCallback"></div>
<script src="https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit" async defer></script>
JavaScript
<script>
var CaptchaCallback = function() {
$('.g-recaptcha')
.each(function(index, el) {
grecaptcha.render(el, { 'sitekey': 'XXXX' });
});
};
function verifyCallback() {;
$('#submitBtn').prop('disabled', false);
}
</script>
Thank-you.
Worked it out!
I needed to call the function from the callback, having it in the HTML doesn't work
var CaptchaCallback = function() {
$('.g-recaptcha')
.each(function(index, el) {
grecaptcha.render(el, { 'sitekey': 'XXXX', 'callback': verifyCallback });
});
};
You can add JS events in SugarCRM 7.2 by creating a custom record.js.
The problem I'm having is that they fire before the page is loaded so elements I'm trying to affect don't exist.
I have tried the following:
$(document).ready(function() { alert(0); }) // fires before page is loaded
$(document).on('load', function() { alert(1); }) // doesn't fire at all
$(window).load(function() { alert(2); }) // doesn't fire at all
Any help in resolving this would be much appreciated.
record.js
({
extendsFrom: 'RecordView',
initialize: function (options) {
this._super('initialize', [options]);
SUGAR.util.ajaxCallInProgress = function () {
alert(0);
$('[name="duplicate_button"]').hide();
},
})
The way I got this to work was to use the following code in custom/modules//clients/base/views/record/record.js
({
extendsFrom: 'AccountsRecordView',
initialize: function (options) {
this._super('initialize', [options]);
this.on("render", this.SetHomeButtons, this); //calls SetHomeButtons
},
SetHomeButtons: function () {
some code ....
},
})
The function SetHomeButtons is called once the page is loaded
Another way of doing it is to overwrite the render function to call your custom code
That doesn't work because of AJAX.
Edit: in Sugar 7 you have the function SUGAR.util.ajaxCallInProgress() it retruns false when every Request is done (all Content Elements have been loaded)
I want to call a function with a namespace based on its name.
Perhaps some background: What I want is, dynamically bind pages via $.mobile.loadPage(inStrUrl, { showLoadMsg: false }); and then, based on the current page, invoke a function within a loaded page. For example: each page has a showFilter function, the Event is attached to a main.html - page which should call the matching function in the current page.
I also tried some solutions, with jquery too, but nothing works for me.
This is my function code:
function namespace() { }
namespace.showFilter = function () {
alert("Test");
}
And want to "invoke" or "call" it via its name.
This is what i tried at least.
$(document).ready(function() {
var fn = window["namespace.showFilter"];
fn();
});
I get error TypeError: fn is not a function
Here is a fiddle http://jsfiddle.net/xBCes/1/
You can call it in the following way:
$(document).ready(function() {
window["namespace"]["showFilter"]();
});
or
$(document).ready(function() {
window["namespace"].showFilter();
});
or
$(document).ready(function() {
window.namespace.showFilter();
});
I found that I had to manually set it to window.
window.namespace = function() { }
window.namespace.showFilter = function () {
alert("Test");
};
$(document).ready(function() {
var fn = window["namespace"]["showFilter"];
fn();
});
http://jsfiddle.net/xBCes/4/
Like this:
$(function() {
window.namespace.showFilter();
});
P.S. I shortened the $(document).ready(...)
function namespace() {}
namespace.showFilter = function () {
alert("Test");
}
$(document).ready(function() {
var fn = namespace.showFilter();
fn();
});
http://jsfiddle.net/xBCes/3/
I have this code in my page.
$(document).ready(function () {
$("#ba_object_Code").change(function () { $("#HRBK").val($(this).val()); });
$.cookie('cookie_name', 'cookie_value');
if (sessid == 'xyz') {
$("#ControlPlanID").removeAttr('disabled');
}
$(".t-grid-action.t-button.t-state-default.t-grid-add").click(function () {
$.cookie('sessid', 'xyz');
});
});
I am getting this error
Microsoft JScript runtime error: Object doesn't support this property or method
Your not defining sessid, so when you call it, it will fail.
See working example: http://jsfiddle.net/zNDHN/
$(document).ready(function () {
var sessid = $.cookie('sessid');
$("#ba_object_Code").change(function () { $("#HRBK").val($(this).val()); });
$.cookie('cookie_name', 'cookie_value');
if (sessid == 'xyz') {
$("#ControlPlanID").removeAttr('disabled');
console.log('cookie_found');
}
$(".t-grid-action.t-button.t-state-default.t-grid-add").click(function () {
$.cookie('sessid', 'xyz');
console.log('cookie_created');
});
});
order is important and jquery files have to be included in_layout.cshtml incase master page is used... 'JQuery' is undefined