I'm trying to make a CRUD in jquery/ajax/php for learning purposes.
But I can't figure out what I'm doing wrong with the delete part.
My goal is to delete an record from the database without refreshing the page.
Ajax function:
$(document).on('click', '.deleteOrder', function(e){
var id = $(this).attr('id');
console.log('Clicked order: ' + id);
$.ajax({
type: 'POST',
url: 'orders/deleteorder/',
data: {
orderId: id
},
success: function(data){
updateOrder(e);
},
error: function(){
console.log('error');
}
});
});
Php function:
public function deleteOrder(){
$orderId = $_POST['id'];
$count=$this->connection->prepare("DELETE FROM orders WHERE orderNumber = :number");
$count->bindParam(":number",$orderId,PDO::PARAM_INT);
$count->execute();
echo 'Finished order ' . $orderId;
}
First check the delete function called or not through ajax, in browser Network tab (you see this when clicking F12 button in browser)
you did not call deleteOrder function .
Related
I want to send data from javascript to another php page where I want to display it. I found that I need to use Ajax to pass the data to php so I tried myself.
My file where is the javascript:
$('#button').on('click', function () {
$.jstree.reference('#albero').select_all();
var selectedElmsIds = [];
var selectedElmsIds = $('#albero').jstree("get_selected", true);
var i = 0;
$.each(selectedElmsIds, function() {
var nomenodo = $('#albero').jstree('get_selected', true)[i].text;
//var idnodo = selectedElmsIds.push(this.id);
var livellonodo = $('#albero').jstree('get_selected', true)[i].parents.length;
//console.log("ID nodo: " + selectedElmsIds.push(this.id) + " Nome nodo: " + $('#albero').jstree('get_selected', true)[i].text);
//console.log("Livello: " + $('#albero').jstree('get_selected', true)[i].parents.length);
i++;
$.ajax({
type: "POST",
data: { 'namenodo': nomenodo,
'levelnodo': livellonodo
},
success: function(data)
{
$("#content").html(data);
}
});
});
});
I want to send the data to another php page which consists of:
<?php echo $_POST["namenodo"]; ?>
But when I try to go to the page there's no data displayed.
This is a very basic mistake I think every beginner (including me) does while posting a data using ajax to another php page.
Your ajax code is actually posting the data to lamiadownline.php (if you are using the variables correctly) but you can't get that data by simply using echo.
Ajax post method post data to your php page (lamiadownline.php) but when you want to echo the same data on the receiver page (lamiadownline.php), you are actually reloading the lamiadownline.php page again which makes the $_POST["namenodo"] value null.
Hope this will help.
First of all you won't be able to see what you have post by browsing to that page.
Secondly, is this
<?php echo $_POST["namenodo"]; ?>
in the current page?
Otherwise, specify the url
$.ajax({
url: "lamiadownline.php",
type: "POST",
data: { 'namenodo': nomenodo,
'levelnodo': livellonodo},
success: function(data) {
$("#content").html(data);
}
});
//try this
$.ajax({
type: "POST",
url:"Your_php_page.php"
data: { namenodo: nomenodo levelnodo: livellonodo},
success: function(data)
{
$("#content").html(data);
}
});
Logic is that , on click div.buttons gonna hide and get second form : save date to mysql .. problem is in this : 1) i have to save grab name or value from buttons : problem no refresh page . i tried send date to php with ajax , with GET or POST methodes from js .. buttons are taken mysql and echoed in php like this : PHP: foreach ($res as $row) {
echo '<tr><td><button id="pupShow" name="'.$row["ID"].'">'.$row["SubjectName"].'</button> </td></tr>';
} JS:
$("button#pupShow").click(function () {
$("div.pupInput").show("slow");
$("div.showMarks").toggle("slow");
$("div.lessons").toggle("slow");
alert(this.name);
// $GLOBALS['myglob'] = this.name;
// window.location.href ="subID.php?subID="+this.name;
// return false;
this is js were i handle click on button
any help ?
i got eye on transforming first buttons into selected manue . so i could grab them by name from php , but its destroy my visual ..
If you don't want to reload the page, then you can try:
foreach ($res as $row) {
echo '<tr><td><button id="pupShow" name="'.$row["ID"].'" onclick="return false;">'.$row["SubjectName"].'</button> </td></tr>';
}
or
$("button#pupShow").click(function (el) {
el.preventDefault();
var data = 'nume=' + el.val()
$.ajax({
url: "subID.php",
type: "POST",
data: data,
cache: false,
success: function (html) {
if (html) {
// animations here
alert('Success! Form submitted');
} else{
alert('Error! Please try again');
}
}
});
I didn't test it but it should help you understand how the function will look like.
So you want to submit some data without refreshing the page? Since you're using jQuery, you can do something like this:
$.post("test.php", {name: "Mathematics"}).done(function(data) {
console.log("Response loaded: " + data);
});
I have included a contact form in my page. In the same page I have a script that gets prices depending on the value of a dropdown. Now when I try to submit the contact message I have a conflict with the script for prices. Basically it tries to run it and I have no clue why. Also the contact form when submitted never works...I just get a new page to open with URL..?message=blablabla
Any idea what is going wrong?
I am working on Laravel 4.2 and so the route you see redirects to my php function.
Here is the JSfiddle and here is the php code:
public function postSendMessage() {
echo "<span class=\"alert alert-success\" >Your message has been received. Thanks!</span><br><br>";
}
Cancel the click so the form will not submit
$("button#send").click( function(evt){
evt.preventDefault();
New error, form has an id of contact, not a class
data: $('form.contact').serialize(),
needs to be
data: $('form#contact').serialize(),
This is what I do for the same situation
//For your drpbox use this code
$(document).on("change", "#yorDropBoxId", function(){
dropBoxValue=$("#yorDropBoxId").val();
var request = $.ajax({//http://api.jquery.com/jQuery.ajax/
url: "samePagePHPcript.php",
type: "POST",
data: {
ObjEvn:"dropBoxEvent",
dropBoxValue: dropBoxValue //You will use $myVar=$_POST["dropBoxValue"] to retrieve the information from javascript
},
dataType: "json"
});
request.done(function(dataset){
//If you want to retrieve information from PHP sent by JSON.
for (var index in dataset){
JsResponse=dataset[index].phpResponse;
}
if(JsResponse test someting){
"do dometing"
control the beheaivor of your HTML elements
}
});
request.fail(function(jqXHR, textStatus) {
alert( "Request failed: " + textStatus );
});
});
//To submit your form use this code. You must use Prevent default if you are using a button or using a <a> link tag to trigger the evenrmrnt
$(document).on("click", "#btn_sendForm", function(e){
e.preventDefault();
var dt={
ObjEvn:"FormEvent",
input1:$("#txt_input1").val(),
input2: $("#txt_input2").val(),
input3: $("#txt_input3").val()
};
var request = $.ajax({//http://api.jquery.com/jQuery.ajax/
url: "samePagePHPcript.php",
type: "POST",
data: dt,
dataType: "json"
});
request.done(function(dataset){
//If you want to retrieve information from PHP send by JSON.
for (var index in dataset){
JsResponse=dataset[index].phpResponse;
}
if(JsResponse test someting){
"do dometing"
control the beheaivor of your HTML elements
}
});
request.fail(function(jqXHR, textStatus) {
alert( "Request failed: " + textStatus );
});
});
//In the samePagePHPcript.php you can do this:You will return your information from PHP using json like this
$event = $_POST["ObjEvn"];
if(event==="FormEvent"){//Event to insert in your form
$arrToJSON = array(
"phpResponse"=>"data you want to send to javascript",
"asYouWant"=>"<div class=\".class1\">more data</div>"
);
echo json_encode(array($arrToJSON));
}
elseif(event==="dropBoxEvent"){//Event to your dropbox - if you want
$arrToJSON = array(
"phpResponse"=>"data you want to send to javascript",
"asYouWant"=>"<div class=\".class1\">more data</div>"
);
echo json_encode(array($arrToJSON));
}
I am working with Concrete-5 CMS, I have an issue in passing value form view to controller.In my application I am using following code for displaying employee role.
foreach($rd as $data){
echo "<tr><td>".$data[role_name]."</td><td>".$data[role_description]."</td><td>Edit</td><td>".$ih->button_js(t('Delete'), "deleteRole('".$data['role_id']."')", 'left', 'error')."</td></tr>";
}
<input type="hidden" name="rno" id="rno" />
script:
$delConfirmJS = t('Are you sure you want to remove this Role?'); ?>
<script type="text/javascript">
function deleteRole(myvar) {
var role = document.getElementById('rno');
role.value = myvar;
if (confirm('<?php echo $delConfirmJS ?>')) {
$('#rolelist').submit();
//location.href = "<?php echo $this->url('/role/add_role/', 'delete', 'myvar')?>";
}
}
</script>
html code
I did edit operation by passing role_id through edit action. But, In case of delete i should ask for a conformation, so I use java script to conform it and call the href location and all.
But i don't know how to pass the role_id to script and pass to my controller. how to achieve this task?
thanks
Kumar
You can pass value to server using ajax calls.
See the following code. Here We use a confirm box to get user confirmation.
function deleteEmployee(empId){
var confirm=confirm("Do you want to delete?");
if (confirm)
{
var url = "path/to/delete.php";
var data = "emp_id="+empId;
$.ajax({
type: "POST",
url: "otherfile.php",
data: data ,
success: function(){
alert("Employee deleted successfully.");
}
});
}
}
In delete.php you can take the employee id by using $_POST['emp_id']
You can do it easily by using jquery
var dataString = 'any_variable='+ <?=$phpvariable?>;
$.ajax({
type: "POST",
url: "otherfile.php",
data: dataString,
success: function(msg){
// msg is return value of your otherfile.php
}
}); //END $.ajax
I would add an extra variable in to the delete link address. Preferrably the ID of the row that you need to be deleted.
I don't know Concrete-5 CMS. But, i am giving you the general idea
I think, you are using some button on which users can click if they want to delete role.
<td>".$ih->button_js(t('Delete'), "deleteRole('".$data['role_id']."')", 'left', 'error')."</td>
My suggestion,
add onClick to button
onClick="deleteEmployee(roleId);" // roleId - dynamic id of the role by looping over
Frankly speaking dude, i dont know how you will add this to your button that i guess there would surely be some way to simply add this to existing html.
And now, simply use Sajith's function
// Sajith's function here
function deleteEmployee(empId){
var confirm=confirm("Do you want to delete?");
if (confirm){
var url = "path/to/delete.php";
var data = "emp_id="+empId;
$.ajax({
type: "POST",
url: "otherfile.php",
data: data ,
success: function(){
alert("Employee deleted successfully.");
}
});
}
}
I have code like this:
$(".delete").live('click', function() {
var commentContainer = $(this).parent();
var id = $(this).attr("id");
var string = 'id='+ id ;
$.ajax({
url: "<?php echo site_url('messages/delete') ?>",
type: "POST",
data: string,
cache: false,
success: function(){
commentContainer.slideUp('600', function() {$(this).remove();
$('.messages').fadeOut('2000', function(){$(this).remove();
$('#messages').load("<?php echo site_url('messages/show') ?>", function(){
$(this).fadeIn('2000')
});
});
});
}
});
return false;
});
$('.delete').confirm(
{
msg: 'You are about to delete this message. Are you sure?<br>',
buttons: {
separator: ' - '
}
});//message deleting
When activated for the first time it is working (when I try to delete message, question is asked and if I say yes, message is deleted). When data again shown, when I click delete it is deleting message without asking. What is the problem?
It looks like you'll have to register the confirm plugin after every ajax load as it isn't using live internally.
Easiest way would be to move the code into its own function and call that inside the load callback and on page load.
function deleteConfirmSetup() {
$('.delete').confirm(
{
msg: 'You are about to delete this message. Are you sure?<br>',
buttons: {
separator: ' - '
}
});//message deleting
}
$(".delete").live('click', function() {
$.ajax({
url: "<?php echo site_url('messages/delete') ?>",
type: "POST",
data: string,
cache: false,
success: function(){
commentContainer.slideUp('600', function() {$(this).remove();
$('.messages').fadeOut('2000', function(){$(this).remove();
$('#messages').load("<?php echo site_url('messages/show') ?>", function(){
$(this).fadeIn('2000');
deleteConfirmSetup(); // Add function call here
});
});
});
}
});
return false;
});
deleteConfirmSetup(); // Also call function here to setup initially
Clearly the "confirm" plugin doesn't operate with live and instead is using bind.
When the element is added, it doesn't have the confirmation bindings but does have the live ones, so it'll just delete.
You could attempt to re-call the confirm plugin in your success function after the new content is loaded, modify the plugin, do it yourself manually, or find a new plugin that's a bit better thought-out.
I haven't used the confirm plugin, but a slightly irritating hack to make this work as you want might be to do this:
var bindBackup = jQuery.fn.bind;
jQuery.fn.bind = jQuery.fn.live;
before you run .confirm(). Then just restore it afterwards:
jQuery.fn.bind = bindBackup;
I haven't tried it, but the live function doesn't implement bind in it's source, so I don't see a reason why it won't work.