Question

I have a folder structure tree i want to reuse on several pages i am building a user control (webForms) for this with a small jquery that gets the html to display from a httphandler. so far so good. I want the user to be able to click a link on a folder i the HTMl i return from my http handler, but it seems that my page is not able to connect the jquery on the page with the jquery returned from the http handler. In my ascx file i have the event handlers for the folder links, and the links are generated in my http handler.

public void ProcessRequest(HttpContext context)
        {
            List<MultimediaType> types = typeRepository.LoadAll(); //load all the types for displaying in the list
            types.ForEach(x =>
                {
                    multimediaTypes.Add(x.Id, x.Name);
                });
            int folderId = string.IsNullOrEmpty(context.Request["folderid"]) ? 0 : int.Parse(context.Request["folderid"]);
            //load folders, from query string, if no folderid in querystring, then default to root
            List<MultimediaFolder> folders = repository.LoadAll(folderId);


            //load files
            List<Multimedia> files = fileRepository.LoadAll(folderId);
            string folderData = BuildFolderList(folders);
            string fileData = BuildFileList(files);
            context.Response.ContentType = "text/html";
            context.Response.Write("<b>" + DateTime.Now.ToString() + "</b>");
            context.Response.Write("<script type='text/javascript'>");            
            context.Response.Write("$('.folderlink').click(function () {");
            //context.Response.Write("$.get('FolderStructureHandler.ashx', function (data) {");
            context.Response.Write("alert('test');");
            context.Response.Write("});");
            context.Response.Write("});");
            context.Response.Write("</script>");

            context.Response.Write("<table border='1'>");
            context.Response.Write("<th><td>Name</td><td>Type</td></th>");
            context.Response.Write(folderData);
            context.Response.Write(fileData);
            context.Response.Write("</table>");
        }

and the code for my user control is quite simple:

<script type="text/javascript">
    $(document).ready(function () {
        $.get("FolderStructureHandler.ashx", function (data) {
            $("#folderList").html(data);
        });
    });
</script>
<div id="folderList"></div>

Both of the methods to write the html is simple:

private string BuildFolderList(List<MultimediaFolder> folders)
        {
            StringBuilder builder = new StringBuilder();
            foreach (MultimediaFolder folder in folders)
            {
                builder.AppendFormat("<tr><td width='20'><img src='../Images/folder.png'/></td><td colspan='2'><a href='#' class='folderlink'>{0}</a></td></tr>", folder.Name);
            }
            return builder.ToString();
        }

I have tried to have the jquery .click() eventhandler in the .ascx markup also, but with no success, now i tried to send it with the html from the http handler, still no success. Does anyone have a possible solution to this problem.

Im getting the data loaded on the first time and sees my html table, but when i click a link nothing happens…

Sincerely,

Edit
Minor modifications to the generated JQuery from the HTTPHandler, it now makes an alert (i had a syntax error), but now im calling the handler each time, but the date time does not seem to change…

new httphandler code:

//load files
            List<Multimedia> files = fileRepository.LoadAll(folderId);
            string folderData = BuildFolderList(folders);
            string fileData = BuildFileList(files);
            context.Response.ContentType = "text/html";
            context.Response.Write("<b>" + DateTime.Now.ToString() + "</b>");
            context.Response.Write("<script type='text/javascript'>");            
            context.Response.Write("$('.folderlink').click(function () {");
            context.Response.Write("$.get('FolderStructureHandler.ashx', function (data) {");
            context.Response.Write("alert(data);");
            context.Response.Write("});");
            context.Response.Write("});");
            context.Response.Write("</script>");

            context.Response.Write("<table border='1'>");
            context.Response.Write("<th><td>Name</td><td>Type</td></th>");
            context.Response.Write(folderData);
            context.Response.Write(fileData);
            context.Response.Write("</table>");

This creates a popup with the table in, but the date is always the same, as though it is cached or something.???

Answer 1

It sounds like your elements are being written after the event handler is assigned. Try using

.live("click", function)