jQuery variable name appended with a large number - javascript

I often see in my code I am loading from my company's media central that jQuery is not available in the console normally. (No $ and jQuery)
But sometimes, to those elements to which jQuery is attached, it has a long number with it.
jQuery18306575689211022109_1378907534666
What is the purpose of doing this? Security?
Also, jQuery is sometimes available directly in the console, but only with the above numbers.
I am therefore unable to debug my apps in console, where I need to query using jQuery.
However, in the JavaScript code, jQuery is perfectly being used as $ and jQuery. So I apply a break-point and export as window.jQuery = jQuery.
Is this a proper way to debug the app, when jQuery is obfuscated?
UPDATE:
For eg., check this URL the app is calling. It seems that the URL knows what is the number appended to jQuery. How do I come to know of the same number while debugging? Any lights on what is going on?

It's a callback id automatically generated by jQuery. See the documentation for jsonpCallback.
It is preferable to let jQuery generate a unique name as it'll make it easier to manage the requests and provide callbacks and error handling.

It seems that you are confusing two different variables. You can make a quick test on this website : http://www.jquery4u.com/function-demos/jsonp/#demo. Click "run demo", open Chrome's console, type "jQuery" in order to retrieve the callback's name, then perform this simple comparison :
jQuery16409391013463027775_1379048051365 === jQuery // false
That said, the fact that the variables named "$" and "jQuery" are not available in your case may be due to a specific implementation. One possibility could be the use of jQuery.noConflict() which allows either to customize the name used as a reference to jQuery, or to completely remove all references to jQuery from the global scope (window), so there is no way to access it in the console.

Related

Is there a Google app scripts function reference?

I was trying to create a function that takes a number of minutes and outputs it in a nice readable format. For instance, FORMATMINUTES(1570) would output 1d2h10m, but I got hung up trying to find a truncate function. I also had to change my lets to vars. Is there a reference that tells you what javascript features are available when writing custom functions?
To simplify I created two functions. First, the Math.trunc() function doesn't seem to exist as it doesn't show up as a suggestion and throws an error when used:
function MYTRUNC(input) {
return Math.trunc(input);
}
Second I thought that maybe I could use sheets's built-in TRUNC function, but that isn't defined either:
function MYTRUNC2(input) {
return TRUNC(input)
}
I read google's guide but it says "Custom functions are created using standard JavaScript" but not what version of javascript. Apparently it doesn't support let.
Their app scripts reference has a lot of information on interacting with sheets, but not a basic or complete reference. I realize that in this situation I can use Math.floor which is available or subtract input % 1, but I'd like to know what other idiosyncrasies there might be, and if I can use newer javascript features. Template literals give an error as well, so maybe it's based on an earlier javascript version?
The best reference I have found is from within the online Script Editor's debugger.
Make a breakpoint anywhere in any function. Then run that function with the bug button to start debugging. Next, click on the two buttons at the end of the tool bar: "Show inheritance" and "Show all data".
In the debugger, you should see a this with a "+" to expand it. Expand it and then expand [[prototype]] to see all the builtin App Script objects (GmailApp, etc), then find the next [[prototype]] below those to see the standard JavaScript objects such as Array, Math, Date, etc and you can inspect all of the functions that are available from there.

Rails/Javascript selectors won't find elements

I am in the process of installing the asset pipeline into an older rails app. I am getting some really strange results though. I can see that the page is rendering all of the css and the jquery that is in the app/assets directory but its having a hard time interacting with the html.
For instance if i inspect the page and in the console call $("html").html(); to try grab all the html it returns TypeError: Cannot call method 'html' of null same when trying to grab any element that is being rendered? but the page is there. if i call jQuery it will return fine. so its not like it jQuery isnt there.
$ is just a shorthand way of writing jQuery. If the latter works but the former doesn't, then another script in your pipeline is probably conflicting with jQuery and trying to use the $ symbol for something else.
Are you using any other plugins or libraries that might be trying to use $? Or have you accidentally overwritten it yourself by writing $ = (something) anywhere? Without more information it's hard to know where the problem is exactly.
If all else fails you can just stick to using jQuery() for all your calls. In your external script file you could also circumvent this by passing the jQuery object to a wrapper function, e.g.:
(function ($) {
$('div').append('You can use $ here without having to worry about conflict.');
}(jQuery))

Export Angular JQLite as $/jQuery

I occasionally find plugins that try to detect if JQuery is present, or might have 1-2 lines of code that uses $. I am wondering if it's possible to make Angular's JQLite available outside of angular apps somehow? My first tries of simply seeing if JQLite was available did not work. Basically I would like either the variable $ or jQuery to be available anywhere (or at least within my ng-app area) to see if it contains enough functionality to let these jquery plugins/code work.
Here's the source https://github.com/angular/angular.js/blob/master/src/jqLite.js
Actually, you can, but it almost certainly won't help.
If you wanted to "export" it, you'd simply need to add this after the Angular JavaScript is loaded:
window.jQuery = window.$ = angular.element;
Now calling $() or jQuery() will run jqLite. Here's why it most likely won't work: jqLite doesn't support selectors, meaning you can't do
angular.element('.foo').html();
You'll just get an error stating that Selectors not implemented.
Here's a jsFiddle showing it working when used on elements directly, but failing with the selector.
Edit
Based on Yashua's suggestion below, here's an update using his trick to enable selectors. It's a nice trick/hack if jqLite is good enough.
Personally, I don't agree that you should just include jQuery. It's another large library to depend on, and if you are only performing a couple of one-liners, you should be able to integrate them into Angular directly using proper directives. I'd take the time to see if you can rewrite the existing code.

Calling a function in a JavaScript file with Selenium IDE

So, I'm running these Selenium IDE tests against a site I'm working on. Everything about the tests themselves is running fine, except I would like to do a bit of clean-up once I'm done. In my MVC3 Razor based site, I have a JavaScript file with a function that gets a JsonResult from a Controller of mine. That Controller handles the database clean-up that Selenium IDE otherwise couldn't handle.
However, I'm having a hard time finding any sort of documentation on how to do this. I know I can do JavaScript{ myJavascriptGoesHere } as one of the Values for a line in the test, but I can't seem to find a way to tell it to go find my clean-up function.
Is it even possible for Selenium IDE to do this sort of thing?
If it comes down to it, I can just make a separate View to handle the clean-up, but I'd really like to avoid that if possible.
Thanks!
If you want to execute your own JavaScript function that exists in your test page from Selenium IDE, you need to make sure you access it via the window object. If you look at the reference for storeEval for instance, it says:
Note that, by default, the snippet will run in the context of the
"selenium" object itself, so this will refer to the Selenium object.
Use window to refer to the window of your application, e.g.
window.document.getElementById('foo')
So if you have your own function e.g. myFunc(). You need to refer to it as window.myFunc().
This can be very handy for exercising client-side validation without actually submitting the form, e.g. if you want to test a variety of invalid and valid form field values.
If you use runScript, that should already run in the window's context.
This works for me.
IJavaScriptExecutor js = driver as IJavaScriptExecutor;
string title = (string)js.ExecuteScript("myJavascriptGoesHere");
Make sure your javascript works first before using it here!
Actually to access your page javascript space, you need to get the real window of your page : this.browserbot.getUserWindow()
See this statement to get the jQuery entry point in your page (if it has jQuery of course ^^ )
https://stackoverflow.com/a/54887281/2143734

Is there a good way to prevent jQuery from being redefined?

I encountered a problem that took me some time to debug where a plug-in that I was using for jQuery (in this case jFeed) was not working. The problem ended up being because we also used Amazon Associates product previews. The product previews code ends up including a number of other JS files through document.write(), including another copy of jQuery. Because the product previews code appeared below the jFeed script, jQuery was redefined without the getFeed function.
Is there a best practice to ensure that certain objects like jQuery only get defined once on a page? I'm thinking of something like #ifndef with C/C++, but I don't know how it would work in this case where I didn't write the code that dynamically pulled in jQuery again.
I think in your situation, it would probably be best to redefine the jQuery variable as something else. The other jQuery code might use a different version so you might want to define a new variable which would indicate which jQuery you're using.
You could so something like this:
<script>
var $jMain = jQuery;
</script>
You would then just use the $jMain instead of jQuery or $. It'll be up to you to you to ensure you have the correct jQuery object when you do this. Here's the documentation.
Unfortunately the environment inside one JS sandbox (like within a window or frame of a browser) was not really designed to support the modern world of pulling in scripts from various places; there's no way you can say "define this object and make it resistant to redefinition". (You can even redefine most of the Javascript built-ins if you try!)
Your best shot is to make sure that your code is eval'd last, which gives you final say over the state of the environment when it runs. That doesn't mean other code can't come along later and clobber your definitions, but that's generally really bad form. You can do this by having your script tag be the last element in the body of the document, for example.
See also this jQuery method, which won't help you directly, but gets you thinking about some solutions to page sharing: http://api.jquery.com/jQuery.noConflict/

Categories

Resources