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