I am trying to make a button which acts as a switch, enabling the visibility of a panel.
I am running a client side script when the onClick event fires, which is the following:
function {
if(app.datasources.global.item.hideshow===false)
{
*does one thing*
}
else if(app.datasources.global.item.hideshow===true)
{
*does another*
}
}
My problem is, that the global (which is the datasource).item seems to be a null according to the console error log. It seems like i am trying to access one property of a record from a database, but I would like to access and edit a property which is not attached to any database, it would be just a "global variable".
Maybe I haven't phrased it too well, but I hope somebody can help me out with this. Thank you in advance.
There are a few ways you could do this. This link may help ontoggle Event.
Another way I could see doing this would be using local storage.
You can use a custom property for that. So in the page where you want to toggle the panel, create a custom property and perhaps call it panelVisibility. Then you can use the following logic on the onclick event handler of the button:
var visible = widget.root.properties.panelVisibility || false;
if(visible){
//do someting
} else {
//do other thing
}
widget.root.properties.panelVisiblity = !visible;
Related
I'm trying to access Click event related variables in custom javascript.
Click event variables should be so called built-in variables but still it states unknown.
I'm using following syntax which is supposed to get ID of clicked link and return social media action per ID:
function() {
var some = {{Click ID}};
if (some == "tw")
return 'tweet';
else
return 'share';
}
EDIT: For me it looks like I'm using variables just like on this page http://www.apasters.com/blog/google-tag-manager-custom-javascript-variable-examples/ but what is the problem?
You need to make sure that you have enabled/activated the built-in variables before you use them, otherwise you get that error message.
A picture is worth a 1000 words:
As you can see from the picture above the form has a onsubmit event. But when I try to reference the onsubmit even it's telling me it's null.
The reason I'm asking this question is because I'm trying to clear the onsubmit event:
doc.getElementById("frmMaster").onsubmit = null;
Which is not working.
What am I doing wrong here?
I was able to work around the issue yesterday. After browsing the object hierarchy using chrome developer tools i noticed the object had a "onsubmit" attribute but the "onsubmit" property was already null. So:
doc.getElementById("frmMaster").removeAttribute("onsubmit");
successfully removed the event. I admit i don't totally grasp the difference between the event as a property or as an attribute but at least it resolved the issue.
I believe to unregister events you must use removeEventListener('event', boundFunction). A problem that arises from the code you have is that WebForm_OnSubmit may not be defined at a place accessible to you. What you will need to do is get that function into a context you can access from the console (or wherever you ultimately want to call this code). So you can essentially do this:
/*
somewhere in your server code, or wherever this WebForm_OnSubmit is defined
var handleToWebForm_OnSubmit = WebForm_OnSubmit; //must be global scope
// you will need to get a reference in javascript to this function
// and bind it so that you can willingly unbind it
*/
doc.getElementById("frmMaster").removeEventListener('submit', handleToWebForm_OnSubmit)
I am trying to display a div on click. The function that is supposed to make the magic happen is:
$(document).ready(function showGogoasa() {
$('.gogoasa-newsletter').show();
});
Unfortunately, it does nothing. Which makes me scratch my head for hours as I have done small things like this in the past and they worked. I am trying to make this modification on the website of a client.
When I check the firebug console it says the following: ReferenceError: showGogoasa is not defined
I tried looking on Google for this kind of error but the similar cases had this kind of issue for not declaring a variable. Well, I do not have any variables.
I am trying to display a div on click.
Your code is running the function on a ready event and doesn't give the error you describe.
Presumably (it would have helped if you had provided a complete test case) you are also trying to bind the function as a click handler, but you can't do that because you have defined it using a function expression and not a function declaration (so it doesn't create a variable called showGogoasa outside of its own scope).
Define the function separately, then assign call it and bind it as a click event handler on the ready event.
$(document).ready(function ready_handler() {
function showGogoasa() { // Define it as a variable in the current scope
$('.gogoasa-newsletter').show();
}
showGogoasa(); // call it now
$("button").on("click", showGogoasa); // call it then
});
Well, I do not have any variables.
That's the problem :)
Functions are first class objects and when you say showGogoasa() that means "Get the value of showGogoasa and call it as a function".
Using jsfiddle or providing more code would have been helpful.
One issue is that you are missing the click event handler. For example when the user clicks on X then Y should happen/show. The following simple example may help you to see how it works:
http://jsfiddle.net/fionaredmond/1vbagj12/
$(document).ready(function(){
$("#showGogoasa").click(function(){
$(".gogoasa-newsletter").show();
});
});
$(document).ready(function() {
$('#idOfYourClickerElement').on('click', function(){
$('.gogoasa-newsletter').show();
});
});
I need to call "MyOtherFunction" when "MyFunction"(which creates an element) completes, without MyFunction knowing what MyOtherFunction is.
The reason I need this is for extension of a jquery powered fileupload User Control that is used in several places with different functionality. A specific page shows a header and file count for it, and when the upload completes, I need to modify the file count according to how many files are displayed(by created elements) I thought :
$(UserControl).on(MyFunction, UploadElem, MyOtherFunction);
but this route is not accomplishing anything. The most I can alter the User Control is add in a function call, but without effecting the original user control functionality.
I'm not sure if because MyFunction isn't an event and doesn't bubble up or if it just isn't possible to use a defined function as a parameter of .on() is the reason I cannot get this code to work. Any suggestions?
Easiest way I can think of, is duck punching respectively hooking that method:
var _oldMyFunction = MyFunction;
MyFunction = function() {
_oldMyFunction.apply( this, arguments );
MyOtherFunction();
};
I managed to solve my own issue, but the context is important for the answer:
// Using a Global JavaScript object I created:
GlobalNameSpace.ExtensionFunction = function(oParam1, oParam2, oParam3)
{
/// <summary>All parameters are optional</summary>
return; // For instances when it is not being overwritten, simply return
}
//In the Code for the user control:
GlobalNameSpace.UploadControl.UploadComplete(oSender, oArgs)
{
///<summary>Handles the Upload process</summary>
// process the upload
GlobalNameSpace.ExtensionFunction(oSender, oArgs);
}
//and finally in the code to extend the functionality
GlobalNameSpace.Page.Init
{
///<summary>Initializes the page</summary>
// redefine the extension function
GlobalNameSpace.ExtensionFunction = function(oSender, oArgs)
{
GlobalNameSpace.Page.Function(oSender, oArgs);
}
}
This allows me to extend anything I need it to without polluting my objects, and having something generic already existing to call on to make my changes. This solution solves my problem of needing a onCreate function for the elements I create to represent my uploaded items to trigger the header displaying the number of files. Very useful
I can set the onclick handler using jQuery by calling
$('#id').click(function(){
console.log('click!');
});
Also using jQuery, how can I get a reference to the function which is currently handling the click() event?
The reason is that I have another object and want to set its click handler to the same one as #id.
Update
Thank you for all the suggestions. The problem is that I do not know which function is currently handling the clicks. Keeping track of it would add state to an already complicated template-editing system.
jQuery's .click(function) method adds the function to a queue that is executed on the click event~
So actually pulling out a reference to the given function would probably be hairy-er than you expect.
As noted by others, it would be better to pass in a reference to the function; and then you already have the reference you need.
var clicky = function () { /* do stuff */ };
$('#id').click(clicky);
// Do other stuff with clicky
Update
If you really really need to get it out, try this:
jQuery._data(document.getElementById('id')).events.click[0].handler
Depending on your version of jQuery that may or may not work~ Try playing around with
jQuery._data(document.getElementById('id'))
and see what you get.
Got the idea from this section of the source:
https://github.com/jquery/jquery/blob/master/src/event.js#LC36
if you dont know the name of the function you can use
args.callee
https://developer.mozilla.org/en/JavaScript/Reference/Functions_and_function_scope/arguments/callee
function clickHandle(e){
if($(e.target) == $('#id')) {
$(newTarget).bind('click', clickHandle);
}
}
$('#id').bind('click',clickHandle);
I think this would be the most symantic way of going about it