Question

I have links generated dynamically based on content in a db.

The links end up looking like

<ul>
    <li><a href="/Updates/LoadArticle?NewsId=3" id="article">Article 3</a></li>
    <li><a href="/Updates/LoadArticle?NewsId=2" id="article">Article 2</a></li>
    <li><a href="/Updates/LoadArticle?NewsId=1" id="article">Article 1</a></li>
</ul>

The script I pieced together is

$(document).ready(function () {

        $("#article").click(function (e) {
            InitializeDialog($("#news"), $(this).attr("href"));
            e.preventDefault();
            $("#news").dialog("open");
         });


        //Method to Initialize the DialogBox
        function InitializeDialog($element, page) {

            $element.dialog({
                                autoOpen: true,
                                width: 400,
                                resizable: false,
                                draggable: true,
                                title: "Update",
                                modal: true,
                                show: 'fold',
                                closeText: 'x',
                                dialogClass: 'alert',
                                closeOnEscape: true,
                                position: "center",
                                open: function (event, ui) {
                                    $element.load(page);
                                },

                                close: function () { 
                                    $(this).dialog('close');
                                }
              });
        }
    });

This works for the first article in the list – the dialog opens, but the orther articles open in a separate page. I am assuming this is because the ids are not unique.

My question is more so how to create a generic jQuery function for any id (say, article1, article2, etc.).

I’ve had about 20 minutes of training on jQuery, so I am shooting in the dark on where to look.

Thanks.

Answer 1

This works for the first article in the list – the dialog opens, but
the orther articles open in a separate page. I am assuming this is
because the ids are not unique.

You’re right, having 2 or more elements with the same ID is invalid HTML and will cause you all sorts of problems.

Remove the id attribute and use a class attribute instead:

<ul>
    <li><a href="/Updates/LoadArticle?NewsId=3" class="article">Article 3</a></li>
    <li><a href="/Updates/LoadArticle?NewsId=2" class="article">Article 2</a></li>
    <li><a href="/Updates/LoadArticle?NewsId=1" class="article">Article 1</a></li>
</ul>

Then instead of:

$("#article").click()

Use:

$(".article").click()