onClick Modal Dialog

Question

Similar to: jquery modal dialog onclick?

However I have a different requirement and cannot apply the solutions provided in that post.

At the moment I am using JQuery ~~within php~~ to parse through an xml file and produce content on a HTML page:

<script type="text/javascript">
        $(document).ready(function(){
            $.ajax({
                type: "GET",
                url: "uploads/data.xml",
                dataType: "xml",
                error: function() {
                    $('#message').text('Please upload the XML file.');
                },
                success: xmlParser
            });
        });

        function xmlParser(xml){
            $('.tmpli').hide();


            $(xml).find("vendor-one").each(function(){
                $("#vendor-one").append('<li class="sweet">' + $(this).find("name").text() + '</li>');
                $(".sweet").fadeIn();
            });

        }
    </script>

I attempted an alert triggered by onClick however it's not able to contain images:

$(xml).find("vendor-one").each(function(){
    $("#vendor-one").append('<li class="sweet" onClick="alert(\''+$(this).find("name").text()+'\');">' + $(this).find("name").text() + '</li>');
    $(".sweet").fadeIn();
});

I then attempted this however it opens a dialog box for every li element on the page and I'm unsure how to edit the text and add an image:

$(xml).find("vendor-one").each(function(){
    $("#vendor-one").append('<li class="sweet">' + $(this).find("name").text() + '</li>');
    $(".sweet").fadeIn();
    $('li.sweet').click(function(){ $('li.sweet').dialog(); });
});

I need a facility where I am able to click on each individual li item created and have a message box appear that contains an image and text. I was intending to use this: Modal Dialog however I'm unsure of how to mend it to my needs.

How do you do this?

Writing it first in pure jQuery would be so much easier for debugging than directly into php... Your problem is not even related to php, you should strip out the context to find the problem. — blex
I agree with blex more over can you provide us the information that which dialog are you using ? — Akhilesh Sharma
To ease your eyes and ours you can rewrite the echo "replace \" with '". Perhaps do a retest and let us know if you get any javascript errors in your console (F12). — Tim Vermaelen
@AkhileshSharma I'm sorry, I don't understand what you mean by dialog? The text I wish to be displayed or the dialog box I am trying to display? — Glitchezz
From the second I start doing that, just to prove how easy you miss little things ..., $(xml).find(\"vendor-one\") finds vendor-one object or #vendor-one selector? — Tim Vermaelen

Alexis Paques Alexis Paques · Accepted Answer · 2016-10-28T11:21:53

Instead of using the manual onclick inline option, you can use the Javascript way to do it.

document.getElementById('ElementID').addEventListener('click', function(event){
   console.log(event);
});

Or the JQuery way (which results in the same thing) :

$('#ElementID').click(function(event){
   console.log(event);
});

onClick Modal Dialog

1 Answers