TransWikia.com

How to refresh contents of modal on button click? (VF Page)

Salesforce Asked by dotname on December 24, 2021

I’m using a modal that has as input fields object fields linked to the controller. After filling the modal I send the “experience” to the controller and save it and send back an empty singlExp so that the fields would be empty once opened another time. What I’m doing is creating a new ‘experience’ and sending it to my controller.

However it doesn’t seem to be working, bear in mind that I don’t really use javascrip and jquery so I thought maybe the functions I used were not correct.
I used $(“#myModal”).reload(); but I think the syntax is not it. On the commandbutton I call the refresh function on oncomplete but I don’t know where I went wrong.

Also I don’t want to just clear values I want to “Update” the values in the fields. Since I do have another form that takes the values sent by the controller same principle with the object.

My modal is like this:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">Expérience</h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>Nom</label><br />
                    <apex:inputField value="{!singleExp.Name}"  styleClass="form-control" />
                </div>
                <div class="form-group">
                    <label>Employeur</label><br />
                    <apex:inputField value="{!singleExp.Employeur__c}"  styleClass="form-control"/>
                </div>
                <div class="form-group">
                    <label>Date de Début</label><br />
                    <apex:inputField value="{!singleExp.Date_de_debut__c}" styleClass="form-control"/>
                </div>
                <div class="form-group">
                    <label>Date de Fin</label><br />
                    <apex:inputField value="{!singleExp.Date_de_fin__c}"  styleClass="form-control"/>
                </div> 
                <div class="form-group">
                    <label>Intitulé du poste</label><br />
                    <apex:inputField value="{!singleExp.Intitul_du_poste__c}"  styleClass="form-control"/>
                </div>
                <div class="form-group">
                    <label>Descriptif du poste</label><br />
                    <apex:inputField value="{!singleExp.Descriptif_du_poste__c}" html-placeholder="Descriptif du poste" styleClass="form-control"/>
                </div>
            </div>
            <div class="modal-footer">
                <apex:commandButton styleclass="btn btn-primary" value="Ajouter" action="{!addExperience}" reRender="contactTable" onComplete="$('#myModal').modal('hide');$('body').removeClass('modal-open');$('.modal-backdrop').remove(); refresh();"/>
            </div>
        </div>
    </div>
 </div>

And my script is as follows: 

        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo= sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG+qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A==" crossorigin="anonymous"></script>

    <script>
    function refresh()
    {
        alert('refresh');
        console.log('in refresh()');
        $("#myModal").reload();
        //$('#myModal').load(window.location.href +'#myModal');
    }
    </script>

Really appreciate it if you could help

javascriptjqueryvisualforce

2 Answers

I see you are using bootstrap and your requirement is to capture values in a form of Modal window and save it in the backend Salesforce Object. I assume once record is saved in the backend salesforce Object you wish to refresh the form so that it doesn't hold the older value in it.

There is no event called reload() for bootstrap modal so this won't work, you can open dev console of your browser to see any error in the UI (reference to document : https://getbootstrap.com/docs/3.3/javascript/#modals-events)

Use html-autocomplete="off" attribute in text fields of the form, this will also avoid showing older value in the UI.

Alternate Solution : You can also try to handle the save functionality using Javascript Remoting and close modal once save is complete, this will give you better control of the UI Elements.

Answered by Gourav Bhardwaj on December 24, 2021

I have noticed that you have rerender attribute which value is contactTable but you don't have the corresponding <apex:outputPanel> tag. So the only change you need is to wrap your div elements with <apex:outputPanel> tag.

<apex:outputPanel id="contactTable">
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">Expérience</h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>Nom</label><br />
                    <apex:inputField value="{!singleExp.Name}"  styleClass="form-control" />
                </div>
                <div class="form-group">
                    <label>Employeur</label><br />
                    <apex:inputField value="{!singleExp.Employeur__c}"  styleClass="form-control"/>
                </div>
                <div class="form-group">
                    <label>Date de Début</label><br />
                    <apex:inputField value="{!singleExp.Date_de_debut__c}" styleClass="form-control"/>
                </div>
                <div class="form-group">
                    <label>Date de Fin</label><br />
                    <apex:inputField value="{!singleExp.Date_de_fin__c}"  styleClass="form-control"/>
                </div> 
                <div class="form-group">
                    <label>Intitulé du poste</label><br />
                    <apex:inputField value="{!singleExp.Intitul_du_poste__c}"  styleClass="form-control"/>
                </div>
                <div class="form-group">
                    <label>Descriptif du poste</label><br />
                    <apex:inputField value="{!singleExp.Descriptif_du_poste__c}" html-placeholder="Descriptif du poste" styleClass="form-control"/>
                </div>
            </div>
            <div class="modal-footer">
                <apex:commandButton styleclass="btn btn-primary" value="Ajouter" action="{!addExperience}" reRender="contactTable" onComplete="$('#myModal').modal('hide');$('body').removeClass('modal-open');$('.modal-backdrop').remove();  "/>
            </div>
        </div>
    </div>
    </apex:outputPanel>

Answered by Patlatus on December 24, 2021

Add your own answers!

Ask a Question

Get help from others!

Recent Answers

Recent Questions

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP