I have a .NET web control that includes some JavaScript structured something like this:
<script type="text/javascript">
function doSomethingImportant() {
// Do something important here...
}
$(function () {
// A bunch of JavaScript/jQuery code here...
});
</script>
The doSomethingImportant() function is placed outside of my $(function() { ... }) block so it can be called from JavaScript on the page that hosts my web control.
But I would like this function to be able to access some code within the $(function() { ... }) block. Is this possible? Is there a better way to structure this?
If you add a code on window object in the jquery function you can call it from the outer function.
e.g.
<script type="text/javascript">
function doSomethingImportant() {
// Do something important here...
window.myfunc();
}
$(function () {
// A bunch of JavaScript/jQuery code here...
window.myfunc = function(){
}
});
</script>
Related
I am using a fluid variable inside Javascript code in a Fluid Template. The code is:
<script type="text/javascript">
$(function () {
$('#{element.uniqueIdentifier}').datetimepicker();
/*Call AJAX*/
$('#{element.uniqueIdentifier}').change(function (event) {
.... //Other code lines
});
});
</script>
The HTML rendered is:
<script type="text/javascript">
$(function () {
$('#solicituddeAuditorios-repeatablecontainer-1_0_datetimepicker-2').datetimepicker();
/*Call AJAX*/
$('#{element.uniqueIdentifier}').change(function (event) {
.... //Other code lines
});
});
</script>
When render the first value is replaced correctly but the next not and generate a syntax error in javascript. I have tried to use a variable for save value but in that case none fluid variable is replaced; and using <![CDATA[ { ]]> generate other error where escaped the javascript and show only variable.
I am using TYPO3 8.7.
I do not understand what happend, because many times works differents solutions as plain fluid keys ({}) or <![CDATA. In this case the other alternative that works was used the f:format.raw fluid tag
<script type="text/javascript">
$(function () {
$('#solicituddeAuditorios-repeatablecontainer-1_0_datetimepicker-2').datetimepicker();
/*Call AJAX*/
$('#<f:format.raw>{element.uniqueIdentifier}</f:format.raw>').change(function (event) {
.... //Other code lines
});
});
</script>
I think you should wrap your code like this:
<script type="text/javascript">
<![CDATA[var myUniqueElementIdentifier = "#" + ]]>{element.uniqueIdentifier}<![CDATA[;]]>
$(function () {
$(myUniqueElementIdentifier).datetimepicker();
/*Call AJAX*/
$(myUniqueElementIdentifier).change(function (event) {
.... //Other code lines
});
});
</script>
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>
This question already has answers here:
jQuery - multiple $(document).ready ...?
(6 answers)
Closed 9 years ago.
I am using jquery and new to jquery. i have below the code in section as below.
<script type="text/javascript">
$(function () {
$(".lbCriterionStep3").click(function () {
//code
});
});
$(function () {
$(".lbCriterionStep4").click(function () {
//code
});
});
</script>
Is it proper to write like this? can function contain multiple $(function () ?
Thanks!
$(function() {
is actually the shortcut of calling the dom ready handler like:
$(document).ready(function() {
and hence, you need to call it once per page like:
$(function () {
$(".lbCriterionStep3").click(function () {
//code
});
$(".lbCriterionStep4").click(function () {
//code
});
});
For more information read .ready() API documentation
or you could just call other functions in your function, so that those will be reusable (u can use them somewhere else too).
use $(function(){ }); ready event handler only once and write all other event handler function for html element inside that however your way wil not result in any error but make code huge.
So, use like this
<script type="text/javascript">
$(function () {
$(".lbCriterionStep3").click(function () {
//code
});
$(".lbCriterionStep4").click(function () {
//code
});
});
</script>
I want to set a cookie value when user clicks on a link.
I am using the following code:
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="../../Scripts/jquery.cookie.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
function changeLang(lang) {
$.cookie('myCulture', lang);
window.location.reload();
return false;
}
});
</script>
HTML
<img src="../../Content/images/danishFlag.png" height="35px" width="35px"/>
<img src="../../Content/images/swedishFlag.png" height="35px" width="35px"/>
It looks like very simple code, but when I click on the link, there is an error in the browser.
It says.
ReferenceError: changeLang is not defined
changeLang("da-DK");
Where am I doing wrong??
you are defining the function inside the document ready scope, so it's not global therefore not available in the global scope
define it as a global simply by removing the var declaration or using window.changeLang = function
$(document).ready(function () {
changeLang = function(lang) {
document.cookie = 'myCulture' + lang;
window.location.reload();
return false;
}
});
define function outside of the jquery block
$(document).ready(function () {
});
function changeLang(lang) {
$.cookie('myCulture', lang);
window.location.reload();
return false;
}
Try moving the ChangeLang function to outside of the Document Ready section.
Also, if running in FireFox with Firebug you can experiment with executing the function directly from the Console.
Good luck
Please do not attach js functions in html like this.
You're using jquery so just do this:
$(document).ready(function () {
function changeLang() {
$.cookie('myCulture', $(this).data('lang'));
window.location.reload();
return false;
}
$('.link').on('click', changeLang);
});
and then in html:
...
$(document).ready(function () {
});
function changeLang(lang) {
document.cookie = 'myCulture=' + lang;
window.location.reload();
return false;
}
This will work for you.
I am trying to pass the elements "event" into a JavaScript function click using jQuery.
INLINE:
This is easy when doing it directly (inline).
Click Me
USING JQUERY:
But how do you do it using jQuery?
<script type="text/javascript">
<!--
function ToggleMinimize(title, e)
{
// ...various execution code would be here ... //
}
jQuery(window).load(function() {
// How do I "get at" the "event" object for the element & pass it into the function definition?
jQuery(".chatDialog-toggle-button").bind('click', ToggleMinimize);
})
-->
</script>
Thanking you ahead of time!
Following on from what a lot of the other guys have shown regarding passing data to an event function, there is a specific method for this, you can pass a full object map this way per bind.
Also bare in mind that jQuery normalises the event object before you receive it, so it is a little different, see: http://api.jquery.com/category/events/event-object/
function ToggleMinimize(e) {
// ...various execution code would be here ... //
// e.data contains the data object map
// e.data.msg == "Hello World"
}
jQuery(window).load(function() {
jQuery(".chatDialog-toggle-button").bind('click', {'msg': "Hello World"}, ToggleMinimize);
});
You don't have to, it's already the first agument, like this:
function ToggleMinimize(e) {
// ...various execution code would be here ... //
}
jQuery(window).load(function() {
jQuery(".chatDialog-toggle-button").bind('click', ToggleMinimize);
});
If you want to also pass a title, then use an anonymous function, like this:
function ToggleMinimize(title, e) {
// ...various execution code would be here ... //
}
jQuery(window).load(function() {
jQuery(".chatDialog-toggle-button").click(function(e) {
ToggleMinimize("some title", e);
});
});
Personally I'd use a data attribute, like this:
Click Me
Then access it like this:
function ToggleMinimize(e) {
var title = jQuery(this).data("title");
}
jQuery(window).load(function() {
jQuery(".chatDialog-toggle-button").click(ToggleMinimize);
});
You can send an anonymous function which executs ToggleMinimize():
jQuery(window).load(function() {
jQuery(".chatDialog-toggle-button").bind('click', function(e) {
ToggleMinimize( "Hello World", e);
});
})
or you can have ToggleMinimize return a function, so you can pass Hello World into it.
function ToggleMinimize(title) {
return function(e){ alert(title); alert(e.target); }
}
jQuery(window).load(function() {
jQuery(".chatDialog-toggle-button").bind('click', ToggleMinimize( "Hello World") );
})
You can do it this way:
$(document).ready(function() {
$('.chatDialog-toggle-button').bind('click', function(event) {
ToggleMinimize(event);
});
});