CODEWITHSUNDEEP
javascriptjqueryjquery-ui-dialog
wazaminator
wazaminator

Reputation: 43

Buttons in jquery dialog don't show

I'm trying to have a modal form on a page, for this I am using a jquery dialog. However, the buttons on the dialog don't appear when the form does.

Here is the javascript creating the dialog :

   function showform() {
  $("#formplan").dialog({
     open: function(event, ui) {
        $(".ui-dialog-titlebar-close").hide();
     },
     modal: true,
     autoOpen: false,
     dialogClass: "dialogform",
     buttons: [{
        text: "Planifier",
        click: function() {
           $("#formplan").dialog("close");
           $("#formplan").submit();
        }
     }, {
        text: "Cancel",
        click: function() {
           $("#formplan").dialog("close");
           $("#formplan").dialog('destroy').remove();
        }
     }]
  });
  $("#formplan").dialog('open');
};

And here is the form included along with the call to the script: 

<div id="formplan" class="dijitDialog" role="dialog" style="display:none">
   <form style="" action="javascript:refreshTab('tabadministrationplanificateurtaches', '/profusion/scheduler/etat.html?onglet=tabadministrationplanificateurtaches&mode=integre&planed=ImportPays ' + getfromform())">
      <br>planification de la tache ImportPays :
      <br>
      <input type="radio" name="periodicity" value="1" checked> tout les jours
      <br>
      <input type="radio" name="periodicity" value="2"> par jours de la semaine :
      <input type="checkbox" name="Daysofweek" value="1"> dimanche
      <input type="checkbox" name="Daysofweek" value="2"> lundi
      <input type="checkbox" name="Daysofweek" value="3"> mardi
      <input type="checkbox" name="Daysofweek" value="4"> mercredi
      <input type="checkbox" name="Daysofweek" value="5"> jeudi
      <input type="checkbox" name="Daysofweek" value="6"> vendredi
      <input type="checkbox" name="Daysofweek" value="7"> samedi
      <br>
      <input type="radio" name="periodicity" value="3"> par mois :
      <input type="text" name="Daysofmonth" placeholder="ex : 1:3:21">
      <br>effectuer à :
      <input type="text" name="hours" placeholder="ex : HH:mm:ss/HH:mm:ss">
      <br> </form>
</div>
<script>
   showform();
</script>

This code is pushed to the HTML using JAVA , so the script calling showform() is there only if needed. Also, I noticed before than I could still click on the page behind, even with the modal:true, and if I clicked on the button generating the page( doing a refresh in the process), my form would appear twice. My guess is that it comes from the call of showform() directly (without being linked to an onclick() event).

Thanks,

Upvotes: 0

Views: 89

Answers (2)

wazaminator
wazaminator

Reputation: 43

I moved the id="formplan" from the div to the form and it seemed to do the trick. I also did put the call to showform() in a document.ready() as @zakaria did.

Upvotes: 0

himyata
himyata

Reputation: 338

Call your showform() function in javaScript file like this

 $( document ).ready(function() {
      showform();
  });

jsFiddle link

Upvotes: 1

Related Questions