为什么JQuery上的对话框在XPage中不起作用

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.stack.imgur.com/rAwpC.png

The picture as plain div:

https://i.stack.imgur.com/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 :)