Why jQuery Dialog Does Not Work in XPages

Question

I have an XPage that uses a jQuery dialog. The problem I encountered is that the data entered into the fields is always null if it was entered in the dialog box. In the case when it was introduced as a simple visible div , everything works fine. What for? Here is what I mean:

Image in dialog box:

https://i.stack.imgur.com/rAwpC.png

Image as a simple div:

https://i.stack.imgur.com/RkkTS.png

Initially, I blamed mine getComponent('some_property').getValue()on the server side for returning null , since any property on the client side cannot bind this correctly. I was surprised to see that it works without a jQuery dialog, like a simple div . But I have to use dialogue. I have tried everything. viewScope, partialand completeupdates, but everything that works with the div works so well, and everything that doesn't work in the dialog box, does not work Also does not work :( My XML code for any property:

<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 that 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 to add jQuery to the page:

<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
  });
});

, . XPages? JS- ? , , supposted, - , $(document).ready(function(){} , q , 100% , JQuery

Answer 1

, , form HTML, :

- JQuery

appendTo: 'form' 

form, :)