How to pass array data to jQuery dialog and display?

Question

Hello I am trying to pass array data into the jquery dialog box and display. I haven't had much luck with this and Im guessing my whole approach to this is wrong. Any guidance to the right way is much appreciated.

<html>
<div id="confirm"></div>
</html>

<script>
var array_data = ["London", "NewYork", "Miami" , "LosAngeles"];

$('#confirm').html(array_data).dialog({
    autoOpen: false,
    modal: true,
    title: 'Confirmation message',
    buttons: {
          Submit: function () { //Do Something here };
          Cancel: function () { $(this).dialog("close"); }
    },
     width: 850, height: 300
}).dialog('open');

</script>

I'm unable to figure out how I would pass the array object to the modal and then print out the array values one by one.

May I know when are you planning to print out the array values? Would you want to print it out on open of the dialog? — Silver Gonzales
– Silver Gonzales, Commented Oct 19, 2012 at 18:48
That's where i'm confused. I'm not sure if my approach to this is right. All I want is when the dialog opens the array needs to be printed — Naveen
– Naveen, Commented Oct 19, 2012 at 18:51

Silver Gonzales · Accepted Answer · 2012-10-19 19:17:18Z

2

If you are planning to print out the array values on open of the dialog, then, you may attach an open event to the dialog. You may want to check out: http://api.jqueryui.com/dialog/#event-open

So in your case, you may do it this way:

<html>
<div id="confirm"></div>
</html>

<script>
var array_data = ["London", "NewYork", "Miami" , "LosAngeles"];

$(document).bind("ready", function(){
$('#confirm').dialog({
    autoOpen: true,
    modal: true,
    title: 'Confirmation message',
    buttons: {
          Submit: function () { },
          Cancel: function () { $(this).dialog("close"); }
    },
     width: 850, height: 300,
     open: function(event, ui) {
        $(array_data).each(function(index, data){
           console.log(data);
        });
     }
});
});

</script>

edited Oct 19, 2012 at 19:17

answered Oct 19, 2012 at 18:56

Silver Gonzales

7345 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Naveen Over a year ago

This did not work. I get a Uncaught Error: NOT_FOUND_ERR: DOM Exception 8 error. How about I write the array items to a div, hide the div on page load and then display the div when I click a button ? Will that be a good approach ?

Silver Gonzales Over a year ago

Oh, sorry. At that point the div node has not been created yet, hence, the error gets thrown. You need to instantiate the dialog when the document is ready. I have edited the code above to run instantiation of the dialog when the div node has been created already.

Naveen Over a year ago

Even this wouldnt work. I'm getting the Uncaught TypeError: Object [object Object] has no method 'dialog'.

Silver Gonzales Over a year ago

I see. I think you failed to add the necessary scripts. Did you add the jquery and jquery ui scripts to the header? Kindly check: jqueryui.com/dialog to see which scripts need to be added to the header. You may click on View Source at the bottom.

Naveen Over a year ago

Thanks! I completely missed the jQueryUI script. What I now see is the array elements in the console when I run it on chrome. But it doesnt appear in the modal.

|

arunky · Accepted Answer · 2012-10-19 18:47:23Z

0

Definitely passing an array to dailog will not work as it cannot interpret what is stored in it. Try using jQuery.each(http://api.jquery.com/jQuery.each) and extract each of the element and pass to the logic.

answered Oct 19, 2012 at 18:47

arunky

1261 silver badge7 bronze badges

Collectives™ on Stack Overflow

How to pass array data to jQuery dialog and display?

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related