Can't locate a hiding JavaScript function - javascript

I have a weird one here. I am working on a JSF2 (Java) based system using Primefaces component library (not sure its relevancy), and I have a number of buttons that execute a JavaScript function called checkParams() on a onclick event. I need to edit this function to reivew its code and adapt it to some newly added components but I cannot for the life of me actually find the JavaScript function. I am working in NetBeans & I have performed a project search for this function and the only search results returned are the button references to this component. Similarly I have done a search for the function in Google Chrome's developer console, which again only returned the button references. I have also tried creating a quick dirty function that calls an alert(checkParams()); on the body load, but Chromes console tells me the function is undefined.
However the buttons work perfectly, checking various input boxes and submitting the information to the backing Java files...
Does anyone have any idea where this function may be hiding or how I can locate it?

It might be contained in a JavaScript Closure in a script file that is executed and then removed from the DOM. It would be a neat trick to 'hide' it a little bit. But, that is only if the checkParams() in the onclick is not in the onclick attribute. It would have to be assigned in JavaScript.
If this is the case, you would want to see what scripts are loaded initially, and look through those. Also, this is a lot of effort to hide a function for your own site unless you're trying to make sure people don't see how you are validating your parameters. There are ways to obfuscate it to assign the function without having it defined by name directly in the file, but, again, that is a lot of effort.
Outside of the above, I'm not sure there is a lot I can say for finding it. But I'm not sure that this is actually the case. One thing to note is that alert(checkParams()) will alert the return value, which means the function could be defined. Try running alert ( typeof ( checkParams ) ) instead. If that is undefined, than your function doesn't exist. If its not, you can also do console.log(checkParams) which should output the toString() of the function, which will often show you the code.

Related

How can I wait for the create/edit entity modal window to finish rendering and execute my custom js code in 2sxc module?

When user presses either create entity button or edit entity button, there's the same modal window in an iframe that is build by js dynamically. So what I'm trying to do is to wait until it's fully rendered and then execute my custom js code. So is there a proper way to do that? Some sort of event like RenderFinished shooting or something? Don't want to use timeout since I understand that it's not a good way to do that.
What I tried so far is that I've added jquery to the page programmatically, since it's not used currently at that particular page for some reason (probably because iframe is built dynamically without jquery and I needed to add it myself).
After that I tried to access iframe via jquery selector and then on iframe.ready access element inside in the same manner (selector and even ready for that element). But iframe is accessed and element inside it is not. Console log inside ready function just outputs no elements found. When I placed breakpoint inside I saw that there's no modal window built yet and my code is executed synchronously before it. So there's nothing to find yet at that moment.
Oh and I tried to put it all inside $(document).ready, of course. But it didn't change the situation neither...
Any ideas about how to do that properly?
The final goal why am I doing all this complicated dancing: I'm trying to add validation that UrlKey for entity is unique. So I want to bind my js function to UrlKey input's onchange event and call backend api to do the validation and return new UrlKey if it wasn't unique and edit the UrlKey input accordingly. The problem that I stumbled upon is to execute my code after modal iframe window is rendered.
Any tips are highly appreciated.
You are in luck :)
2sxc added a Formula feature which will help you with this. There are videos and tutorials and more. See http://r.2sxc.org/formulas

Loop variables setting on localhost, but not on live site

I'll start off by saying that as an avid browser (but having never posted), thanks in advance for any insight.
I am making a page for my employers code department, which needs to use dynamic dropdowns, since the amount of dropdowns fluctuates per page.
Context:
Originally we were using standard Bootstrap dropdowns, but some of the web providers our clients deal with aren't loading in bootstrap. My initial thought was to side-load it in, however, we work on templates that must work across the board for all of our clients and all of their web providers. Long story short, there were stability issues with bootstrap CSS files overriding various websites that weren't built with bootstrap in mind.
Onto the problem:
Here is my CodePen for you to view.
dropdown = () => {
const dropdown = document.getElementsByClassName("dropdown");
for (let i = 0; i < dropdown.length; i++) {
const activeDropdown = dropdown[i].id,
down = "#downChev-" + activeDropdown,
up = "#upChev-" + activeDropdown,
downIcon = document.querySelector(down),
upIcon = document.querySelector(up),
dropdownNumID = "#" + activeDropdown,
dropdownID = "#dropdown-" + activeDropdown;
if (event.target.matches(dropdownNumID)) {
if (upIcon.classList.contains("show-icon")) {
upIcon.classList.remove("show-icon");
downIcon.classList.add("show-icon");
} else if (downIcon.classList.contains("show-icon")) {
downIcon.classList.remove("show-icon");
upIcon.classList.add("show-icon");
}
document.querySelector(dropdownID).classList.toggle("dropdown-show")
}
}
}
Currently I've built out a dynamic dropdown system that utilizes ID's specific to each dropdown. The problem is that in the first loop that goes through the dropdowns to create the supporting variables, it doesn't create the activeDropdown variable and instead returns a blank variable when logged.
I've troubleshooted in multiple scenarios and have come up with the following:
On localhost and in the CodePen, the code seems to work fine. Once added to the live sites, it breaks at initializing the activeDropdown variable within the loop, returning a blank variable when logged.
If I remove the if condition right after the variables are set in the loop, and log the activeDropdown variable. It logs fine. This leads me to believe that it may be a synch issue. I then turned the if condition into its own function and added a settimeout, allowing the variables to be initialized prior to running the execution items within the new delayed function. Once that was added, the activeDropdown variable was no longer setting properly. It just returns blank when logged.
I'm not sure if my logic of execution is off, or if I've overcomplicated the entire thing. The only real goal here is to make a dynamic structure that allows my front-end dev team to add or remove model divs at will, with a simple modification to the ID's as the list grows.
It's also possible that other scripts that we don't have access to are creating the issue on the live site. However, I assume you guys will be able to find something wrong with my code lol.
It's difficult to know what's going on since your production environment is likely very different from the code pen, but I think a couple things could be happening.
1) Could be that the JavaScript is running before the entire page has loaded. Make sure your JavaScript code that is equivalent to the CodePen is loaded last on the page. (i.e. put the <script></script> tag at the very end of the document).
2) Some variables could be conflicting, since you are loading the JavaScript directly in the body of the document in the global scope. I have some general stylistic recommendations that may help you solve your problem:
From looking at your CodePen, you're using two different methods to react to click events: You have setup an event listeners with a callback on window.onclick, as well as 2) a function called dropdown that you are attaching to an onclick attribute in the HTML.
I would recommend staying away from the inline onclick attributes, and instead added an event listener to the container of the dropdown. That way your markup is not coupled to the dropdown JS, and you are listening to clicks within that container and not the whole application. You can use the same event listener for opening the dropdowns and closing dropdowns. See this stackoverflow post for more information about this.
In addition, I recommend adding a wrapping function around your code to prevent you from polluting the global scope. This function can be immediately invoked when the page loads, and will add the event listener on the container. You can read more about IIFE's here.
Here a CodePen demonstrating these two recommendations. While I don't know if this will help you solve your problem, hopefully at least you'll learn something new!

Javascript function not being called in Adobe Acrobat

I have a PDF form that, until yesterday, was calling nested functions without problem. Then late yesterday, I noticed that all calls to functions outside of the initial command (onClick, etc.) weren't getting called.
For example, I have a checkbox that has the following in its MouseUp Action -> Run Javascript:
app.alert("I was just clicked...");
This works fine, the alert dialog box pops up and gives me the alert. But when I create a document-level JavaScript function as follows:
function fAlert() {
app.alert("I just got clicked...");
}
and then call it from the MouseUp Action -> Run Javascript:
fAlert();
nothing happens. I checked Acrobat's settings to see if something accidently got toggled and I couldn't find anything.
All functions that were previously working and signed off by the developer are now non-functional. Something seems to have changed in the Acrobat Environment itself, but I can not figure out what.
Any help?
I went back to a previously-saved version and the functions all work fine (those that were completed and signed off, anyway...). So it's not a preference or setting within Acrobat itself.
My only conclusion is that somehow the XML tags in the Acrobat script itself got changed. This is why Adobe tells you don't change any of the XML tags.
I will have to go back and start over from the last known good version and catch up. I can only conclude that this happened while I was using an external JavaScript editor. Sometimes, if you aren't careful in saving your work immediately and then go try to edit a different script, the editor will puke on you and overwrite the previously-worked on script with the new one.

"Next" button does not cycle through answers as expected

I'm trying to build a very basic, pure JavaScript app (no jQuery).
Using jQuery I feel like I'd be able to do this easily. But JavaScript not so much.
Here is my JSF app:
http://jsfiddle.net/abustamam/CLenJ/2/
So the purpose is for the question and its accompanying answers to be cycled through when the "Next" button is pressed.
Problem is, nothing happens when "next" is pressed. Even if I set the next() function to be something like
function next() {
alert("pressed!");
}
nothing happens.
At the suggestion of another question, I changed the "onLoad" into No wrap - in head.
At this point, the question and values are not initially loaded.
On looking at the console errors, it seems like the load order plays a big difference on whether or not the button works, or whether or not the first question will load, but I can't find a way to get them both work concurrently.
Can someone shed some light? Thanks!
In the fiddle, your script was under the load callback which means the next method is inside a closure so it is not available in the global scope.
If you look at the browser console you could see a script error saying Uncaught ReferenceError: next is not defined
In the left hand side panel in the second dropdown under Frameworks and Extensions select No Wrap - In Body
Demo: Fiddle

Cannot call a user defined JS function after return the AJAX content

I am having a problem of calling the user defined JS function after I make the AJAX call. Basically, I created couple radio buttons on the main html page. When the user clicks on one of the radio button, it will trigger the AJAX call and return another html file in the "div" content that I set in the main html page. The other html file contains a user defined JS function (e.g. "updateContent()") which use the onclick event handler to call the function. When I'm running the app, and click on the button. I had seen the firebug was complaining the "updateContent() is not defined" error. The function itself works fine and must be defined properly. Please help me about this! Thanks.
The magic Google words here are "JSON-P" and the "On Demand Javascript" pattern. Basically, instead of loading a chunk, you create and load a tag. Then the javascript gets interpreted, your function is defined, the nail is found, the horse is shod and the kingdom is not lost.
This is because the js code you insert via innerHTML never will be executed. You might need to extract it from the HTML code run it through eval.
PrototypeJS have a configuration option to do this automatically.
I would recommend you to separate out the js code and include it with the rest of your js code.

Categories

Resources