title: Messi Pop Up Box with Internal HTML and Javascript
body: <p>I am developing a php application, using Messi, a jquery pop up box: <a href="http://marcosesperon.es/apps/messi/" rel="nofollow">http://marcosesperon.es/apps/messi/</a></p>
  
  <p>In my application, I have a pricing schedule, which I am trying to make editable. The idea is when they click a button, the messi pop up box comes up and they can select some options and enter data which will then be added to the table. </p>
  
  <p>I have got to the stage where you click the button and the messi pop up box comes up, displaying the select box which the user can select different options. </p>
  
  <p>Code as follows:</p>
  
  <pre><code>function new_header()
  {
      var content = "&lt;form class='format_form' action='add_category.php' method='POST'&gt;
                         &lt;fieldset&gt;
                             &lt;legend&gt;Choose a Pricing Category&lt;/legend&gt;
  
                             &lt;ol&gt;
                                 &lt;li&gt;
                                     &lt;label for='category'&gt;Category&lt;/label&gt;
  
                                     &lt;select id='category' name='category'&gt;
                                         &lt;option value='short_break'&gt;Short Break&lt;/option&gt;
                                         &lt;option value='nightly_rate'&gt;Nightly Rate&lt;/option&gt;
                                         &lt;option value='percentage_off'&gt;Percentage Off&lt;/option&gt;
                                         &lt;option value='free_nights'&gt;Free Nights&lt;/option&gt;
                                     &lt;/select&gt;
                                 &lt;/li&gt;
                             &lt;/ol&gt;
                         &lt;/fieldset&gt;
  
                         &lt;fieldset&gt;
                             &lt;button type='submit' name='add_category' onclick='return validate_form();' id='add_category'&gt;Add the Pricing Category&lt;/button&gt;
                         &lt;/fieldset&gt;
                     &lt;/form&gt;";
  
      new Messi(content, {title: "Add a New Pricing Category", modal: true, width: '650px'});
  }
  </code></pre>
  
  <p>In the table is a clickable image to bring up the messi pop up box, code as follows:</p>
  
  <pre><code>&lt;th scope="col" class="rounded-topright"&gt;
      &lt;img class='hover_off' src='../../../includes/images/table/add_header.png' width='25px' height='25px'&gt;
  
      &lt;a href='#' onclick='new_header()'&gt;
          &lt;img class='hover_on' src='../../../includes/images/table/add_header_hover.png' width='25px' height='25px'&gt;
      &lt;/a&gt;
  &lt;/th&gt;
  </code></pre>
  
  <p>The content that then appears in the messi pop up box depends on the user's selection in the select box. As a test, I am trying to make the system bring up a javascript alert when the select box option is changed, like so:</p>
  
  <pre><code>$(document).ready(function()
  { 
      var category_number;
  
      $("#category").change(function()    //When the category is changed
      { 
          category_number = document.getElementById('category').selectedIndex;        //Get the property location in the array
  
          alert(category_number);
      }); 
  }); 
  </code></pre>
  
  <p>I've tried putting this code first in the .js file I have all the other javascript in, and then when that didn't work, I put it in the .php file with the original pricing schedule table in, but that also didn't work. </p>
  
  <p>Can anyone help? Or failing that, come up with a better way for me to achieve the same?</p>