Why the dialog on JQuery doesn't work in XPages

Question

I have an XPage which uses JQuery dialog. The problem I've encountered that the data which is entered to the fields is always null if it was entered in the dialog. In a case it was entered in a plain visible div everything works fine. Why? Here's what I mean:

The picture as dialog:

https://i.sstatic.net/rAwpC.png

The picture as plain div:

https://i.sstatic.net/RkkTS.png

Initially, I blamed my getComponent('some_property').getValue() on server side for returning null because of any property on the client side cannot bind it correctly. I was surprised to see it working without JQuery dialog, as a plain div. But I have to use the dialog. I've tried everything. viewScope, partial and complete updates - but everything which is works on the div works so well, and everything which doesn't work in the dialog doesn't work as well :( My code XML code for any property is:

<xp:inputText 
  styleClass="doc_field_textinput" id="input_part_title" type="text" size="40" 
  disableClientSideValidation="true" >
</xp:inputText>

And for the button:

<xp:button id="save_part_btn" value="+Add this" style="float:right;">
             <xp:eventHandler event="onclick" submit="true"
                refreshMode="complete">
                <xp:this.action><![CDATA[#{javascript:

                    var estdoc:NotesDocument=database.getDocumentByUNID(doc_source.getDocument().getParentDocumentUNID())
                    var estPartdoc:NotesDocument=estdoc.getParentDatabase().createDocument()

                    estPartdoc.replaceItemValue('Form','Estimate_Cost_Part')
                    estPartdoc.replaceItemValue('Predoc',estdoc.getUniversalID())
                    estPartdoc.replaceItemValue('$OSN_IsSaved','1')

                    estPartdoc.replaceItemValue('Title', getComponent('input_part_title').getValue())

                    }]]>
            </xp:this.action>
                <xp:this.script><![CDATA[ 
                var result = "";
                var wholeResult = true;

                function isStringEmpty(string2Check) 
                {
                    return string2Check == "" || string2Check[0] == " ";
                }

                if(isStringEmpty(document.getElementById("#{id:input_part_title}").value)) 
                {
                    wholeResult = false;
                    result += 'The field cannot be empty!'
                }

                result = result.replace(/\n$/, "")

                if(!wholeResult) 
                {
                    alert(result)
                }

                return wholeResult;

                ]]>
                </xp:this.script>
             </xp:eventHandler>
</xp:button>

My code for the button which I use to open the dialog:

<xp:button styleClass="addButton" value="+Click here to add" id="button1">
  <xp:eventHandler event="onclick" submit="true"
  refreshMode="norefresh">
  </xp:eventHandler>
</xp:button>

And the way I add JQuery to the page is:

<xp:this.properties>
        <xp:parameter name="xsp.resources.aggregate" value="true" />
     </xp:this.properties>

    <xp:this.resources>

    <xp:headTag tagName="script">
        <xp:this.attributes>
        <xp:parameter name="type" value="text/javascript" />
        <xp:parameter name="src" value="unp/jquery-min.js" />
        </xp:this.attributes>
    </xp:headTag>

    <xp:headTag tagName="script">
        <xp:this.attributes>
        <xp:parameter name="type" value="text/javascript" />
        <xp:parameter name="src" value="unp/jquery-ui.js" />
        </xp:this.attributes>
    </xp:headTag>

     <xp:headTag tagName="script">
        <xp:this.attributes>
        <xp:parameter name="type" value="text/javascript" />
        <xp:parameter name="src" value="unp/documentJS.js" />
        </xp:this.attributes>
    </xp:headTag> 

    <xp:script src="/Osnova.UI.jss" clientSide="false" />
        <xp:script src="/icons.jss" clientSide="false" />
        <xp:styleSheet href="/osnova2.css" />
        <xp:styleSheet href="/gecho.css" />
        <xp:styleSheet href="/custom.css" /> <!-- In this xp tag backend libraries -->

    </xp:this.resources>

Finally my JQuery code:

$(document).ready(function() {

  var dialogAddPartDiv = $('.dialogAddPart'); 

  $('.addButton').click(function() 
  {
    dialogAddPartDiv.dialog('open');
  });

  dialogAddPartDiv.dialog(
  {
  create: function (event, ui) {


                $(".ui-corner-all").css('border-bottom-right-radius','8px');
                $(".ui-corner-all").css('border-bottom-left-radius','8px');
                $(".ui-corner-all").css('border-top-right-radius','8px');
                $(".ui-corner-all").css('border-top-left-radius','8px');

                $(".ui-dialog").css('border-bottom-left-radius','0px');
                $(".ui-dialog").css('border-bottom-right-radius','0px');
                $(".ui-dialog").css('border-top-left-radius','0px');
                $(".ui-dialog").css('border-top-right-radius','0px');

                $('.ui-dialog-titlebar-close').css('margin', '-25px -20px 0px 0px').css('border', 'solid 2px').css('border-radius', '15px').css('border-color', '#05788d');
                $('.ui-dialog-titlebar-close').css('width', '25px').css('height', '25px');
            },

    autoOpen: false,
    modal: true,
    beforeClose : function(event) 
    {
        if(!confirm("The part won't be saved. Continue?"))
        {
        return false;
        }
        else 
        {

        }
    },
    width:600,
    resizable: false
  });
});

I really have no idea, what I am missing. What is really wrong with XPages tech? Does it support JS libraries correctly or not? Basically I think this is not supposted because adding is an runtime event, since that I shouldn't use $(document).ready(function(){} Yes, my q is different because now I'm 100% percent sure that exactly JQuery is to blame

Answer 1

Well, the problem was that the dialog was outside the form tag in HTML like this:

The solution was really simple - just adding the following line of code to initialization of JQuery dialog

appendTo: 'form' 

After this the dialog is inside form and the code works just fine :)