jQuery - change function from click event to page load

Question

Hi,

I have a jQuery code inside an ascx that takes a cell content from a gridview and manipulate it, then write it to other cell.

It is activated by a click on the gridview row.

(Each row has a 1st cell with Word file name. The user clicks on a row - jQuey takes the file name in first cell and changes the extension to flv/mp3 - checks if there is a file with the new name - if there is a file it creates an image link to that file) I worked hard on this code but now the client want that the event (meaning that the image links that show if there is a file with the flv/mp3 ) will occur on page load.

I do not want to write all again and think there should be a way to just change the click event.

The problem is I am not very efficient with jQuery :) Can some jQuery hotshot help on this?

Here is the code (I am not proud with this code but it does the job):

    <script type="text/javascript">
    jQuery(function() {
        jQuery(".SearchResultsGV > tbody > tr:not(:has(table, th))")
            .css("cursor", "pointer")
            .one("click", function(e) {

                var jQuerycell = jQuery(e.target).closest("td");


                var jQuerycurrentCellText = jQuerycell.text();
                var jQueryleftCellText = jQuerycell.prev().text();
                var jQueryrightCellText = jQuerycell.next().text();
                var jQuerycolIndex = jQuerycell.parent().children().index(jQuerycell);
                var jQuerycolName = jQuerycell.closest("table")
                    .find('th:eq(' + jQuerycolIndex + ')').text();
                //Check media 1
                jQuery.ajax({
                    url: 'http://dtora.org.il/Portals/0/Shiurim/' + jQuerycell.parent().children().first().text().replace('.doc', '.mp3'),
                    type: 'HEAD',
                    error:
                        function() {
                            //do something depressing
                            jQuery(jQuerycell.parent().children().last()).append("<img src=http://dtora.org.il/Portals/0/images/noFiles.png />");

                        },
                    success:
                        function() {
                            //do something cheerful :)
                            var jQueryMedia1Name = ('<a href=http://dtora.org.il/Portals/0/Shiurim/' + jQuerycell.parent().children().first().text().replace('.doc', '.mp3') + '><img class="soundFile" src=http://dtora.org.il/Portals/0/images/Music.png /></a>')
                            jQuery(jQuerycell.parent().children().last()).append(jQueryMedia1Name);

                        }
                });
                //Check media 2
                jQuery.ajax({
                    url: 'http://dtora.org.il/Portals/0/Shiurim/' + jQuerycell.parent().children().first().text().replace('.doc', '.flv'),
                    type: 'HEAD',
                    error:
                        function() {
                            //do something depressing
                            jQuery(jQuerycell.parent().children().last()).append("<img src=http://dtora.org.il/Portals/0/images/noFiles.png />");

                        },
                    success:
                        function() {
                            //do something cheerful :)
                            var jQueryMedia2Name = ('<a href=http://dtora.org.il/Portals/0/Shiurim/' + jQuerycell.parent().children().first().text().replace('.doc', '.flv') + '><img class="videoFile" src=http://dtora.org.il/Portals/0/images/Video.png /></a>')
                            jQuery(jQuerycell.parent().children().last()).append(jQueryMedia2Name);

                        }
                });
            });
    });
</script>

Answer 1

Doing things on page load event would make it simpler I guess. Some things will change:

• Using selectors, you can find the td elements (cells) you're after, instead of having to find the element using the event.target property (just append td to the end of your selector body)

• I don't understand why you're depending on jQuery.index(el) to reference your elements, why not use id properties? i.e.:

  <th id="th_5"></th> <td id="td_5"></td>

Then when you are operating on the td element, you can do:

var th_id = $(this).attr("id").replace("td", "th");
var th_text = $("#" + th_id).text();

• jQuery provides you with $(this), a handle that points to the current element (the td in your case), use it
• jQuery also provides a siblings() method, so you can use it instead of parent().children()

Now for changing things to occur on page load, I would do something like this (I put some notes above some changes, i hope they help you):

$(document).ready(function() {
// being here means that the page is loaded, and we can start
// iterating over the elements

// you have to update your selector to choose td elements
// which I honestly can't tell how with ur selector, UPDATE THIS
  var my_elements = $(".SearchResultsGV > tbody > tr:not(:has(table, th))");

  $.each(my_elements, function() {
        // not needed anymore, we're using $(this)
        //var jQuerycell = jQuery(e.target).closest("td");

        var currentCellText = $(this).text();
        var leftCellText = $(this).prev().text();
        var rightCellText = $(this).next().text();

        // assuming that you have adapted to assigning ids as I have outlined above
        var colName = $("#" + $(this).attr("id").replace("td", "th")).text();

        // I assume this is the Word file you talked about, save it since you're using it often
        var files = { 
            mp3: $(this).siblings().first().text().replace('.doc', '.mp3'),
            flv: $(this).siblings().first().text().replace('.doc', '.flv')
        }

        //Check media 1
        jQuery.ajax({
            // I can't tell what you're referencing here, but I think you only have to update jQuerycell with $(this)
            url: 'http://dtora.org.il/Portals/0/Shiurim/' + files.mp3,
            type: 'HEAD',
            error: function() {
            //do something depressing

                // you're calling parent().children(), why not call siblings()? :)
            //jQuery(jQuerycell.parent().children().last()).append("<img src=http://dtora.org.il/Portals/0/images/noFiles.png />");
                $(this).siblings().last().append("<img src=http://dtora.org.il/Portals/0/images/noFiles.png />");

            },
            success: function() {
                //do something cheerful :)

                var media1Name = ('<a href=http://dtora.org.il/Portals/0/Shiurim/' 
                + files.mp3 
                + '><img class="soundFile" src=http://dtora.org.il/Portals/0/images/Music.png /></a>')
                $(this).siblings().last().append(media1Name)
                // same note here
                //jQuery(jQuerycell.parent().children().last()).append(jQueryMedia1Name);

            }
           });
            //Check media 2
            jQuery.ajax({
            url: 'http://dtora.org.il/Portals/0/Shiurim/' + files.flv,
            type: 'HEAD',
            error: function() {
                //do something depressing
                $(this).siblings().last()).append("<img src=http://dtora.org.il/Portals/0/images/noFiles.png />");
            },
            success: function() {
                //do something cheerful :)
                var media2Name = ('<a href=http://dtora.org.il/Portals/0/Shiurim/'
                    + files.flv
                    + '><img class="videoFile" src=http://dtora.org.il/Portals/0/images/Video.png /></a>')
                $(this).siblings().last().append(media2Name);
            }
        });
  });
});

I hope that answers your question, as I'm still unsure about some parts of that code, review it!

Update: In truth, I don't consider the way I described how to reference th or td elements up there is best-practice. What I do in my own applications is get a reference to the parent, and then use selectors to find the other elements i'm interested in (siblings). Thus, instead of doing:

$(this).attr("id").replace(...) one could simply do: var parent = $(this).parent(); and get handlers to the children from there on using selectors.

Needless to say, that would save you from the hassle of generating "unique" id fields for every element, and well, I believe jQuery selectors exist for this reason; to allow you to reference using the DOM not some arbitrary property you set. In your application, you might need the id for something I haven't seen, so if you do, you know both ways now :)

Answer 2

As the function you posted will run at $(document).ready , it should be the easiest way if you only trigger the click.

Just watching at the end of the code,
actually:

            });
    });
</script>

modification:

                }).click();
    });
</script>