TechQA.

How to refresh modal checkbox withing xpages column

288 views Asked by At

so my question is how to refresh/deselect checkbox selection in modal, after I saved(and closed) it. Checkbox is within xpage view column.

I've tried this:

//deselect all selectbox-es // refresh
var _modal = dojo.query("div[id*='myModal']");
XSP.partialRefreshGet(_modal[0].id, {});
//close modal window
$('#myModal').modal('hide');
var _repeat = dojo.query("div[id*='panelMain']");
XSP.partialRefreshGet(_repeat[0].id, {});

This part was supposed to refresh modal before it closed.

var _modal = dojo.query("div[id*='myModal']");
XSP.partialRefreshGet(_modal[0].id, {});

Right now, my page works like this: There are 2 views on Home page, 1 for events, 1 for attendees. Each view contains documents, which I select and preview later in read only mode, after they were created.

Now in document's read-only mode there's table which contains the person (or event, but in this case I'll post person cc) form:

<xp:this.data>
    <xp:dominoDocument var="DodajOseb" formName="Oseba"></xp:dominoDocument>
    <xp:dominoDocument var="Prijava" formName="Prijava"
        computeWithForm="onsave">
    </xp:dominoDocument>
</xp:this.data>
<div
    style="margin-left:auto;margin-right:auto;width:25%;padding-top:7%;
    padding-bottom:5%">
    <xp:table>

        <xp:tr style="padding-bottom:1%;">
            <xp:td>
                <xp:label value="Ime:" id="nMime_Label1"
                    for="nMime1">
                </xp:label>
            </xp:td>
            <xp:td style="padding-bottom:5.0px">
                <xp:inputText value="#{DodajOseb.NMime}"
                    id="nMime1">
                </xp:inputText>
            </xp:td>
        </xp:tr>
        <xp:tr>
            <xp:td>
                <xp:label value="Priimek:" id="nMpriimek_Label1"
                    for="nMpriimek1">
                </xp:label>
            </xp:td>
            <xp:td style="padding-bottom:5.0px">
                <xp:inputText value="#{DodajOseb.NMpriimek}"
                    id="nMpriimek1">
                </xp:inputText>
            </xp:td>
        </xp:tr>
        <xp:tr>
            <xp:td>
                <xp:label value="Podjetje:" id="tXpodjetje_Label1"
                    for="tXpodjetje1">
                </xp:label>
            </xp:td>
            <xp:td style="padding-bottom:5.0px">
                <xp:inputText value="#{DodajOseb.TXpodjetje}"
                    id="tXpodjetje1">
                </xp:inputText>
            </xp:td>
        </xp:tr>
        <xp:tr>
            <xp:td>
                <xp:label value="E-pošta:" id="tXeposta_Label1"
                    for="tXeposta1">
                </xp:label>
            </xp:td>
            <xp:td style="padding-bottom:5.0px">
                <xp:inputText value="#{DodajOseb.TXeposta}"
                    id="tXeposta1">
                </xp:inputText>
            </xp:td>
        </xp:tr>
        <xp:tr>
            <xp:td>
                <xp:label value="Telefonska številka:"
                    id="tXtel_Label1" for="tXtel1" style="width:155px">
                </xp:label>
            </xp:td>
            <xp:td style="padding-bottom:20.0px">
                <xp:inputText value="#{DodajOseb.TXtel}"
                    id="tXtel1">
                </xp:inputText>
            </xp:td>
        </xp:tr>

        <xp:tr>
            <xp:td></xp:td>
            <xp:td>
                <xp:button value="Save" id="button1"
                    styleClass="profilesButtonSubmit">
                    <xp:this.rendered><![CDATA[
 {javascript:DodajOseb.isNewNote()
 DodajOseb.isEditable()}]]></xp:this.rendered>
                    <xp:eventHandler event="onclick" submit="true"
                        refreshMode="complete" immediate="false" save="true"
                        id="eventHandler5">
                        <xp:this.action>


                            <xp:actionGroup>




                                <xp:openPage
                                    name="$$PreviousPage">
                                </xp:openPage>
                            </xp:actionGroup>
                        </xp:this.action>


                    </xp:eventHandler>
                </xp:button>
                <xp:button value="Delete" id="button2"
                    styleClass="btn btn-danger">



                    <xp:this.rendered><![CDATA[
 {javascript:!DodajOseb.isNewNote()
 !DodajOseb.isEditable()}]]></xp:this.rendered>


                    <xp:eventHandler event="onclick" submit="true"
                        refreshMode="complete" id="eventHandler1">
                        <xp:this.action>
                            <xp:deleteDocument name="$$PreviousPage"
                                message="Dokument bo izbrisan.">
                            </xp:deleteDocument>
                        </xp:this.action>
                    </xp:eventHandler>
                </xp:button>
                <xp:button value="Cancel" id="button3"
                    styleClass="profilesButtonCancel">

                    <xp:this.rendered><![CDATA[
 {javascript:DodajOseb.isEditable()
 !DodajOseb.isNewNote()
 !!DodajOseb.isEditable()}]]></xp:this.rendered>
                    <xp:eventHandler event="onclick" submit="true"
                        refreshMode="complete" immediate="true" save="false"
                        id="eventHandler6">
                        <xp:this.action>
                            <xp:changeDocumentMode
                                mode="readOnly">
                            </xp:changeDocumentMode>
                        </xp:this.action>
                    </xp:eventHandler>
                </xp:button>
                <xp:button id="button4" value="Edit"
                    styleClass="btn btn-warning"
                    rendered="#{javascript:!DodajOseb.isEditable()}">

                <xp:eventHandler event="onclick" submit="true"
 refreshMode="complete">
                    <xp:this.action>
                        <xp:changeDocumentMode mode="edit">
                        </xp:changeDocumentMode>
                    </xp:this.action></xp:eventHandler></xp:button>
                <xp:button value="Cancel" id="button5"
                    styleClass="profilesButtonCancel">
                    <xp:this.rendered><![CDATA[
 {javascript:!DodajOseb.isNewNote()
 !DodajOseb.isEditable()}]]></xp:this.rendered>
                    <xp:eventHandler event="onclick" submit="true"
                        refreshMode="complete" immediate="true" save="false"
                        id="eventHandler2">
                        <xp:this.action>
                            <xp:openPage name="$$PreviousPage"
 </xp:openPage>
                        </xp:this.action>
                    </xp:eventHandler>
                </xp:button>
            </xp:td>
        </xp:tr>
    </xp:table>
 </div>

Beneath that form there's a bootstrap panel with title and modal button trigger in the header.

 <div class="panel panel-default"
        style="margin-left:auto;margin-right:auto;width:60%">
        <div class="panel-heading">
            <h3 class="panel-title">
                Dogodki
                <button type="button" class="btn btn-primary"
                    data-toggle="modal" data-target="#myModal"
                    style="margin-left:80%;">
                    Dodaj Dogodek
                </button>
            </h3>

Then there's modal 

<!-- Modal -->
            <div id="myModal" class="modal fade" role="dialog">
                <div class="modal-dialog">

                    <!-- Modal content-->
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close"
                                data-dismiss="modal">
                                <span
                                  class="glyphicon glyphicon-remove-circle">
                                </span>
                            </button>
                            <h4 class="modal-title">
                                Izberi Dogodke&#160;
                                <small>ki jih želiš dodati</small>
                            </h4>
                        </div>
                        <div class="modal-body">
                            <p>
                                <xp:panel>
                                    <xp:this.data>
                                        <xp:dominoView
                                            var="DogodekView" 
viewName="Dogodki_Rez"
                                            keys="#
{javascript:sessionScope.imeDogodka}">
                                        </xp:dominoView>
                                    </xp:this.data>

                                    <xp:viewPanel id="viewPanel1" rows="6">
                                        <xp:this.facets>
                                            <xp:pager
                                                partialRefresh="true" 
layout="Previous Group Next"
                                                xp:key="headerPager" 
id="pager1">
                                            </xp:pager>
                                        </xp:this.facets>
                                        <xp:this.data>
                                            <xp:dominoView
                                                var="Dogodki" 
viewName="Dogodki">
                                            </xp:dominoView>
                                        </xp:this.data>
                                        <xp:viewColumn
                                            columnName="KeyDogodek" 
id="viewColumn1" rendered="false">
                                            <xp:viewColumnHeader
                                                value="Key Dogodka" 
id="viewColumnHeader1"
                                                rendered="false">
                                            </xp:viewColumnHeader>
                                        </xp:viewColumn>
                                        <xp:viewColumn
                                            id="viewColumn2" 
showCheckbox="true" columnName="null">
                                            <xp:viewColumnHeader
                                                id="viewColumnHeader2" 
showCheckbox="true"
                                                style="width:5px">
                                            </xp:viewColumnHeader>
                                        </xp:viewColumn>
                                        <xp:viewColumn
                                            columnName="$10" 
id="viewColumn3">
                                            <xp:viewColumnHeader
                                                value="Naziv dogodka" 
id="viewColumnHeader3">
                                            </xp:viewColumnHeader>
                                        </xp:viewColumn>
                                        <xp:viewColumn
                                            columnName="NMnaziv" 
id="viewColumn4" rendered="false">
                                            <xp:viewColumnHeader
                                                value="NazivDogodka" 
id="viewColumnHeader4"
                                                rendered="false">
                                            </xp:viewColumnHeader>
                                        </xp:viewColumn>
                                        <xp:viewColumn
                                            columnName="TXoznaka" 
id="viewColumn5" rendered="false">
                                            <xp:viewColumnHeader
                                                value="Kratka oznaka" 
id="viewColumnHeader5"
                                                rendered="false">
                                            </xp:viewColumnHeader>
                                        </xp:viewColumn>
                                        <xp:viewColumn
                                            columnName="RadioButton" 
id="viewColumn6"
                                            rendered="false">
                                            <xp:viewColumnHeader
                                                value="Trajanje" 
id="viewColumnHeader6" rendered="false">
                                            </xp:viewColumnHeader>
                                        </xp:viewColumn>
                                        <xp:viewColumn
                                            columnName="TXodDatuma" 
id="viewColumn7">
                                            <xp:viewColumnHeader
                                                value="Od" 
id="viewColumnHeader7">
                                            </xp:viewColumnHeader>
                                        </xp:viewColumn>
                                        <xp:viewColumn
                                            columnName="TXdoDatuma" 
id="viewColumn8">
                                            <xp:viewColumnHeader
                                                value="Do" 
id="viewColumnHeader8">
                                            </xp:viewColumnHeader>
                                        </xp:viewColumn>
                                        <xp:viewColumn
                                            columnName="TXlokacija" 
id="viewColumn9">
                                            <xp:viewColumnHeader
                                                value="Lokacija" 
id="viewColumnHeader9">
                                            </xp:viewColumnHeader>
                                        </xp:viewColumn>
                                        <xp:viewColumn
                                            columnName="AUorganizator" 
id="viewColumn10">
                                            <xp:viewColumnHeader
                                                value="Organizator" 
id="viewColumnHeader10">
                                            </xp:viewColumnHeader>
                                        </xp:viewColumn>
                                    </xp:viewPanel>
                                </xp:panel>
                            </p>
                        </div>
                        <div class="modal-footer">

                            <xp:button value="Save" id="button6"
                                refreshId="DogodkiRep" 
refreshMode="partial">
                                <xp:eventHandler event="onclick"
                                    submit="true" refreshMode="partial"
refreshId="button6"
                                    immediate="false" save="true">
                                    <xp:this.action>
                                        <xp:executeScript>
                                            <xp:this.script><![CDATA[#
{javascript:
var viewPanel=getComponent("viewPanel1");
var docIDArray=viewPanel.getSelectedIds();
var unidArray = new Array();

//Prijava.setValue("KeyDokOs", DodajOseb.getValue("KeyDokOs"));
//Prijava.save();
for(i=0; i < docIDArray.length; i++) {
var unid=database.getDocumentByID(docIDArray[i]).getUniversalID();
unidArray.push(unid);

//functiion, da preveriš, ali že obstaja zapis POVEZAVA

var _doc:NotesDocument = database.createDocument();
_doc.replaceItemValue("Form","Prijava");
_doc.replaceItemValue("KeyPrijava",_doc.getUniversalID());
_doc.replaceItemValue("KeyDogodek", unid);
_doc.replaceItemValue("KeyDokOs", DodajOseb.getItemValueString("KeyDokOs"));
_doc.save(true, false)
 }
 //Prijava.setValue("KeyDogodek", unidArray);}]]></xp:this.script>
                                        </xp:executeScript>
                                    </xp:this.action>
                                    <xp:this.onComplete><![CDATA[//close
modal window
$('#myModal').modal('hide');
//refresh Repeater
var _repeat = dojo.query("div[id*='panelMain']");
XSP.partialRefreshGet(_repeat[0].id, {});]]></xp:this.onComplete>
                                </xp:eventHandler>
                            </xp:button>
                        </div>
                    </div>

                </div>
            </div>
        </div>

And after modal theres bootstrap's panel body in which I display all the added events.

<div class="panel-body">
            <xp:panel id="panelMain">
                <xp:this.data>
                    <xp:dominoView var="view1" viewName="Dogodki">
                    </xp:dominoView>
                </xp:this.data>
                <xp:text escape="true" id="computedField1"
                    style="display:none;">
                    <xp:this.value><![CDATA[#{javascript://*var vw:NotesView
= database.getView("(vwPovezava)");
requestScope.data = @DbLookup("","
(vwPovezava)",DodajOseb.getItemValueString("KeyDokOs"),2);}]]>
</xp:this.value>
                </xp:text>
                <div class="row">
                    <div class="col-md-2">
                        <xp:label value="" id="label2">
                            Naziv dogodka
                        </xp:label>
                    </div>
                    <div class="col-md-2">
                        <xp:label value="" id="label4">
                            Trajanje
                        </xp:label>
                    </div>
                    <div class="col-md-2">
                        <xp:label value="" id="label5">
                            Datum začetka
                        </xp:label>
                    </div>
                    <div class="col-md-2">
                        <xp:label value="" id="label6">
                            Datum konca
                        </xp:label>
                    </div>
                    <div class="col-md-2">
                        <xp:label value="" id="label7">
                            Lokacija
                        </xp:label>
                    </div>
                    <div class="col-md-2">
                        <xp:label value="" id="label8">
                            Organizator
                        </xp:label>
                    </div>
                </div>
                <xp:br></xp:br>
                <xp:repeat id="DogodkiRep" rows="30" var="rowData"
                    indexVar="indexData" value="# 
{javascript:requestScope.data}"
                    style="text-align:center;">
                    <div class="row" rows="0">
                        <xp:text escape="true" id="computedField3"
                            style="display:none;">
                            <xp:this.value><![CDATA[#{javascript:if (typeof
rowData == "undefined") return null; var vw = database.getView("Dogodki");
requestScope.docData = vw.getDocumentByKey(rowData);}]]></xp:this.value>

                        </xp:text>

                        <div class="col-md-2">
                            <xp:text escape="true" id="naziv"
                                tagName="div" style="float:left;">
                                <xp:this.value><![CDATA[#{javascript:return
requestScope.docData.getItemValueString("NMnaziv");}]]></xp:this.value>
                            </xp:text>
                        </div>
                        <div class="col-md-2">
                            <xp:text escape="true" id="trajanje"
                                tagName="div" style="float:left;">
                                <xp:this.value><![CDATA[#{javascript:return
requestScope.docData.getItemValueString("RadioButton");}]]></xp:this.value>
                            </xp:text>
                        </div>
                        <div class="col-md-2">
                            <xp:text escape="true" id="datumZacetka"
                                tagName="div" style="float:left;">
                                <xp:this.value><![CDATA[#{javascript:return
requestScope.docData.getItemValue("TXodDatuma");}]]></xp:this.value>
                            </xp:text>
                        </div>
                        <div class="col-md-2">
                            <xp:text escape="true" id="datumKonca"
                                tagName="div" style="float:left;">
                                <xp:this.value><![CDATA[#{javascript:return
requestScope.docData.getItemValue("TXdoDatuma");}]]></xp:this.value>
                            </xp:text>
                        </div>
                        <div class="col-md-2">
                            <xp:text escape="true" id="lokacija"
                                tagName="div" style="float:left;">
                                <xp:this.value><![CDATA[#{javascript:return
requestScope.docData.getItemValueString("TXlokacija");}]]></xp:this.value>
                            </xp:text>
                        </div>
                        <div class="col-md-2">
                            <xp:text escape="true" id="organizator"
                                tagName="div" style="float:left;">
                                <xp:this.value><![CDATA[#{javascript:return
requestScope.docData.getItemValueString("AUorganizator");}]]></xp:this.value>
                            </xp:text>
                        </div>
                        <div style="clear:both;">&#160;</div>
                    </div>
                </xp:repeat>
            </xp:panel>
        </div>
    </div>
</xp:panel>
</xp:view>

So this is how my whole Person cc looks like looks like. Now when I choose and event I want to add, I simply click the button, modal shows up and I select all the events I want to add and click save afterwards. Save button also refreshes the repeater after modal is hidden. But I want to deselect/refresh all the selected checkboxes, when I click that save button.

javascript dojo xpages
Original Q&A
0

There are 0 answers

Related Questions in JAVASCRIPT

Related Questions in DOJO

Related Questions in XPAGES

Popular Questions

Popular Tags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json python-3.x ruby-on-rails .net sql-server swift django angular objective-c pandas excel

Trending Questions