Develop Reference

Why does jquery return different values than the values submitted?

Update:
Please see the answer noted below as, ultimately, the problem had nothing to do with jsquery.
=============
Issue:
I submit an object to jquery to convert into a serialized string that will become part of a "POST" request to a server, and the data returned from the serialization request is different than the data sent on many occasions.
An example:
The JavaScript code that implements the server POST request:
function send_data(gpg_data) {
var query_string;
query_string = '?' + $.param(gpg_data, traditional = true);
console.log('gpg_data =', gpg_data)
console.log('query_string =', query_string);
$.post(server_address + query_string);
return;
}
This is the structure sent to the jquery param() function.
(copied from the browser console in developer mode.)
gpg_data =
{controller_status: 'Connected', motion_state: 'Stopped', angle_dir: 'Stopped', time_stamp: 21442, x_axis: 0, …}
angle_dir: "Stopped"
controller_status: "Connected"
force: 0
head_enable: 0
head_x_axis: 0
head_y_axis: 0
motion_state: "Stopped"
time_stamp: 21490
trigger_1: 0
trigger_2: 0
x_axis: 0
y_axis: "0.00"
. . . and the returned "query string" was:
query_string = ?controller_status=Connected&motion_state=Stopped&angle_dir=Stopped&time_stamp=21282&x_axis=0&y_axis=0.00&head_x_axis=0&head_y_axis=0&force=0&trigger_1=1&trigger_2=1&head_enable=0
The data received by the server is:
ImmutableMultiDict([('controller_status', 'Connected'), ('motion_state', 'Stopped'), ('angle_dir', 'Stopped'), ('time_stamp', '21282'), ('x_axis', '0'), ('y_axis', '0.00'), ('head_x_axis', '0'), ('head_y_axis', '0'), ('force', '0'), ('trigger_1', '1'), ('trigger_2', '1'), ('head_enable', '0')])
For example, note that "trigger_1" returns 1 when the data sent to it is a zero.
I have tried setting the query to "traditional = true" to revert to an earlier style of query handling as some articles suggested - which did not work.  I tried this with jquery 3.2 and 3.6.
I am not sure exactly how jquery manages to munge the data so I have no idea where to look.
I have looked at my script and at the unpacked jquery code, and I can make no sense out of why or how it does what it does.
Any help understanding this would be appreciated.
P.S.
web searches on "troubleshooting jquery" returned very complex replies that had more to do with editing e-commerce web pages with fancy buttons and logins than with simply serializing data.
P.P.S.
I am tempted to just chuck the jquery and write my own serialization routine. (grrrr!)
===================
Update:
As requested, a link to the browser-side context.
To run: unpack the zip file in a folder somewhere and attach an analog joystick/gamepad to any USB port, then launch index.html in a local browser.  Note that a purely digital gamepad - with buttons only or with a joystick that acts like four buttons - won't work.
You will want to try moving joystick axes 1 and 2, (programmatically axes 0 and 1) and use the first (0th) trigger button.
You will get a zillion CORS errors and it will complain bitterly that it cannot reach the server, but the server side context requires a GoPiGo-3 robot running GoPiGo O/S 3.0.1, so I did not include it.
Note: This does not work in Firefox as Firefox absolutely requires a "secure context" to use the Gamepad API.  It does work in the current version of Chrome, (Version 97.0.4692.99 (Official Build) (64-bit)), but throws warnings about requiring a secure context.
Please also note that I have made every attempt I know how to try to troubleshoot the offending JavaScript, but trying to debug code that depends on real-time event handling in a browser is something I have not figured out how to do - despite continuous searching and efforts.  Any advice on how to do this would be appreciated!
======================
Update:
Researching debugging JavaScript in Chrome disclosed an interesting tidbit:
Including the line // #ts-check as the first line in the JavaScript code turns on additional "linting" (?) or other checks that, (mostly) were a question of adding "var" to the beginning of variable declarations.
However. . . .
There was one comment it made:
gopigo3_joystick.x_axis = Number.parseFloat((jsdata.axes[0]).toFixed(2));
gopigo3_joystick.y_axis = Number.parseFloat(jsdata.axes[1]).toFixed(2);
I could not assign gopigo3_joystick.y_axis to a string object, (or something like that), and I was scratching my head - that was one of the pesky problems I was trying to solve!
If you look closely at that second line, you will notice I forgot a pair of parenthesis, and that second line should look like this:
gopigo3_joystick.y_axis = Number.parseFloat((jsdata.axes[1]).toFixed(2));
Problem solved - at least with respect to that problem.

I figured it out and it had nothing to do with jquery.
Apparently two things are true:
The state of the gpg_data object's structure is "computed", (snapshot taken), the first time the JavaScript engine sees the structure and that is the state that is saved, (even though the value may change later on). In other words, that value is likely totally bogus.
Note: This may only be true for Chrome. Previous experiments with Firefox showed that these structures were updated each time they were encountered and the values seen in the console were valid. Since Firefox now absolutely requires a secure context to use the gamepad API, I could not use Firefox for debugging.
I was trying to be "too clever". Given the following code snippet:
function is_something_happening(old_time, gopigo3_joystick) {
if (gopigo3_joystick.trigger_1 == 1 || gopigo3_joystick.head_enable == 1) {
if (old_time != Number.parseFloat((gopigo3_joystick.time_stamp).toFixed(0))) {
send_data(gopigo3_joystick)
old_time = gopigo3_joystick.time_stamp
}
}
return;
}
The idea behind this particular construction was to determine if "something interesting" is happening, where "something interesting" is defined as:
A keypress, (handled separately)
A joystick movement if either the primary trigger or the pinky trigger is pressed.
Movement without any trigger pressed is ignored so that if the user accidentally bumps against the joystick, the robot doesn't go running around.
Therefore the joystick data only gets updated if the trigger is pressed. In other words, trigger "release" events - the trigger is now = 0 - are not recorded.
The combination of these two events - Chrome taking a "snapshot" of object variables once and once only, (or not keeping them current) - and the trigger value persisting, lead me to believe that jquery was the problem since the values appeared to be different on each side of the jquery call.

Chrome webRequest responseBody (POST) error

I am building a Chrome extension and trying to log some requests: the ones with POST parameters (plain text data)
This is the code I'm using:
var requestFilter = {urls: ["<all_urls>"]};
var extraInfoSpec = ['requestHeaders','requestBody','blocking']; // note: without 'requestBody' it works perfectly, but there's no POST data available.
var handler = function( details ) {
console.log(details);
};
chrome.webRequest.onBeforeSendHeaders.addListener(handler, requestFilter, extraInfoSpec);
I use requestHeaders and blocking for other things that are not in the example (don't worry about them now)
I am getting this error at page load: Uncaught Error: Invalid value for argument 2. Property '.1': Value must be one of: [requestHeaders, blocking].
I am develping under Chrome Version 36.0.1985.125 m
Form chrome webRequest documentation: Stable since Chrome 23. Contains the HTTP request body data. Only provided if extraInfoSpec contains 'requestBody'.
Any experience with this error? Any known solution? How can I solve this?

You are listening to the wrong event.
If you look at the documentation, onBeforeSendHeaders does not list requestBody in the callback details.
It is, however, available in onBeforeRequest.
So, if you need both the headers and the body, you have to correlate the two events by requestId.

Using Html5 Notification in Blackberry Webworks

I am using HTML5 Local Notifications in Blackberry 10 (Higher Version BB z10) using webworks 1.0
And it works fine for Me.
The code used look like this.
var n = new Notification("MyMessage", {
'body' : content.message,
'tag': content.chatid,
'target' : "MyMessage",
'targetAction' : "bb.action.OPEN"
});
The link of this api reference is here
Blackberry Webworks Notification
Now there is one more field as ""
payload: Payload to send to the invoked app. Data must be Base64 encoded. Value is passed on to the Invocation Framework as data.
This to open a specific html page based on the notification you click.
I am not able to use it correctly. Also blackberry support forms do not give reply or any sample for this.
Question I asked in Blackberry Support Forums

I think there is a simpler way of achieving what you are trying to do.
First of all allow me to point you to the notification sample:
https://github.com/blackberry/BB10-WebWorks-Samples/blob/master/notify/.
To answer your specific query you need to bear in mind 2 things in the following order:
(1). The app needs to be invokable so you need to modify the config.xml and the index.html respectively:
config.xml
<rim:invoke-target id="com.myApp.entrypoint">
<type>APPLICATION</type>
<filter>
<action>bb.action.OPEN</action>
<mime-type>text/plain</mime-type>
</filter>
</rim:invoke-target>
where "id" is your unique ID (ie. nobody else should be using that)
index.html or index.js
document.addEventListener("invoked", onInvoked, false);
add the above after the system has fired the "deviceready" event.
The "onInvoked" function will look like:
function onInvoked(data) {
var pageToOpen = data.URI;
//do something with pageToOpen now
}
(2). Your notification will need to have the attribute "payLoadURI" set to the html page that you want to open. I'm thinking It will be something like
local:///myPage.html
This "myPage.html" it's what your "pageToOpen" variable will receive and at that stage you can push the right HTML fragment to the top.
I hope it helps.
P.S. this has been tested with WebWorks 2.0 so I would advise you to upgrade for a better experience.

Chrome extension "Uncaught error: Invalid value" using the redirect rules

I am trying to write an extension that will download audio files when it detects them being requested by chrome. I am basing this project on the code of the two samples "Download_links" and "catifier" provided by Google. Here is what I currently have:
var RequestMatcher = chrome.declarativeWebRequest.RequestMatcher;
var IgnoreRules = chrome.declarativeWebRequest.IgnoreRules;
var RedirectRequest = chrome.declarativeWebRequest.RedirectRequest;
var songFileURL = "http://somefile.mp3";
...
function registerRules() {
var redirectRule = {
priority: 100,
conditions: [
new RequestMatcher({
contentType: ['audio/mp3']
}),
],
actions: [
chrome.downloads.download({url: songFileURL}),
]
};
...
When I load this up and try it out, I get an error: Uncaught Error: Invalid value for argument 1. Property '.0': Value does not match any valid type choices. No matter what I try I cannot figure out what is causing this error. I am fairly to Chrome extensions and JavaScript in general, so I am sure that this is an easy fix, but I cannot figure it out. Any ideas?

I think the problem is that you specify unsupported action. The list of available actions can be found on the chrome.declarativeWebRequest page.
I think you should use chrome.webRequest.onBeforeRequest, onHeadersReceived, or onComplete to trace media links and initiate custom downloads from there, possibly in some deferred way, because I'm not sure downloads will work just from another request handler.
To make a start you may have a look at Google's CatBlock example, or to another related answer or another one. Basically, you need to add appropriate event handler by means of addListener, and in the handler invoke chrome.downloads.download({url: request.url}), where the request is passed to the handler as input parameter.
Which one of events to choose (for example, onBeforeRequest or onComplete) you should decide based on your requirements. As I understand, you don't want to block original request, so it may be useful to wait utill original downloading is completed, and then process it in onComplete handler, so that Chrome would optimize the process by just copying already downloaded file from cache.
As alternative, you can block initial download by returning {cancel: true} from onBeforeRequest handler for every sound file, and then start your download as a single one, possibly with saveAs option involved.

Permission denied to call method ChromeWindow.postMessage for iframe inside XUL page

I've an extension, and an XUL file inside it (let's call it A). XUL file contains an <iframe>, where is loaded some web page (let's call it B). B is loaded from the different domain.
A is parent to B. I want to send a message from within B to A using window.parent.postMessage().
I'm getting the following exception:
... permission denied to B to call method ChromeWindow.postMessage
How to fix that error? If there is no way to do that, how can I pass message from B to A?
I am using Firefox 16.0.1 under Windows 7.

I had a very similar problem,
it's just I had a html-popup (local) that couldn't send 'postMessage' to my xul-background-task.
I think I got it to work,
strangely enough by initiating a MessageEvent of my own (the very same thing postMessage does)
but with a (I believe obsolete) fallback.. in short: I brewed something together from MDN and other sites ;)
My script in the content:
var Communicator =
{
postMessage: function(data)
{
// We need some element to attach the event to, since "window" wont work
// let's just use a fallback JSON-stringified textnode
var request = document.createTextNode(JSON.stringify(data));
// and as always attach it to the current contentwindow
document.head.appendChild(request);
// Now let's make a MessageEvent of our own, just like window.postMessage would do
var event = document.createEvent("MessageEvent");
event.initMessageEvent ("own_message", true, false, data, window.location, 0, window, null);
// you might want to change "own_message" back to "message" or whatever you like
//and there we go
request.dispatchEvent(event);
}
}
And instead of window.postMessage(data) now use Communicator.postMessage(data)
that's all!
Now in my overlay there's nothing but our good old
addEventListener('own_message', someMessageFunc, false, true);
//or maybe even "message" just like originally
Hopefully this will work for you, too (didn't check that on iframes...)

You should check the type of iframe B
Edit:
Apparently you must flag your chrome as contentaccessible, and take into consideration the security.

Just posting in case someone faced the same problem.
Succeeded in posting message from within B to A using events as described here.
But it is not answer, because window.parent.postMessage() still doesn't work as intended.