returns [object DOMWindow] instead of user input - javascript

ive been writing a website for about 3 days and i ran into a problem. i have a textfield that changes a span on the page using javascript, and this works fine on firefox and ie. but on google chrome it just returns "[object DOMWindow]" no mater what i change. the code is way to long to post so i would just like to ask if anyone knows what causes this?

My best guess without seeing code would be you're using the this keyword, which behaves differently in different browsers. this refers to the window element any time that it is not in a different context. Check to make sure you are either using a library that normalizes the this keyword (like jQuery) or are explicitly getting the text field every time.

Related

Why does the value attribute from an input[text] is different from what the browser renders?

I'm getting this strange behaviour in a very specific set of inputs on one my applications. I create some inputs and I can see them as I created them on the Elements panel (google chrome), but the way the browser renders it is different.
Note how the input is renders with comma instead of a point, but the value attribute uses a point
When I get a referente to that element using the selector API, I get this:
A direct reference to the Dom Element will return 11,00. The tag has 11.00 and jQuery returns the 11,00. I've removed all js that interacts with this element (masks, events, etc) and the issue still happens.
I've been swearing at the DOM for a day and a half, but I know this is most probably an issue with my application. What bothers me the most is that the browser does not honor what I see in the elements panel.
This is the small piece of code that creates the element, stopped right before the tag is created. Note the variables values in the right panel:
Could someone give me a hint about what could be causing this difference in between element, view and attributes? If possible, I'd like to know what/how this is happening in depth.
Thank you in advance

How did I lose JavaScript built-in objects and all global variables?

I'm working on an Umbraco site that needs to work in the big browsers, including IE 11, and I've run into a weird issue that I can only replicate on IE 11.
At some point, the script for a TinyMCE plug-in tries to execute this code (about four calls deep) in response to a blur event:
function classTest(cls) { return new RegExp("(^|\\s)" + cls + "(?:$|\\s)\\s*"); }
and it throws a "Object doesn't support this action" exception when trying to create the RegExp object. cls is defined and has the value I expect.
While paused (using Visual Studio debugger) on the unhandled exception, I did a little checking.
It turns out that RegExp was undefined. I found this extremely weird.
A little more investigation revealed that ALL the built-in objects were undefined. Number, Array, Object, Math... all of them. Also, while I could enumerate the global keys, all the values were also undefined.
Weirder, I could use the console or immediate-execution windows, within the problematic scope, to create regular expression objects by using the /pattern/ syntax.
But this condition is true only in the scope of the event handler. As soon as the event handler exits, all the built-in objects and global variable values were restored.
How is it even possible to lose access to the built-in JavaScript objects, without losing access to the basic JavaScript parser and engine?
And, once lost, is it possible to restore them?
I experienced this problem as well, and assuming you're also having trouble with the TinyMCE CodeMirror plugin, the problem is triggered by this line in codemirror.js:
on(window, "blur", function () { return forEachCodeMirror(onBlur); })
where window refers to the iframe containing the CodeMirror editor.
This iframe is inside of a TinyMCE dialog. I've discovered the error only occurs when the iframe (or an element inside it) loses focus at the same time that the dialog is closed, removing the iframe from the DOM. You can test this by first clicking outside the iframe (on the page overlay, for example) before closing the dialog.
IE11 seems to be calling the blur event after it has started destructing the iframe's window object. I would classify this as a bug in IE11, which will never get fixed. Since we probably don't care about the blur event in an iframe that's being removed from the DOM, we can work around the problem by modifying the problem line to skip it in that case:
on(window, "blur", function () { if (window.RegExp) return forEachCodeMirror(onBlur); })

Any way in Chrome Developer tools to trace what changes the value in an object?

I'm working in JavaScript and something is mysteriously changing the value inside of one of my objects.
It is most certainly nothing that I've coded myself - it's very likely a 3rd party package, and a very very complicated one at that.
Is there some way to have Chrome Developer keep track of the value of something inside of an object and, once it changes, alert the user as to what function in the code caused it to change?

Can't disable (set to read-only, protect, gray-out etc.) a field

I've run this code:
Xrm.Page.data.entity.attributes.get("subject").setValue("Beep");;
alert(Xrm.Page.ui.controls.get("subject").setDisabled);
Xrm.Page.ui.controls.get("subject").setDisabled(true);
As expected, I get the text Beep into the field. As expected, the alert tells me the contents of the method (and as far I can tell, they're doing what they're supposed to).
However, the Control itself doesn't get disabled. What am I doing wrong?
I believe that I saw one example of different approach (something more between get and setDisabled but after a few hours of googling, I'm starting to conclude that I must've been halucinating or wish-thinking.
Your code is correct, so it should be working. The syntax used by #Daryl is correct to. Those two lines are equivalent. The shorter one is just syntactic sugar shortening the other. So, you should use his.
Xrm.Page.ui.controls.get("subject").setDisabled(true);
Xrm.Page.getControl("subject).setDisabled(true);
If you're alerting out and getting the contents of the method, it means that you're hitting the right component and the correct method. Yet, so say that despite the call, the control doesn't get disabled. I think you're wrong.
Here's what I think happens. The control gets disabled, then, before you have time to notice it, the form get updated, rendering away your disable operation.
Keep in mind that unlike the field data, the property of being disabled doesn't get stored to the database. If you design a field as protected, it'll stay that way. But if you set such a property from the JavaScript code on the client-side, the appearance is only going to last until a reload of the page is performed.
So, if you need to keep the fields disabled, either make them so from the GUI designer or fire an onLoad method doing it for you.
I use the getControl function and it works fine. should be in the form:
Xrm.Page.getControl(controlId).setDisabled(disabled);
And remember, disabled controls will not be updated unless you set the submit mode to "always".

How to copy watched javascript variable in Chrome?

I put a breakpoint in javascript and am testing some code with Chrome. I also added a watch expression for the value.
Chrome breaks at the breakpoint and shows the value. However the value is very long, and it doesn't display it all. I move the window separator to the left but it stops at mid screen. When I double click on the watched variable it wants to edit the expression. When I single click and drag on it, it selects the visible text, but not all. Right clicking does nothing.
This is what I see
url: "m=mtgoxUSD&SubmitButton=Draw&r=&i=&c=0&s=&e=&Prev=&Next=&t=S&b=&a1=&m1=10&a2=&m2=25&x=0...
I want to copy the whole expression without the ... in the end. How can I do that?
I'm adding a late answer after nearly 3 years because with the current Chrome Dev Tools, neither approach work if you have an Array or even just a nested Object property in that variable, following both answers you'll just end up copying a string with a lot of Array[size] or Object strings interleaved in the actual object value, completely useless for complex object hierarchies.
The suggested approaches are ok if you just need to manually navigate through the value but not if you need to copy it as requested in the question.
What i recommend instead, especially if you need to copy the watched value to use it as the content of a new variable, is to dump it to console after it has been stringified.
Show the Javascript console and type:
console.log(JSON.stringify(my_watched_var))
This way the complete structure will be displayed in pure Javascript, a fully reusable/copyable way.
Chrome DevTools' console command-line has a built-in "copy" function:
copy(my_variable)
If the value of my_variable is not a string, it will automatically be converted to JSON. The resulting string is left on the system clipboard for pasting.
Here's the reference doc.
Show the console, then type the expression to be displayed and press . You'll see whole value and you'll be able to select and copy it.
While the debugger is paused, this works even with expressions that involve local variables that are in scope at the current point of execution.
Here's what I do.
Edit: This works in the Scope Variables which is below the Watch Expressions panel.
Double click on the value to switch to edit mode.
Ctrl+A (windows) or Cmd+A (mac) to select the entire value.
Ctrl+C (or Cmd+C) to copy.
Look this answer "Is there a way to auto expand objects in Chrome Dev Tools?" , it iterates trough all the properties of an object and it shows the full hierarchy including datatype and values.
Useful if you need to compare two states of an application.
This link has amazing descripion: https://scottwhittaker.net/chrome-devtools/2016/02/29/chrome-devtools-copy-object.html
Steps:
1) Right click variable and select "Add as Global Variable"
2) In the console, write copy(temp1)
3) Open any editor and paste

Categories