CODEWITHSUNDEEP
javascriptphphtml
DisplayName
DisplayName

Reputation: 13

JavaScript function won't run after using header(), but does run if no use of header() (in php)

I apologize if my question title is at all confusing, this is my first post and despite reading https://stackoverflow.com/help/on-topic I feel like I may still have some flaws in my question-writing abilities.

TL;DR: JavaScript animation works if I do not use header("location: ProjectUserProfile.php?UploadSuccessful"), but doesn't if I do (and I need to). Any reasons or solutions?

Anyway,

The context: I have a html form embedded in a php document which is used to upload an image, delete an image, etc.

The main code takes place on ProjectUserProfile.php (and works perfectly), and after the image has been uploaded, I use header("location: ProjectUserProfile.php?UploadSuccessful") to return to the page, and prompt a refresh.

The problem: If I do not use header("location: ProjectUserProfile.php?UploadSuccessful"), the image will not change, etc, so it is a necessity for me to use it. However, recently I have implemented "slide in notifications" if you will which display success and error messages. These work correctly normally, but fail to appear if I return to the page using header("location: ProjectUserProfile.php?UploadSuccessful").

<?php
// all the uploading etc that works occurs here
header("location: ProjectUserProfile.php?UploadSuccessful");
echo "<script> openMessage('Information','The duplicate files were successfully uploaded!') </script>";
?>

After redirecting to ProjectUserProfile.php?UploadSuccessful, there is failure to acknowledge openMessage, and so nothing happens.

Whereas, had I not used header("location: ProjectUserProfile.php?UploadSuccessful"), the "notification" would slide in and work.

Does anyone have any solutions or suggestions?

Relevant code for the javascript function 'openMessage()' below:

function openMessage(Purpose, DisplayText){
	var notificationDiv = document.getElementById("slideinNotification");
	if(notificationDiv){
		alert("exists");
	}
	else{
		alert("does not exist");
	}


	document.addEventListener("DOMContentLoaded", function(event){
		if(Purpose == "Information"){
		document.getElementById("slideInNotification").style.backgroundColor = "#4CAF50";
		}
		else if(Purpose == "Warning"){
			document.getElementById("slideInNotification").style.backgroundColor = "#FF9800";
		}
		else if(Purpose == "Error"){
			document.getElementById("slideInNotification").style.backgroundColor = "#F44336";
		}
		document.getElementById("notificationMessage").innerHTML = DisplayText;
		moveElement();
	});
}
<?php
if($filesWereDeleted == true){
$connection = new mysqli("localhost", "root", "root", "project");
$result = $connection -> query("UPDATE UserProfileImage SET UploadStatus = 1 WHERE UserUniqueID = '$userProfileId'");
header("location: ProjectUserProfile.php?DeletionSuccessful");
echo "<script> openMessage('Information','The profile image was successfully deleted!') </script>";
}
?>



<div id = "slideInNotification" class = "slideNotification">
<p id = "notificationMessage" class = "notificationInfo"></p>
<a href = "javascript:void(0)" class = "closeButton" onclick = "closeMessage()">&times;</a>
</div>

Upvotes: 1

Views: 151

Answers (2)

DragShot
DragShot

Reputation: 341

The thing is, once you use header("location: ProjectUserProfile.php?DeletionSuccessful"); you're not supposed to write anything into the output, as the browser will ignore it. That aside, I'm not exactly sure about how a single line of <script> openMessage('Information','The duplicate files were successfully uploaded!') </script> could mean anything to the browser, since that wouldn't constitute an HTML document by itself, unless you're receiving it through AJAX or loading it into an <iframe>; but even then, I doubt mixing control instructions (a redirect) with view markup (the script tag) would be a good idea.

You're going to have to post the confirmation message in ProjectUserProfile.php, so move your script tag there. You can use that ?UploadSuccessful bit as reference for you to know whether to include your script for the message in the document is necessary or not.

Upvotes: 0

Nati V
Nati V

Reputation: 700

First, your UPDATE query exposed to SQL Injection, if you get the id from the user, I hope note, read about prepared statement.

Second, about your problem, you echo the notify script in the same response you send the Location header , so before the the browser even load your JavaScript code it redirect the client to the new page when your notify javascript code not echoed...

If your problem is that user updates it's image and it's doesn't appear due it cached you can use uniqid() in the get query of image src or modify time, more effective

Upvotes: 1

Related Questions