What doesn't this switch case statement evaluate as expected in the ajax image upload code please?
I am working on an ajax image upload system using ajax and php.
Within the ajax code, I am using :
ajax.addEventListener("loa
I'm binding the Image selected in the web page because I have several windows on one page, each of which I different image can be uploaded to
Later in:
I have noticed that using the following code
works just as expected.
However, I would like to use a switch case statement.
If I use the following within the completeHandler code:
the alert ALWAYS shows undefined. What am I doing wrong here. It seems that although 'this' is indeed Image1, the switch statement doesn't evaluate it as such and so variable 'imageBeingControlled' always returns undefined.
Please help, thank you
Within the ajax code, I am using :
ajax.addEventListener("loa
I'm binding the Image selected in the web page because I have several windows on one page, each of which I different image can be uploaded to
Later in:
function completeHandler(event){I have noticed that using the following code
if (this=="Image1"){
... do something
}works just as expected.
However, I would like to use a switch case statement.
If I use the following within the completeHandler code:
function completeHandler(event){
var imageBeingControlled;
var inactiveImages;
switch (this){
case Image1:
imageBeingControlled=1;
break;
case Image2:
break;
default:
}
alert (imageBeingControlled);the alert ALWAYS shows undefined. What am I doing wrong here. It seems that although 'this' is indeed Image1, the switch statement doesn't evaluate it as such and so variable 'imageBeingControlled' always returns undefined.
Please help, thank you
ASKER
OK, let me try again please.
The final part of my ajax call looks like this:
If I use the following:
When Image one in the html is clicked, e.g.
the fact that Image1 has been clicked is detected as I would expect it to be in the completeHandler function
However, if in the completeHandler function, I attempt a switch case methodology as below;
imageBeingControlled always evaluates to 'undefined'.
I know that 'this' is indeed 'Image1' because
does work. However, when Image1 is put in a
statement, it does not.
Does that explain my question better.
Thank you
The final part of my ajax call looks like this:
ajax.upload.addEventListener("progress", progressHandler.bind(imageSelected), false);
ajax.addEventListener("load", completeHandler.bind(imageSelected), false);
ajax.addEventListener("error", errorHandler.bind(imageSelected), false);
ajax.addEventListener("abort", abortHandler.bind(imageSelected), false);
ajax.open("POST", "file_upload_parser.php");
ajax.send(formdata);If I use the following:
function completeHandler(event){
if (this=="Image1"){
... do something
}
}When Image one in the html is clicked, e.g.
<div id="containerImage1">
<input type="file" name="file" id="Image1" data-ext="jpg|jpeg">
<label for="Image1">
<img id="uploaded_image1" src="upload_images/no-image.png">
</label>
<div id="mainMessageImage1">Please click here to upload</div>
<div id="deleteImageButton1">Remove?</div>
<div id="cancelImageUpload1">Cancel Upload</div>
<progress id="progressBarImage1" value="0" max="100"></progress>
</div>the fact that Image1 has been clicked is detected as I would expect it to be in the completeHandler function
However, if in the completeHandler function, I attempt a switch case methodology as below;
function completeHandler(event){
var imageBeingControlled;
var inactiveImages;
switch (this){
case Image1:
imageBeingControlled=1;
inactiveImages=2;
break;
default:
}
alert (imageBeingControlled);imageBeingControlled always evaluates to 'undefined'.
I know that 'this' is indeed 'Image1' because
if (this=="Image1"){does work. However, when Image1 is put in a
case: Image1:statement, it does not.
Does that explain my question better.
Thank you
thank you for this line :
ajax.addEventListener("loa
But this is what we're looking for :
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
Check in bold underlined :
Your issue is you're using :
case Image1:
instead :
case "Image1":
ajax.addEventListener("loa
But this is what we're looking for :
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
Check in bold underlined :
The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.
Your issue is you're using :
case Image1:
instead :
case "Image1":
ASKER
I have changed my test code to the following:
I still get an alert saying 'undefined'
Any other ideas please?
function completeHandler(event){
var imageBeingControlled;
var inactiveImages;
switch (this){
case "Image1":
imageBeingControlled=1;
inactiveImages=2;
break;
default:
}
alert (imageBeingControlled);
}I still get an alert saying 'undefined'
Any other ideas please?
ASKER
If however I use
I get an alert of '1' as expected. So still not understanding which the switch/case equivalent isn't working...
function completeHandler(event){
var imageBeingControlled;
var inactiveImages;
if (this=="Image1"){
imageBeingControlled=1;
}
alert (imageBeingControlled);I get an alert of '1' as expected. So still not understanding which the switch/case equivalent isn't working...
ASKER
Furthermore, if I use the code:
and put an alert to display 'this' right at the top, it does indeed say "Image1" in the alert...
function completeHandler(event){
var imageBeingControlled;
var inactiveImages;
alert (this);
switch (this){
case "Image1":
imageBeingControlled=1;
inactiveImages=2;
break;
default:
}
alert (imageBeingControlled);and put an alert to display 'this' right at the top, it does indeed say "Image1" in the alert...
ASKER
So although 'this' is indeed "Image1",
is not detecting it...
case "Image1":is not detecting it...
if (this==="Image1"){ // doesn't work right ? this is not a string
ASKER
Hi @leakim971,
I just got out of bed and tested
this does indeed not work, and gives 'undefined' as the alert message, whereas;
gives an alert as '1' (i.e. does work)
I just got out of bed and tested
if (this==="Image1"){
imageBeingControlled=1;
}
alert (imageBeingControlled);this does indeed not work, and gives 'undefined' as the alert message, whereas;
if (this=="Image1"){
imageBeingControlled=1;
}
alert (imageBeingControlled);gives an alert as '1' (i.e. does work)
ASKER
@leakim971
I think given your last message, I might have fixed it, thanks to your pointer, the code
Does now seem to give '1' as an alert.
Furthermore, if I now extend the code to include two of the images on my html (php) page as follows;
I do get an alert ('1' or '2') depending on which image was clicked on.
It seems adding the toString() function was the answer:
I will further test this today to see if it's fully behaving itself and then close this thread (and give you due thanks) as a solution if it all seems to be working.
I think given your last message, I might have fixed it, thanks to your pointer, the code
function completeHandler(event){
var imageBeingControlled;
var inactiveImages;
switch (this.toString()){
case "Image1":
imageBeingControlled=1;
inactiveImages=2;
break;
default:
}
alert (imageBeingControlled);
}Does now seem to give '1' as an alert.
Furthermore, if I now extend the code to include two of the images on my html (php) page as follows;
function completeHandler(event){
var imageBeingControlled;
var inactiveImages;
switch (this.toString()){
case "Image1":
imageBeingControlled=1;
inactiveImages=2;
break;
case "Image2":
imageBeingControlled=2;
inactiveImages=2;
break;
default:
}
alert (imageBeingControlled);
}I do get an alert ('1' or '2') depending on which image was clicked on.
It seems adding the toString() function was the answer:
switch (this.toString()){I will further test this today to see if it's fully behaving itself and then close this thread (and give you due thanks) as a solution if it all seems to be working.
good work
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thank you for your help in resolving this issue. Very much appreciated.
we also don't know how you call it previously and how you're calling it now