jquery dialog title undefined using global variable

Question

I have set a var in my code then made it global, but for some reason, dialog is showing it as 'undefined'. Can you not have var in title? Thanks

In .click event

box = $('#EB_custref').val();

Outside of function

var box;

In dialog options

title: 'Edit box' + ' ' + box,

you need to post more code... – William Niu Jul 28 '11 at 11:31 — William Niu, Jul 28 '11 at 11:31
@william. why have you downvoted me? – bollo Jul 28 '11 at 11:37 — bollo, Jul 28 '11 at 11:37
how do you know it was me? I did not downvote you. – William Niu Jul 28 '11 at 13:01 — William Niu, Jul 28 '11 at 13:01

score 2 · Accepted Answer · edited May 23 '17 at 11:55

2

The title: 'Edit box' + ' ' + box line gets run when you instantiate your dialog: I assume you're doing that on $(document).ready. At that point, your box variable is undefined.

When you set box on the click event it's too late - the title has already been set.

See this post for further info.

EDIT

Here's a demo of one solution for this:

HTML

<button data-title="Apple">OPEN 1</button>
<button data-title="Banana">OPEN 2</button>

<div id="MyDialog">
    Example Dialog Content
</div>

JQUERY

var globalTitle = ''; // Your global variable

// Startup operations
$(function () {

    $('#MyDialog').hide();
    $('button').click(function () { 
                          openMyDialog($(this).data('title')) 
                      });
});

// Open the dialog using the global myTitle variable
function openMyDialog(customTitle)
{
    globalTitle = customTitle;
    $('#MyDialog').dialog({title : globalTitle});
}

Note the use of HTML5-style data- attributes, which rock, and are accessible in jQuery through the .data() function. Also note that I've used a global variable to show you that it's possible to use one. However there's no need for it - the best approach would be to pass customTitle straight into the dialog() call, i.e. $('#MyDialog').dialog({title : customTitle});

edited May 23 '17 at 11:55

Community

1
1

answered Jul 28 '11 at 11:32

James McCormack

9,217
3
47
57

Thank you for that james. I was aware of hacking the css directly. – bollo Jul 28 '11 at 11:39
How do i then james based on your comment, make the box global from the click event? thanks – bollo Jul 28 '11 at 11:41
The `box` var *is* global, it's just that you used it to set the `title` property when it was undefined. Because `title` is just a string, it doesn't matter if you subsequently change the value of `box`. `title` will remain the same literal string i.e. 'Edit box undefined'. The best thing for you to do is run the dialog instantiation code on the click event. – James McCormack Jul 28 '11 at 11:46
Can you give me an example of that please james. Quite new to js & jquery. Thanks – bollo Jul 28 '11 at 11:54
James. Thank you. However, I am still getting errors. Here's the scenario. I need to capture this value which I do to populate the form: var custref = $("tr.trSelected td:nth-child(8) div").text(); $("#boxeditform").find("#EB_custref").attr({value: custref }); It is value I am trying to capture to make var for title. thanks – bollo Jul 28 '11 at 12:36
This populated the form with the correct data which can then be processed with the .click event – bollo Jul 28 '11 at 12:38
What I find confusing james, is that I can use 'box' in a beforeclose event in dialog but not in the title. title: 'Edit box', width: 470, beforeclose: function (event, ui) { if(flag==1){ flag=0; jAlert("You have successfully edited\n\rBox: "+box+"\n\r"+ "Status: "+status+"\n\r"+ "Size: "+size+"\n\r", 'Box addittion successfull'); } – bollo Jul 28 '11 at 13:14
Then pass `box` into the `openMyDialog` (or your equivalent) function. I think you need to spend more time learning javascript to get comfortable with these concepts. As I have already explained, `box` is undefined when you initially set `title`. It *is* defined by the time your call to `jAlert` runs. You need to understand the fact that your javascript runs in a lifecycle - function code executes when it is called. Anything outside a function gets executed immediately. – James McCormack Jul 28 '11 at 13:16

score 0 · Answer 2 · answered Jul 28 '11 at 11:33

0

alert($('#EB_custref').val())

Check that its returning value or not

and if possible post more code/

answered Jul 28 '11 at 11:33

Pranay Rana

175,020
35
237
263

jquery dialog title undefined using global variable

2 Answers2