Calling JQuery function from xhtml in external js file - javascript

I have a jquery function defined in an external js file :
myJquery.js
(function($) {
$.fn.test = function (options) {
//Extended default options
var opts = $.extend({
chars: 0
}, options);
...doSomething...
})(jQuery);
Inclding this file in xhtml as:
<script type="text/javascript" src="_/js/myJquery.js"/>
and trying to access as:
$(document).ready(function() {
$("input.testClass").each(function() {
$(this).test({
chars:10
});
});
});
But getting js error saying 'test' function not found.

Your test function is scoped to the external file space, not the global environment. If you are sure that jQuery has command of the $ then append your function without the function($) wrapper.
EDIT: while the above may still be relevant for others ... it does work fine (at least for just showing the alert) with the } in place:
external file inlcuded with <script type="text/javascript" src="testing.js"></script>
(function($) {
$.fn.test = function (options) {
//Extended default options
var opts = $.extend({chars: 0}, options);
alert('boo: '+opts.chars);
}
})(jQuery);
in page:
<script type="text/javascript">
$(document).ready(function() {
$("h1").each(function() {
$(this).test({
chars:10
});
});
});
</script>

Related

Conflicting jquery versions won't work even with $.noConflict(true);

My html file has various functions which requires two different jquery versions. In the head section I have them loaded like this:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script type="text/javascript">
var $jq16 = $.noConflict(true);
</script>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script type="text/javascript">
var $jq21 = $.noConflict(true);
</script>
I mostly need to use jquery-2.1.0.min.js so in all my scripts I've replaced every single $ with $jq21.
For instance, if I ony include jquery-2.1.0 in my page and leave out v1.6, then the following script works fine. But when I include v1.6, and switch $ to $jq21, and also include the noConflict code, this script doesn't work:
<script>
$jq21('#form-signup_v1').validate({
submit: {
settings: {
inputContainer: '.field'
},
callback: {
onBeforeSubmit: function (node) {
myBeforeSubmitFunction(':D', ':)', node);
},
onSubmit: function (node) {
console.log('#' + node.id + ' has a submit override.');
//node.submit();
}
}
},
debug: true
});
function myBeforeSubmitFunction(a, b, node) {
document.getElementById("form-signup_v1").submit();
console.log(a, b);
$jq21(node).find('input:not([type="submit"]), select, textarea').attr('readonly', 'true');
$jq21(node).append('<div class="ui active loader"></div>');
}
</script>
Every $ on the page is switched to $jq21 and the scripts won't work.
Any ideas? Thank you.

unable to access an object created using require.js

Hello everyone,
I have just recently started learning the require.js , but I don't seem to understand as how does the whole mechanism work...and especialy how do I access the variables/objects created using this javascript library.
Let me explain it further in the example below..
webroot/page.jsp
<html>
<script data-main="js/page" src="js/lib/require.js"></script>
</html>
webroot/js/common.js
requirejs.config({
baseUrl: 'js/lib',
paths: {
app: '../app',
}
});
webroot/js/app/page.js
require(['./common'], function (common) {
require(['./app/page/init'], function(page)
{
page.load(1);
});
});
webroot/js/app/page/init.js
define(['./load'], function (load) {
var LoadPage = new load();
return LoadPage;
});
webroot/js/app/page/load.js
define(function () {
function loadPage() {
}
loadPage.prototype = {
load: function (page_id) {
console.log("Opening page "+page_id+" ");
}
};
return loadPage;
});
now when I run the page everything works perfectly, but now I'd like to execute the load method by clicking on a button.
<div onclick="page.load(2);"> </div>
but this does not work..So I'd like to know if there is any possibility to bind this action to any button or link...whatever..
(apologies for my bad english)
Thanks,
Alex
How about as below assuming you are using JQuery:
<div id="divPageLoad"></div>
<script language="javascript" type="text/javascript">
$("#divPageLoad").on("click", function() {
page.load(2);
});
</script>

Structure of JavaScript files and Modernizr/yepnope

I'm looking into the whole asynchronous script loading thing with Modernizr and yepnope.js and I'm wondering how I can adapt my application's structure to use asynchronous script loading.
Right now the structure resembles this:
...
<head>
<script src=jquery.js></script>
<script src=plugin1.js></script>
<script src=plugin2.js></script>
<script src=plugin3.js></script>
<script src=global.js></script>
</head>
<body>
This code is found in a header.php file that is required throughout the application. In the document body section (other PHP files), I may have some JavaScript files like this:
...
<script src=moduleA.js></script>
<script src=someScripts.js></script>
</html>
Here's a simplified example of what moduleA.js and someScripts.js could contain:
$(document).ready(function() {
$('.searchDate').myCoolPlugin({ /* some options */ });
});
And someScripts.js:
$(document).ready(function() {
$('#departureDate, #arrivalDate').myCoolPlugin({ /* some options */ });
});
If I'm using Modernizr, at the top of the page I would remove the other plugin scripts and in global.js I'd write:
Modernizr.load([
{
test: $.fn.myCoolPlugin,
nope: 'plugin1.js',
complete: function() {
$(document).ready(function() {
$('.filterDates').myCoolPlugin();
}
}
}
]);
How do I guarantee that myCoolPlugin has been loaded by the time moduleA.js and someScripts.js are executed? I realize that I can wrap the plugin initialization in those files with Modernizr.load(), but that seems like unnecessary duplication of code.
If I have understood your question correctly then you want to execute the body scripts after the necessary scripts have been loaded with Modernizr.
You could do something like this:
// Header script
var race_won = false;
var load_body_script = function() {
race_won = true;
};
Modernizr.load([
{
test: ..your condition..,
yep: ..test success..,
nope: ..test fail..,
complete: function() {
$(document).ready(function() {
$('.filterDates').myCoolPlugin();
load_body_script();
}
}
}
]);
// Body script
var body_script = function() {
// .. your code here ..
}
if (race_won) {
body_script();
}
else {
load_body_script = body_script;
}

Knockout not binding submit with JQuery1.10.2

EDIT:
this is actually Knockout, JQuery 1.10.2 and trying to override the jquery.unobtrusivevalidation ErrorPlacement function... stopping the submit binding work on a form element.
If I run the same code with JQuery 1.8.2 then just change my JQuery file to 1.10.2 my submit function stops firing... has anyone seen similar to this?
i'm going to post as much relevant code as I can in case its something unexpected but the main point is that submitForm bound to the form submit event perfectly well with jquery 1.8.2 and without any other changes jquery 1.10.2 doesn't touch submitForm (testing with break points and alert() statements).
All other knockout bindings still seem to work.
please help. thanks.
<html>
<head>
<script src="/Content/Scripts/jquery-1.10.2.js"></script>
<script src="/Content/Scripts/jquery-ui/jquery-ui.js"></script>
<script src="/Content/Scripts/jquery-ui-timepicker-addon.js"></script>
<script src="/Content/Scripts/knockout-2.3.0.js"></script>
<script src="/Content/Scripts/knockout-helpers.js"></script>
<script src="/Content/Scripts/knockout.mapping-latest.js"></script>
<script src="/Content/Scripts/underscore.js"></script>
<script src="/Content/Scripts/date.js"></script>
<script src="/Content/Scripts/global.js"></script>
<script src="/Content/Scripts/jquery.blockUI.js"></script>
<script src="/Content/Scripts/jquery.dirtyform.js"></script>
<script src="/Content/Scripts/bootstrap/bootstrap.js"></script>
<script src="/Content/Scripts/sessionTimer.js"></script>
<script src="/Content/Scripts/jquery.livequery.js"></script>
<script src="/Content/Scripts/Ecdm/myCode.js"></script>
</head>
<form action="/Apply" data-bind="submit: submitForm" id="myApplicationForm" method="post">
<!-- html form stuff -->
</form>
<script>
var view;
$(function() {
view = new ModelView({
formSelector: '#myForm',
});
// Base JS model
var model =
{
someProperty: '#Model.SomeProperty',
};
view.bind(model);
});
</script>
</html>
myCode.js:
function ModelView(params) {
var self = this;
// Default parameters
var args = $.extend({
formSelector: 'form' }, params);
this.bind = function (model) {
// Apply KO bindings
ko.applyBindings(self);
};
this.submitForm = function () {
var form = $(args.formSelector);
form.validate();
if (form.valid()) {
var referenceNumber = $('#ReferenceNumber');
if (a==b) {
showConfirmation();
return false;
}
g_showWait("Please wait...");
return true;
}
return false;
}
}
I solved it by using the validate declaration notation rather than directly setting the validator settings but I don't know why. If anyone could explain I would be grateful (i'm sick of looking at it:))
errorPlacement was successfully overridden and working in both cases. submit knockout binding just didn't work.
Instead of overriding the errorPlacement function like this
$("form").each(function() {
var validator = $(this).data('validator');
if (typeof validator != 'undefined') {
validator.settings.errorPlacement = $.proxy(function(error, inputElement) {
//
// do stuff with the error object
//
}, $(this));
}
});
I changed it to this just try anything and it worked:
$("form").each(function () {
var validator = $(this).data('validator');
if (typeof validator != 'undefined') {
$(this).validate({
errorPlacement: $.proxy(function (error, inputElement) {
//
// do stuff with the error object
//
}, $(this));
}
});

Jquery TypeError: $ is not a function

I got this script:
<script>
$(document).ready(function () {
$('a[#href^= ""] img').parent().click(function () {
var linkz = $(this).attr("href");
if(linkz.toLowerCase().indexOf("http: //www.website.com") >= 0) {
window.open($(this).attr("href"));
return false;
} else {
window.open("http://www.website.com/p/img.html?img=" + $(this).attr("href "));
return false;
}
});
});
</script>
To open all images in a new page passing the image url in the new link. but i'm getting
TypeError: $ is not a function.
I've tried to add jQuery(document) instead of the $(document) but then i got the
$('a[#href^=""] img') TypeError: $ is not a function
here.
Either you didn't include jQuery, or else you ran noConflict() and it released control of $.
http://api.jquery.com/jQuery.noConflict/
If you used noConflict, you just need to use jQuery() throughout, including jQuery('a[#href^=""] img').
It looks like you're not including jQuery correctly as the browser doesn't know what $ is. Make sure you include something like this in <head> to include jQuery:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
you havent added the jquery add this at <head></head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
if you are testing locally , and you have a llow bandwith , then download the script one time **
http://code.jquery.com/jquery-1.9.1.min.js **to your folder and
use <script src="jquery-1.9.1.min.js"></script>
Try this;
<script language="JavaScript" type="text/javascript" src="jquery/jquery.js"></script>
<script>
jQuery.noConflict();
(function ($) {
function readyFn() {
// Set your code here!!
}
$(document).ready(readyFn);
})(jQuery);
</script>
Or in your case:
<script language="JavaScript" type="text/javascript" src="jquery/jquery.js"></script>
<script>
jQuery.noConflict();
(function ($) {
function readyFn() {
$('a[#href^= ""] img').parent().click(function () {
var linkz = $(this).attr("href");
if(linkz.toLowerCase().indexOf("http: //www.website.com") >= 0) {
window.open($(this).attr("href"));
return false;
} else {
window.open("http://www.website.com/p/img.html?img=" + $(this).attr("href"));
return false;
}
});
}
$(document).ready(readyFn);
})(jQuery);
</script>

Categories

Resources