How to have a reusable jquery form modal

Question

I have some files :

*vehicule_parc.php :*

<script language=javascript src="../js/vehicule_parc.js"></script>
<h3 class="headInfoBox" id="cch">Conso Carburant >></h3>
<hr />
    <div id="cc">           
        <table cellpadding="0" cellspacing="0" border="0" class="display boxtable" id="consoTable">
            <thead>
                <tr>
                    <th>Date</th>
                    <th>Heure</th>
                    <th>Quantité</th>
                    <th>Coût</th>
                    <th>Carte</th>
                </tr>
            </thead>
            <tbody>
                <tr class="odd gradeA">
                    <td>21/03/2011</td>
                    <td>10:00</td>
                    <td>30</td>
                    <td>40</td>
                    <td>02248</td>
                    </tr>
            ...
    </div><!-- cc -->
<button id="addcc">Ajouter</button>
<?php include 'form_conso_carb.html'; ?>

*form_conso_carb.html :*

<div id="form_conso_carb" title="Nouvelle Consommation">
    <form>
        <label for="date">Date</label>          <input type="text" name="date"      value="" />
        <label for="heure">Heure</label>        <input type="text" name="heure"     value="" />
        <label for="quantite">Heure</label>     <input type="text" name="quantite"  value="" />
        <label for="cout">Coût</label>          <input type="text" name="cout"      value="" />
        <label for="carte">Carte</label>            <input type="text" name="carte"     value="" /> 
    </form>
</div>

*vehicule_parc.js :*

   //some code before
    J( "#form_conso_carb" ).dialog({
            autoOpen    : false,
            height      : 'auto',
            width       : 300,
            modal       : true,
            position    : 'middle',
            Cancel  : function() {
                        J(this).dialog( "close" );
                    },
            buttons : {
                "Envoyer"   : function() {

                            }
            }
        });

        J( "#addcc" )
        .button()
        .click(function() {
            J( "#form_conso_carb" ).dialog( "open" );
        });
        //some code after

So i would have the code you see in vehicule_parc.js in a reusable file. But the problem is the code have to know the id of a table - here id="consoTable" - to ajax the table. And why not, with form_conso_carb.html in the same file too.

The goal is to simply add un modal form to CRUD a consoTable .
I hope i am understandable.

Answer 1

Make it a function, and use this in the click event to reference the current object and pass its as a parameter:

    function showDialog(element) {
       $(element).dialog({
            autoOpen    : false,
            height      : 'auto',
            width       : 300,
            modal       : true,
            position    : 'middle',
            Cancel  : function() {
                        J(this).dialog( "close" );
                    },
            buttons : {
                "Envoyer"   : function() {

                            }
            }
        });
        }

        J( "#addcc" )
        .button()
        .click(function() {
            showDialog(this);
        });
   }

Answer 2

I have the solution from alsacreations (FR) , i have to encapsulate the code, like this example, and put it in a file :

var bibliJsActif = (function() { 
  // Membres privés 
  function init() { 
    bibliJsActif.ajouterClasse(document.body, bibliJsActif.nouvelleClasse); 
  } 

  if (document.getElementById && document.createTextNode) { 
    window.onload = init; 
  } 

  // Membres publics 
  return { 
    "ajouterClasse": function(element, classe) { 
      if (element.className) { 
        element.className += " "; 
      } 

      element.className += classe; 
    }, 

    "nouvelleClasse": "jsActif" 
  }; 
})();