prevent jsf page having datagrid to reload after a click button

[abdimen]

Hi,

I have a jsf page which contain a rich:dataGrid that show data from my database.

In each h: panelGrid (which represents a row of my datagrid),I have a CommandLinks that allows me to display a rich:modalPanel on the click of this CommandLinks.

My problem is that when I click the button, my modalPanel appears only for a few moments and then it disappears. The cause of this problem is that when I click the button, the jsf page reloads so  the  modal  Panel  disappears.

Please is there a trick to not to restart the page after closing the rich: modalPanel?? because i want  that  the  user  select a value  from  my  modal  panel,  but  i  didn't  find  a  solution  to  maitain  this  modalPanel

<rich:panel id="richPanel1">
 <h:form id="formulairePanier">

 <rich:panel id="richPanel2">
 <f:facet name="header">
 <h:outputText id="titreSousCateg"
 value=" *** Les produits commandés *** "></h:outputText>

 </f:facet>


 <rich:dataGrid value="#{ligneDeCommandeBean.tousLignes}"
 var="lignes" columns="1" elements="8" width="600px" id="dataGrid">
 <center>
 <h:outputText
 value="Prix total du panier : #{ligneDeCommandeBean.prixTotalPanier}"
 style="FONT-SIZE: small; FONT-WEIGHT: bold; COLOR: #ff0080;" />
 </center>


 <rich:panel bodyClass="pbody">
 <f:facet name="header">
 <h:outputText value=" *** "></h:outputText>
 </f:facet>
 <h:panelGrid columns="2" id="panelGrid">
 <h:outputText value="N° du Panier : " styleClass="label"></h:outputText>
 <h:outputText value="#{lignes.panier.idPan}" />
 <h:outputText value="le Client : " styleClass="label"></h:outputText>
 <h:outputText value="#{lignes.client.login}" />
 <h:outputText value="le Produit : " styleClass="label"></h:outputText>
 <h:outputText value="#{lignes.produit.libeleProd}" />
 <h:outputText value="Prix du Produit : " styleClass="label"></h:outputText>
 <h:outputText value="#{lignes.produit.prixProd}" />
 <h:outputText value="Quantité : " styleClass="label"></h:outputText>

 <h:outputText value="#{lignes.quantComm}" id="qt">

 </h:outputText>
 <h:outputText value="Prix Total " styleClass="label"></h:outputText>
 <h:outputText value="#{lignes.prixTotQt}" id="pr" />



 <h:commandLink value="" id="link" style="FONT-WEIGHT: bold; FONT-SIZE: small;">
 ********** Modifier quantité **********
 <rich:componentControl for="modal1" attachTo="link"
 operation="show" event="onclick" />

 <f:setPropertyActionListener
 target="#{ligneDeCommandeBean.id_prod}"
 value="#{lignes.produit.idProd}" />

 <f:setPropertyActionListener
 target="#{ligneDeCommandeBean.libProduit}"
 value="#{lignes.produit.libeleProd}" />

 <f:setPropertyActionListener
 target="#{ligneDeCommandeBean.prixUnitaire}"
 value="#{lignes.produit.prixProd}" />
 <f:setPropertyActionListener
 target="#{ligneDeCommandeBean.quantite}"
 value="#{lignes.quantComm}" />
 </h:commandLink>


 </h:panelGrid>
 </rich:panel>
 </rich:dataGrid>
 <center>
 <h:outputText
 value="Prix total du panier : #{ligneDeCommandeBean.prixTotalPanier}"
 style="FONT-SIZE: small; FONT-WEIGHT: bold; COLOR: #ff0080;" />
 </center>
 </rich:panel>
 </h:form>

 </rich:panel>

and here is the code of my modalPanel (in the same page) :

<rich:modalPanel id="modal1" width="600" height="200">

 <f:facet name="header">
 <h:panelGroup>
 <h:outputText value="Modification de la quantité du produit" />
 </h:panelGroup>
 </f:facet>

 <f:facet name="controls">
 <h:panelGroup>
 <h:graphicImage value="/images/close.gif" styleClass="hidelink"
 id="hidelink" />
 <rich:componentControl for="modal1" attachTo="hidelink"
 operation="hide" event="onclick" />
 </h:panelGroup>
 </f:facet>

 <h:form>

 <h:outputText value ="Produit : + #{ligneDeCommandeBean.libProduit}"/>
 <br></br>
 <h:outputText value ="Produit : + #{ligneDeCommandeBean.prixUnitaire}"/>
 <h:outputText
 value="saisir la nouvelle quantité puis cliquez sur valider : "
 style="COLOR: #0080c0; FONT-WEIGHT: bold; FONT-SIZE: small;" />

 <h:commandButton value="Valider"
 action="#{ligneDeCommandeBean.reCalculerPrix}">
 </h:commandButton>

 <rich:inputNumberSpinner id="nouvValeurQte"
 value="#{ligneDeCommandeBean.quantite}" style=" width : 118px;"></rich:inputNumberSpinner>


 </h:form>

I am looking forwards your answers, thank you in advance.