Jquery not working at all but other Javascript code runs

Question

I'm facing a problem with my jquery. I have a table with multiple records and with each record there is delete link. On clicking that link that particular record is deleted. That is fine but what I am trying for is when a record is deleted it simply disappears without any page refresh. For that I have a jquery code which works fine on a stand alone page but when I'm trying to integrate it with my actual code nothing happens at all. I replaced $ with jQuery but still nothing happening. I also checked for other causes but nothing worked. Can someone point out what could possibly be missing or I'm doing wrong. Codes are below:

This is my row code which is inside a foreach so multiple ones are 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 which deletes the record and it simply disappears. It is in head 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 point out what am I doing wrong. Thanks in advance.

PS: Here is my whole head section. See if this helps. May be ordering of scripts is wrong.

<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 Alpesh Panchal below pointed out.

Debug your code: put some console.log calls at different levels to see if the script is executed, the outer-most function is executed, etc. Come back with the results. — trincot
– trincot, Commented Dec 23, 2015 at 6:10
did you try jQuery(".delete").on('click', function() { instead of click — Venugopal
– Venugopal, Commented Dec 23, 2015 at 6:11
@Muhammad Atif:- No errors, no warning. It is not responding at all. I tried adding an alert box but still no response. — user3224207
– user3224207, Commented Dec 23, 2015 at 6:16
try by removing jQuery(function() and give the click function only — Anoop LL
– Anoop LL, Commented Dec 23, 2015 at 6:18

Tᴀʀᴇǫ Mᴀʜᴍᴏᴏᴅ · Accepted Answer · 2015-12-23 06:49:42Z

1

Since your data table is loading by an ajax call, your selection of jQuery(".delete") is actually empty when it is trying to set the event handlers before the data is loaded. So, the solution is to set the event handler to the document itself and set a filter for your .delete element. Like this :

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

answered Dec 23, 2015 at 6:49

Tᴀʀᴇǫ Mᴀʜᴍᴏᴏᴅ

4,2261 gold badge27 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Venugopal · Accepted Answer · 2015-12-23 06:41:03Z

0

Make sure to check any javascript error using firebug console during page loading. Sometimes javascript errors prevents rest of javascript to execute.
Make sure that your table is not being loading by ajax call. If it is then jQuery's click event won't be binded to it. To bind it, you need to use ajaxStop() event handler to bind delete function.
If ajaxStop() doesn't work then you can create your delete click function separately and call it on "onclick" event of link

e.g.

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

edited Dec 23, 2015 at 6:41

Venugopal

1,8961 gold badge17 silver badges30 bronze badges

answered Dec 23, 2015 at 6:18

Alpesh Panchal

1,71313 silver badges9 bronze badges

Comments

trincot · Accepted Answer · 2015-12-23 07:36:57Z

0

With the jQuery .animate() method only numeric values can be animated (like "margin:30px"). String values cannot be animated (like "background-color:red").

Collectives™ on Stack Overflow

Jquery not working at all but other Javascript code runs

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related