Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Sep 2011
    Posts
    416
    Thanks
    18
    Thanked 26 Times in 26 Posts

    Question Issues with jquery

    I wasn't sure where else to post this, so I picked the closest thing to it.

    The issue I'm having with my jquery involves tabs, tables to be exact. I am using the datatables plugin on my site to make lists look nice. The issue I am having is with some images in the table that do a jquery action when clicked. All the images do as expected when clicked, however when I go to a different page on the table and click the images, the ones that involve jquery action do not process through the jquery functions. The list is automatically generated so every row is the same layout, so it can't be a mistype. Are there any solutions t this problem?

  • #2
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    without having any technical info provided. I would guess that your "image functions" are not working becuase you are loading your output dynamically.

    I would be willign to bet you have assigned your click functions using


    $(element).click(function() { do something });

    try using

    $(element).on('click', function() { do something })

  • #3
    Regular Coder
    Join Date
    Sep 2011
    Posts
    416
    Thanks
    18
    Thanked 26 Times in 26 Posts
    Quote Originally Posted by DanInMa View Post
    without having any technical info provided. I would guess that your "image functions" are not working becuase you are loading your output dynamically.

    I would be willign to bet you have assigned your click functions using


    $(element).click(function() { do something });

    try using

    $(element).on('click', function() { do something })
    That is how it's setup to do, but all the rows are printed out, so they are there on loadup. The datatable plugin divides them up into groups (so to speak) and displays them in a specific count (in this instance 10). When I go to the second dab for the next group (11-20) it doesn't work, however if I go back to the first tab/page it still works.

    I tried your suggestion but it didn't even work for any of them.

  • #4
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    your going to need to show some code then.

  • #5
    Regular Coder
    Join Date
    Sep 2011
    Posts
    416
    Thanks
    18
    Thanked 26 Times in 26 Posts
    This is generated with smarty and tpl files

    Code:
            <div id="chats" class="block-content">
                <table id="table-chats" class="table">
                    <thead>
                        <tr>
                            <th width="1"></th>
                            <th>Group Name</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                    {foreach $chats as $i => $chat}
                        <tr>
                            <td><a href="javascript:void(0);" rel="tooltip-top" original-title="Normal"><img src="img/icons/packs/fugue/16x16/status-offline.png" alt="Notifications"></a></td>
                            <td>{$chat.name}</td>
                            <td>
                            	{if $user.id == $chat.id_owner}
                                <a href="chat-management&id={$chat.id}" rel="tooltip-top" original-title="Edit chat settings"><img src="img/icons/packs/silk/16x16/cog_edit.png" alt="Edit chat settings"></a>{/if}
                                <a href="#" rel="tooltip-top" original-title="Reset chat" rel2="resetchat" rel3="{$chat.id}"><img src="img/icons/packs/fugue/16x16/arrow-circle-135-left.png" alt="Reset chat"></a>
                                <a href="#" rel="tooltip-top" original-title="Reset chat password" rel2="resetpass" rel3="{$chat.id}"><img src="img/icons/packs/fugue/16x16/key--exclamation.png" alt="Reset chat password"></a>
                            </td>
                        </tr>
                    {/foreach}
                    </tbody>
                </table>
            </div>
    Script for datatable plugin
    Code:
    <script>
    $().ready(function(){
        $("#table-chats").dataTable();
    });
    Actions for image clicks
    Code:
    $(function(){
        $("a[rel2=resetchat]").click(function(){
            $("#chats").removeAlertBoxes();
            $.ajax({
                type: "POST",
                url: "action-chat-reset",
                data: "room=" + $(this).attr("rel3"),
                complete: function(){
                },
                success: function(result){
                    var res = result.split('|');
                    $("#chats").alertBox(res[1], {literal}{type: res[0], position: 'bottom'}{/literal});
                },
                error: function(jqXHR, TestStatus, errorThrown)
                {
                    $(this).alertBox("An error occured of type(" + textStatus + ") - " + errorThrown + " <br> If this persists let the Devs know.", {literal}{type: "warning"}{/literal});
                }
            });
            return false;
        });
        $("a[rel2=resetpass]").click(function(){
            $("#chats").removeAlertBoxes();
            $.ajax({
                type: "POST",
                url: "action-chat-resetpass",
                data: "room=" + $(this).attr("rel3"),
                complete: function(){
                },
                success: function(result){
                    var res = result.split('|');
                    $("#chats").alertBox(res[1], {literal}{type: res[0], position: 'bottom'}{/literal});
                },
                error: function(jqXHR, TestStatus, errorThrown)
                {
                    $(this).alertBox("An error occured of type(" + textStatus + ") - " + errorThrown + " <br> If this persists let the Devs know.", {literal}{type: "warning"}{/literal});
                }
            });
            return false;
        });
    });
    </script>
    All of the chats go through the same processing and have the same type of data, the only difference is the pages they're put on. dataTable() does this automatically, but for some reason the actions won't work on other pages.

  • #6
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    yup. ok so try this. (If you are using an older version of jQuery you may need to replace .on with .live )


    Code:
    $(function(){
        $("a[rel2=resetchat]").on('click',function(){
            $("#chats").removeAlertBoxes();
            $.ajax({
                type: "POST",
                url: "action-chat-reset",
                data: "room=" + $(this).attr("rel3"),
                complete: function(){
                },
                success: function(result){
                    var res = result.split('|');
                    $("#chats").alertBox(res[1], {literal}{type: res[0], position: 'bottom'}{/literal});
                },
                error: function(jqXHR, TestStatus, errorThrown)
                {
                    $(this).alertBox("An error occured of type(" + textStatus + ") - " + errorThrown + " <br> If this persists let the Devs know.", {literal}{type: "warning"}{/literal});
                }
            });
            return false;
        });
        $("a[rel2=resetpass]").on('click',function(){
            $("#chats").removeAlertBoxes();
            $.ajax({
                type: "POST",
                url: "action-chat-resetpass",
                data: "room=" + $(this).attr("rel3"),
                complete: function(){
                },
                success: function(result){
                    var res = result.split('|');
                    $("#chats").alertBox(res[1], {literal}{type: res[0], position: 'bottom'}{/literal});
                },
                error: function(jqXHR, TestStatus, errorThrown)
                {
                    $(this).alertBox("An error occured of type(" + textStatus + ") - " + errorThrown + " <br> If this persists let the Devs know.", {literal}{type: "warning"}{/literal});
                }
            });
            return false;
        });
    });
    </script>

  • Users who have thanked DanInMa for this post:

    Dubz (03-25-2013)

  • #7
    Regular Coder
    Join Date
    Sep 2011
    Posts
    416
    Thanks
    18
    Thanked 26 Times in 26 Posts
    Thanks, it works now. I'll have to look into updating the jquery also, I don't know how old the version is. All the different libraries for it confuse me too so I never know which one to replace it with exactly.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •