Geek Answers Handbook

JQuery does not work at all, except for other javascript code it works

I have a problem with my jquery. I have a table with several records, and with each record there is a delete link. Clicking this link deletes a specific record. This is normal, but I try, when the record is deleted, it just disappears without refreshing the page. For this, I have jquery code that works fine on a separate page, but when I try to integrate it with my actual code, nothing happens at all. I replaced $ with jQuery, but nothing happens anyway. I also checked other reasons, but nothing worked. Can someone point out what might be missing, or I'm wrong. Codes below:

This is my line code that is inside the foreach, so multiple instances have been created

<tr class="showdel"> <td class="align"><input type="checkbox" name="instanceids[]" id="checkid" value="<?php echo $instanceid; ?>" /></td> <td class="align"><?php echo $i++.'.'; ?></td> <td><?php echo $title; ?></td> <td><a href="javascript:void(0);" class="delete" id="<?php echo $instanceid; ?>">Delete</a></td> </tr>

Below is my jquery code that deletes the record and it just disappears. It is located in the main section of the page.

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script type="text/javascript"> jQuery(function() { jQuery(".delete").click(function() { var element = jQuery(this); var del_id = element.attr("id"); var info = 'id=' + del_id; if(confirm("Are you sure you want to delete this?")) { jQuery.ajax({ type: "POST", url: "content_list.php", data: info, success: function() {} }); jQuery(this).parents(".showdel").animate({ backgroundColor: "#003" }, "slow") .animate({ opacity: "hide" }, "slow"); } return false; }); }); </script>

Please indicate what I am doing wrong. Thanks in advance.

PS: Here is my whole chapter. See if that helps. Possibly the wrong order of scripts.

 <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <title><?php echo $client; ?> Admin</title> <!-- bootstrap core css --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- custom css --> <link href="css/sb-admin.css" rel="stylesheet"> <!-- style.css --> <link href="css/style.css" rel="stylesheet"> <!-- paginng css --> <link href="css/pagination.css" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script type="text/javascript"> jQuery(".delete").click(function() { var element = jQuery(this); var del_id = element.attr("id"); var info = 'id=' + del_id; if(confirm("Are you sure you want to delete this?")) { jQuery.ajax({ type: "POST", url: "content_list.php", data: info, success: function() {} }); jQuery(this).parents(".show").animate({ backgroundColor: "#003" }, "slow") .animate({ opacity: "hide" }, "slow"); } return false; }); </script> <!-- form validation scripts --> <script type="text/javascript" src="js/validate_category.js"></script> <script type="text/javascript" src="js/validate_subcategory.js"></script> <script type="text/javascript" src="js/validate_subsubcategory.js"></script> <script type="text/javascript" src="js/selectall.js"></script> <script type="text/javascript" src="js/validate_content.js"></script> <script type="text/javascript" src="js/validate_resource.js"></script> <script type="text/javascript" src="js/validate_data.js"></script> <script type="text/javascript" src="js/ajax_scripts.js"></script> </head>

Also my table is loaded by ajax call as below.

+7
javascript jquery php
source share
3 answers

Since your data table is loaded with an ajax call, your jQuery(".delete") choice is actually empty when it tries to set event handlers before loading the data. So the solution is to set the event handler directly in document and set a filter for your .delete element. Like this:

 jQuery(document).on('click',".delete",(function() { //Your code });
+1
source share

  • Be sure to check the javascript error using the firebug console while the page is loading. Sometimes javascript errors prevent javascript from executing.

  • Make sure your table is not loading with an ajax call. If this is the case, the jQuery click event will not be bound to it. To bind it, you need to use the ajaxStop () event handler to bind the delete function.

  • If ajaxStop () does not work, you can create the function of removing the click individually and call it when the onclick event of the link

eg.

 <td> <a href="javascript:void(0);" onclick="return delete_function();" class="delete" id="<?php echo $instanceid; ?>">Delete</a> </td>
0
source share

Using the jQuery .animate() method, you can animate only numeric values ​​(for example, "margin: 30px"). String values ​​cannot be animated (for example, "background-color: red").

Read more in jQuery docs.

Instead of animate use the .css() jQuery method to change the color and / or hide the elements.

0
source share

More articles:


All Articles