How to use create event on a jQuery dialog in following scenario?

Question

I've have following dialog pop-up HTML which is hidden initially when page loads(look line style="display:none;" in div):

<div id="searchPopContent" class="c-popup" style="display:none;">
      <div id="pop-up">
      <div class="error_msg" id="report_error" style="text-align:center; margin-top:5px;">

        </div>
        <div class="clear"></div>
        <form name="question_issue_form" id="question_issue_form" class="login_box" method="post" action="question_issue.php">
          <input type="hidden" name="form_submitted" id="form_submitted" value="yes"/>
          <input type="hidden" name="post_url" id="post_url" value="question_issue.php"/>
          <input type="hidden" name="op" id="op" value="question_issue"/>
          <input type="hidden" name="question_id" id="question_id"/>

          <table class="trnsction_details" width="100%" cellpadding="5">
            <tbody>    
              <tr>
                <td></td>
                <td>
                  <input type="checkbox" name = "que_issue[]" value = "Question is wrong" id ="chkQueWrong">Question is wrong</input>
                </td>
              </tr>
              <tr>
                <td></td>
                <td><input type="checkbox" name = "que_issue[]" value = "Answers are wrong" id ="chkAnsWrong">Answers are wrong</input></td> 
              </tr>
              <tr>
                <td></td>
                <td><input type="checkbox" name = "que_issue[]" value = "Question direction is incorrect" id ="chkDirIncorrect">Question direction is incorrecct</input></td>             
              </tr>
              <tr>
                <td></td>
                <td><input type="checkbox" name = "que_issue[]" value = "Other" id ="chkOther">Other</input></td>          
              </tr>
              <tr>
                <td></td>
                <td class="set_message" style="display:none;"><textarea name="que_issue_comment" id = "que_issue_comment" rows="4" cols="25" maxlength="100"></textarea></td>      
              </tr>
              <tr>
                <td></td>
                <td><input type="submit" name="submit" value="Submit" class="report_question_issue" class="buttonin"/></td>
              </tr>
            </tbody>
          </table>
        </form>
      </div>
    </div>

I want to dynamically set the value of input type hidden having id="question_id". After doing so much research I came to know that I have to use create() method of jQUery UI dialog plugin to set the hidden field value in UI dialog dynamically. I tried to call create() event in jquery dialog call but couldn't be able to set the value. Can anyone please help me in this regard please? Following is the code I tried to use create() event.

$(document).on("click","a[class='que_issue']", function (e) {
var hypertext = this.innerHTML;
  var que_id = hypertext.substring(3);

  //document.getElementById("question_id").value = que_id;
  //$("#question_id").val(str);

    var data = $('#searchPopContent').html();

    var title = "Question issue";
    var dialog_title   = title; 
    var dialog_message = data; 
            var $dialog = $("<div class='view_result'></div>")
     .html(dialog_message)
     .dialog({
           autoOpen: false,
           modal:true,
           title: dialog_title,
           width: 400,                     
           close:{
           },
           create: function() {
       $("#question_id").val(que_id);
    }
     });
     $dialog.dialog('open');

    return false;
});

Also there is no errror in the firebug console for above code.

Answer 1

I modified your JS: http://jsfiddle.net/JyPLc/1/ , it works.

$(document).ready(function(){    
    $("#searchPopContent").dialog({
       autoOpen: false,
       modal:true,
       title: "Question issue",
       width: 400, 
       close:{
       }   
     });
});

$("a.que_issue").on("click", function (e) {
    var hypertext = this.innerHTML;
    var que_id = hypertext.substring(3);
    var title = "Question issue";

    $("#question_id").val(que_id);
    $("#qns_id").val(que_id); //this is just to show it works, can delete it
    $("#searchPopContent").dialog('open');

    return false;
});

You should modify the HTML first, then just call the dialog() to show to popup.