We help IT Professionals succeed at work.

Problem with Ajax post

thenelson
thenelson asked
on
I have a HTML5/js web page that was working fine and stopped working a short time ago.  I have placed this web page temporally at: https://www.barnwellmd.com/temp/test.html so I can delete it after I close this question (it saves files on my server and sends me an email).  

The problem is when a user clicks on "Send to Dr. Office" a popup shows "<head><title>Not Acceptable!</title></head><body><h1>Not Acceptable!</h1><p>An appropriate representation of the requested resource could not be found on this server. This error was generated by Mod_Security.</p></body></html>" and nothing is sent.

That button calls the sendCanvas() function:
function sendCanvas()
{
      if (checkFields()) return;
      clearGray();
      createPrint();
      var testCanvas = document.getElementById("imageView");  
      var canvasData = testCanvas.toDataURL("image/png");
      //alert(canvasData);
      var ajax = new XMLHttpRequest();
      //alert ('https://www.barnwellmd.com/Uploadroutines/uploadbase64.php?name=' + document.form.ptname.value.replace(/ /g,"_"));
      ajax.open("POST",'https://www.barnwellmd.com/Uploadroutines/uploadbase64.php?name=' + document.form.ptname.value.replace(/ /g,"_"),false);
      //ajax.open("POST",'https://www.barnwellmd.com/Uploadroutines/uploadbase64.php',true);    
      ajax.setRequestHeader('Content-Type', 'canvas/upload');
      //ajax.setRequestHeader('Content-Type', 'application/upload');
      ajax.onreadystatechange=function()
      {
            if (ajax.readyState == 4)
            {
                  alert(ajax.responseText);
                  // Write out the filename.
                  //document.getElementById("debugFilenameConsole").innerHTML="Saved as<br><a target='_blank' href='"+ajax.responseText+"'>"+ajax.responseText+"</a><br>Reload this page to generate new image or click the filename to open the image file.";
            }
      }
      ajax.send(canvasData);
}

Any help would be appreciated.

Thanks.
Comment
Watch Question

View Solution Only

Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:

You for sure need to remove the "v" at the end of this line in PainDiagram.js


canvas.addEventListener('touchcancel', ev_canvas, false);v <<<<<

Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:

I cannot test until you fix the two errors I have found


Error 2


return checkdate(document.form.dob.value);


is sending a string instead of field. Change to 

return checkdate(document.form.dob);

to match


if (returnval==true) input.select()

so you can change 


function checkdate(inputField) { // change to field
  var input = inputField.value;

  var validformat = /^\d{2}\/\d{2}\/\d{4}$/ //Basic check for format validity
  var returnval = true
  if (!validformat.test(input))
    alert("Invalid Date Format. Format: (mm/dd/yyyy) \nPlease correct and submit again.")
  else { //Detailed check for valid date ranges
    var monthfield = input.split("/")[0]
    var dayfield = input.split("/")[1]
    var yearfield = input.split("/")[2]
    var dayobj = new Date(yearfield, monthfield - 1, dayfield)
    if ((dayobj.getMonth() + 1 != monthfield) || (dayobj.getDate() != dayfield) || (dayobj.getFullYear() != yearfield))
      alert("Invalid Day, Month, or Year range detected. \nPlease correct and submit again.")
    else
      returnval = false
  }
  if (returnval == true) inputField.select(); // here we select the field
  return returnval
}

Lastly I think you meant 


 if (!returnval) inputField.select();
thenelson
CERTIFIED EXPERT

Author

Commented:
Michel,

Nice catch on the v on the end of the line.  - thanks!

I made the changes you suggested for checkdate but got:
"Invalid Date Format. Format: (mm/dd/yyyy)
Please correct and submit again."

It has been years since I wrote that code but I bet I used a string so I can check the format of the date input which should be mm/dd/yyyy.

Thanks for your input.
IT Expert
CERTIFIED EXPERT
Top Expert 2009
Commented:

The server error is not related to the client side code - I have found this question that suggest you contact your hosting provider https://wordpress.org/support/topic/not-acceptable-mod_security-error-after-i-hit-allow/


Your second error is still present in PainDiagram.js


You pass a string call select(), instead of passing the field. 



Please change from


			return checkdate(document.form.dob.value);
		}
}
function checkdate(input)
{
	
	var validformat=/^\d{2}\/\d{2}\/\d{4}$/ //Basic check for format validity
	var returnval=true
	if (!validformat.test(input))
		alert("Invalid Date Format. Format: (mm/dd/yyyy) \nPlease correct and submit again.")
	else
	{ //Detailed check for valid date ranges
		var monthfield=input.split("/")[0]
		var dayfield=input.split("/")[1]
		var yearfield=input.split("/")[2]
		var dayobj = new Date(yearfield, monthfield-1, dayfield)
		if ((dayobj.getMonth()+1!=monthfield)||(dayobj.getDate()!=dayfield)||(dayobj.getFullYear()!=yearfield))
			alert("Invalid Day, Month, or Year range detected. \nPlease correct and submit again.")
		else
			returnval=false
	}
	if (returnval==true) input.select()
	return returnval
}

to this (I am still not super happy that you test that false is ok and true is not)


    return checkdate(document.form.dob); // pass the field
  }
}

function checkdate(inputField) {
  var input = inputField.value; // get the value
  var validformat = /^\d{2}\/\d{2}\/\d{4}$/; //Basic check for format validity
  var returnval = true;
  if (!validformat.test(input));
    alert("Invalid Date Format. Format: (mm/dd/yyyy) \nPlease correct and submit again.")
  else { //Detailed check for valid date ranges
    var monthfield = input.split("/")[0];
    var dayfield = input.split("/")[1];
    var yearfield = input.split("/")[2];
    var dayobj = new Date(yearfield, monthfield - 1, dayfield);
    if ((dayobj.getMonth() + 1 != monthfield) || (dayobj.getDate() != dayfield) || (dayobj.getFullYear() != yearfield)) {
      alert("Invalid Day, Month, or Year range detected. \nPlease correct and submit again.");
    }
    else returnval = false;
  }
  if (returnval) inputField.select(); // select the field if not valid (I would still test for false...)
  return returnval;
}
thenelson
CERTIFIED EXPERT

Author

Commented:
I contacted hostgator, about "The server error is not related to the client side code". Gave them the Wordpress page you provided. They acknowledged that the problem is on their side but could not fully resolve it. They escalated the problem and will get back to me. I'm going to hold off with your other suggestions until after they solve the server side problems.  I'll let you know.

Thanks!!
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:

No problem. You still will need my change to make the code not give errors. There is no select method of a string.

thenelson
CERTIFIED EXPERT

Author

Commented:
Strange that the code has worked fine for 8 years and the checkdate function works fine now with the string. But when Hostgator gets done at their end, I will work with you on what you're suggesting.
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:

It is working if you ignore the console error and that the error field is not selected ;)

thenelson
CERTIFIED EXPERT

Author

Commented:
Hostgator got the server problem fixed.

The page is working fine now - why do I need to change the code if it is working fine?
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:

It’s likely still giving a console error. If you do not care you do not have to do anything - I would fix it had it been my site - anyway enjoy.

thenelson
CERTIFIED EXPERT

Author

Commented:
I am not getting any errors.
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:

I cannot verify on my mobile. No big deal.