Hello again and thanks in advance. Let me first show you the code and the problem that I am trying to resolve:
<span class='dropdown' id='status'>
<?php
switch ($status) {
case "unassigned":
echo "<button type='button' data-toggle='dropdown' id='edit' aria-haspopup='true' aria-expanded='true' class='btn btn-danger dropdown-toggle'> Status: " . $status . "<span class='caret'></span></button>";
echo "<ul class='dropdown-menu' aria-labelledby='edit'>";
echo "<li><a class='editStatus' href='pending'>Pending</a></li>";
echo "</ul>";
break;
case "pending":
echo "<button type='button' data-toggle='dropdown' id='edit' aria-haspopup='true' aria-expanded='true' class='btn btn-danger dropdown-toggle'> Status: " . $status . "<span class='caret'></span></button>";
echo "<ul class='dropdown-menu' aria-labelledby='edit'>";
echo "<li><a class='editStatus' href='attending'>Attending</a></li>";
echo "<li><a class='editStatus' href='followup'>Follow Up</a></li>";
echo "<li><a class='editStatus' href='closed'>Closed</a></li>";
echo "</ul>";
break;
case "attending":
echo "<button type='button' data-toggle='dropdown' id='edit' aria-haspopup='true' aria-expanded='true' class='btn btn-danger dropdown-toggle'> Status: " . $status . "<span class='caret'></span></button>";
echo "<ul class='dropdown-menu' aria-labelledby='edit'>";
echo "<li><a class='editStatus' href='pending'>Pending</a></li>";
echo "<li><a class='editStatus' href='followup'>Follow Up</a></li>";
echo "<li><a class='editStatus' href='closed'>Closed</a></li>";
echo "</ul>";
break;
case "followup":
echo "<button type='button' data-toggle='dropdown' id='edit' aria-haspopup='true' aria-expanded='true' class='btn btn-danger dropdown-toggle'> Status: " . $status . "<span class='caret'></span></button>";
echo "<ul class='dropdown-menu' aria-labelledby='edit'>";
echo "<li><a class='editStatus' href='closed'>Closed</a></li>";
echo "</ul>";
break;
case "closed":
echo "<button type='button' data-toggle='dropdown' id='edit' aria-haspopup='true' aria-expanded='true' class='btn btn-danger dropdown-toggle'> Status: " . $status . "<span class='caret'></span></button>";
echo "<ul class='dropdown-menu' aria-labelledby='edit'>";
echo "<li><a class='editStatus' href='pending'>Pending</a></li>";
echo "<li><a class='editStatus' href='attending'>Attending</a></li>";
echo "<li><a class='editStatus' href='followup'>Follow Up</a></li>";
echo "</ul>";
break;
}
?>
</span>
I have this span in my php script that includes a dropdown button with options which represent the different status of the message being displayed in this page, and through ajax I send this info to another php script
<script>
var phpvar1 = "<?php echo $frompost_id_sanitized; ?>";
var phpvar = "<?php echo $status; ?>";
$('a.editStatus').click(function(event) {
event.preventDefault();
var statusJs = $(this).attr("href");
alert('Change Status of ticket to: ' + statusJs)
$.post('ajaxChangeStatus.php', {status: statusJs, id: phpvar1, initialStatus: phpvar}, function(data) {
$('#status').html(data)
});
});
Finally the 2nd php script adds data to db and sends back some html to the 1st php script like this (some code is omitted)
switch ($frompost_status_sanitized) {
case "pending":
echo "<button type='button' data-toggle='dropdown' id='edit' aria-haspopup='true' aria-expanded='true' class='btn btn-danger dropdown-toggle'> Status: " . $frompost_status_sanitized . " <span class='caret'></span></button>";
echo "<ul class='dropdown-menu' aria-labelledby='edit'>";
echo "<li><a class='editStatus' href='attending'>Attending</a></li>";
echo "<li><a class='editStatus' href='followup'>Follow Up</a></li>";
echo "<li><a class='editStatus' href='closed'>Closed</a></li>";
echo "</ul>";
break;
case "attending":
echo "<button type='button' data-toggle='dropdown' id='edit' aria-haspopup='true' aria-expanded='true' class='btn btn-danger dropdown-toggle'> Status: " . $frompost_status_sanitized . " <span class='caret'></span></button>";
echo "<ul class='dropdown-menu' aria-labelledby='edit'>";
echo "<li><a class='editStatus' href='pending'>Pending</a></li>";
echo "<li><a class='editStatus' href='followup'>Follow Up</a></li>";
echo "<li><a class='editStatus' href='closed'>Closed</a></li>";
echo "</ul>";
break;
case "followup":
echo "<button type='button' data-toggle='dropdown' id='edit' aria-haspopup='true' aria-expanded='true' class='btn btn-danger dropdown-toggle'> Status: " . $frompost_status_sanitized . " <span class='caret'></span></button>";
echo "<ul class='dropdown-menu' aria-labelledby='edit'>";
echo "<li><a class='editStatus' href='closed'>Closed</a></li>";
echo "</ul>";
break;
case "closed":
echo "<button type='button' data-toggle='dropdown' id='edit' aria-haspopup='true' aria-expanded='true' class='btn btn-danger dropdown-toggle'> Status: " . $frompost_status_sanitized . " <span class='caret'></span></button>";
echo "<ul class='dropdown-menu' aria-labelledby='edit'>";
echo "<li><a class='editStatus' href='pending'>Pending</a></li>";
echo "<li><a class='editStatus' href='attending'>Attending</a></li>";
echo "<li><a class='editStatus' href='followup'>Follow Up</a></li>";
echo "</ul>";
break;
}
Everything seems to works ok:
The idea is that I have (in the 1st php script) a dropdown button with options(representing the status of the message displayed). When an option(eg the status is changed) is selected(click event) I send through ajax to the 2nd php script the option selected(the new status), then perform some actions and return the appropriate html (dropdown button with different oprions) to the 1st php script.
The Problem
If then I select another option (eg if I try to change the status again without reloading page) then I get a 404 error, because when click in the option instead of having the click event triggered and then event.preventdefault ......(as it should happen), the app reads the href attribute[which is used for sending data to the 2nd php script like this: var statusJs = $(this).attr("href");] and tries to load a page which causes the 404 error
http://localhost:8888/ticketing/pending
Normally the js script should read the value from the href attribute, prevent the default action(eg load page that causes 404), send data to the 2nd php script and replace the span contants with the html returned
What is wrong?
