errors using JQuery encapsulation - javascript

I'm trying to use JQuery encapsulation and have created file under my js directory, js/modules.js
"use strict";
console.log("im in modules.js");
var xxModule = function() {
console.log("im in xxModule");
var form = $('#module-form');
var processForm = function() {
console.log("im in processForm");
form.validate({
rules: {
name: {
required: true
}
},
messages: {
name: "please enter a valid module name"
}
});
}
return {
processModuleForm: function() {
console.log("im in return");
processForm();
},
};
}();
in my php blade file, I'm calling it in the document ready function as
<script src="{{ asset('js/modules.js') }}" type="text/javascript"></script>
<script>
$( document ).ready(function() {
console.log("im in ready");
xxModule.processModuleForm();
});
</script>
when the page is rendered its throwing error, jQuery.Deferred exception: xxModule is not defined #http://dev.projects/modules/create:82:3 as below
im in modules.js modules.js:99:9
im in xxModule modules.js:102:11
im in ready create:81:17
jQuery.Deferred exception: xxModule is not defined #http://dev.projects/modules/create:82:3
e#https://code.jquery.com/jquery-3.5.1.min.js:2:30005
l/</t<#https://code.jquery.com/jquery-3.5.1.min.js:2:30307
setTimeout handler*l/<#https://code.jquery.com/jquery-3.5.1.min.js:2:30516
c#https://code.jquery.com/jquery-3.5.1.min.js:2:28294
fireWith#https://code.jquery.com/jquery-3.5.1.min.js:2:29039
fire#https://code.jquery.com/jquery-3.5.1.min.js:2:29075
c#https://code.jquery.com/jquery-3.5.1.min.js:2:28294
fireWith#https://code.jquery.com/jquery-3.5.1.min.js:2:29039
ready#https://code.jquery.com/jquery-3.5.1.min.js:2:32012
B#https://code.jquery.com/jquery-3.5.1.min.js:2:31791
EventListener.handleEvent*#https://code.jquery.com/jquery-3.5.1.min.js:2:32160
#https://code.jquery.com/jquery-3.5.1.min.js:2:220
#https://code.jquery.com/jquery-3.5.1.min.js:2:225
undefined jquery-3.5.1.min.js:2:31560
Uncaught ReferenceError: xxModule is not defined
<anonymous> http://dev.projects/modules/create:82
jQuery 13
create:82:3
please can you help with this issue?
thanks

Related

Not able to locate the element on web page with intern and leadfoot API and getting error

But this is giving me below error:
NoSuchElement: [POST
http://localhost:4444/wd/hub/session/3a9b569788f086d4d68d52d99ab95d76/element/%5Bobject%20Object%5D/click]
no such element: Element_id length is invalid
define(function (require) {
var registerSuite = require('intern!object');
var assert = require('intern/chai!assert');
registerSuite({
name: 'Google',
'GoogleSearch': function () {
return this.remote
.get(require.toUrl('http://www.google.co.in'))
.setFindTimeout(5000)
.findByName('q')
.click()
.type("test")
.end()
.sleep(500)
.findByName('btnK')
.setFindTimeout(10000)
.submit()
.end()
}
});
});

Reveal module pattern - can't find the method

I am using reveal module pattern but can't call the method.
$(function () {
$(document).on("click", '.EditBill', function () {
editModule.EditBill(this);
});
});
var editModule = (function () {
function EditBill(object) {
var itemId = $(object).data('itemid');
loader.show();
$.ajax({
url: 'Bill/Edit',
data: { id: ItemId },
success: function (data) {
loader.hide();
$('#ModelPopup').empty();
$('#ModelPopup').html(data);
$(function () {
$('#editModal').modal();
});
}
});
}
return
{
EditBill: EditBill
}
}());
When I debug in Edge, I click the button ('.EditBill'), the message is
> SCRIPT5007: Unable to get property 'EditBill' of undefined or null
Thanks for Shyju, the answer is return and the first curly brace '{', should be on the same line! It works now. I don't understand why I have to follow this syntas, but it works.

Call function inside RequireJS

Is it possible to create an object inside RequireJS?
Because, in this way, FunctionA is visible inside the Click event:
require(["library1", "library2"], function (obj1) {
$('#loginButton').click(function () {
functionA();
});
functionA() {
obj1.value;
}
});
But if i do something like this, it doesn't work:
var library = new library();
require(["library1", "library2"], function (obj1) {
$('#loginButton').click(function () {
library.functionA();
});
});
function library() {
this.functionA = function () {
obj1.value;
}
}
or
var library = new library();
$('#loginButton').click(function () {
library.functionA();
});
functionA() {
require(["library1", "library2"], function (obj1) {
this.functionA = function () {
obj1.value;
}
});
}
Is this possible?
I'm not sure why your explicit example is not working. However, I would suggest ensuring that you make jQuery a dependency in your require statement.
The following is using dojo, which uses an AMD environment like RequireJS. I just wanted to make sure that I was able to load multiple modules for my example and RequireJS has not modules with it like dojo does.
I was able to get your second example working by fixing the dependencies.
var library = new library();
require(["dojo/dom", "jquery"], function(dom, $) {
$('#button').click(function() {
library.functionA();
});
});
function library() {
this.functionA = function() {
console.log("hello");
}
}
<script>
var dojoConfig = {
parseOnLoad: false,
isDebug: true,
async: 1,
packages: [{
name: "jquery",
location: "//code.jquery.com",
main: "jquery-1.11.3.min"
}]
};
</script>
<!-- Include the dojo 1.10.4 CDN -->
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<main>
<button id="button" type="button">Click me</button>
</main>

Wordpress : ReferrenceError $ not defined

I am using wordpress and trying to access this code snippet .It's Showing error in the last line }(jQuery));
(function($) {
$(function () {
// Slideshow 3
$("#slider3").responsiveSlides({
auto: true,
pager:true,
nav:false,
speed: 500,
namespace: "callbacks",
before: function () {
$(".events").append("<li>before event fired.</li>");
},
after: function () {
$(".events").append("<li>after event fired.</li>");
}
});
});
}(jQuery));
It's showing Referrence error as : $ not defined .I have searched in stackoverflow but din't found a correct solution.Please let me know where i am doing wrong.
Note : I have placed my main Jquery script above all so that it gets included first before any other script.
Typically this is how I setup a javascript file using WordPress.
Add this code to either your header or footer, depending on the application makes a difference:
<script type="application/x-javascript">
jQuery(document).ready(function() {
your_javascript_function('add any variables here');
});
</script>
Then I would modify your script to look like this:
function your_javascript_function(vars) {
// Slideshow 3
$("#slider3").responsiveSlides({
auto: true,
pager:true,
nav:false,
speed: 500,
namespace: "callbacks",
before: function () {
$(".events").append("<li>before event fired.</li>");
},
after: function () {
$(".events").append("<li>after event fired.</li>");
}
});
}
If you are still receiving an error try adding a $ to the js here:
jQuery(document).ready(function($) {
If that doesn't work change all $ to jQuery.
If that doesn't work then something else is causing your issues.
How about enqueue_script function? Have your tried that? Or how is your js embedded?
function mytheme_enqueue_style() {
wp_enqueue_script( 'jquery', $child_uri . '/js/jquery-1.11.1.min.js' );
wp_enqueue_script( 'jquery', $child_uri . '/js/YOURSCRIPT' );
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_style' );

Telerik Reporting run javascript functions

We are currently loading a Telerik Report within a Radwindow. We're trying to run javascript functionality within the report, but can't seem to find a way to hook in the script after the report loads:
$("#TelerikReportviewer").on("click", function () {
ResetSessionTimer();
});
Is there a way to load Javascript within the report when it loads on the page?
<script type="text/javascript">
$('document').ready(function () {
$("#reportViewer1")
.telerik_ReportViewer({
serviceUrl: 'api/Reports',
templateUrl: '/ReportViewer/templates/telerikReportViewerTemplate-9.1.15.731.html',
reportSource: {
report: "Payroll.ReportLibrary.HDMF.HDMF,Payroll.ReportLibrary",
parameters: {
payoutUID: '588206E1-BE66-4C6C-8433-0D51F7530ECF',
employeeTypeUID: '4DA38CC9-8C80-47A7-B020-FC296C029682,4DA38CC9-8C80-47A7-B020-FC296C029681',
group: 'Group By Department'
}
},
viewMode: 'PRINT_PREVIEW',
scaleMode: '4.0',
//scaleMode: 'FIT_PAGE',
pageReady: function (e) { console.log("this event handler was attached in the constructor", e); },
renderingEnd: function (e, args) { console.log("This event handler will be called before rendering the report.", e, args); }
});
});
</script>

Categories