jQuery UI Widgets › Forums › Grid › hide popup window content before grid is displayed
This topic contains 3 replies, has 2 voices, and was last updated by claudegel 9 years, 11 months ago.
Viewing 4 posts - 1 through 4 (of 4 total)
-
Author
-
I<ve a grid with a popup window to edit each line of the grid. when I open the script I see the element of the popup window (input field) until the grid is initialized.
I initialise the popup like this
$("#lepopup").jqxWindow('hide');How can I mask the popup until I need it to edit a grid row
Hi claudegel,
I suggest you to look at: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/popupediting.htm?arctic. It shows how to edit data via Dialog.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com/That’s not giving me any clue. My problem is that when I open the script, the grid is not displayed but the field in the popup window is showing up. I think that normally the popup is under the grid so I dont see it until I use $(“#lepopup”).jqxWindow(‘open’);
In the example you gave, the grid is already open so the popup windows is masked. In my case the grid is not open as I need to select some data before I open it. So I don’t see a popup window but just all the field it contain (html input). How do I prevent these fields to showup before I open the grid. Or can I open an empty grid to mask these field ?
Here is my script
<!DOCTYPE html> <?php include "../../db-local.php"; //validation usager ?> <html lang="fr"> <head> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8"> <link rel="stylesheet" href="../../css/form.css" type="text/css" /> <link rel="stylesheet" href="../../java/jqwidgets-3.6/jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../../java/jqwidgets-3.6/jqwidgets/styles/jqx.classic.css" type="text/css" /> <script type="text/javascript" src="../../java/jquery-1.11/jquery-1.11.2.min.js"></script> <script type="text/javascript" src="../../java/jqwidgets-3.6/jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../java/jqwidgets-3.6/jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../java/jqwidgets-3.6/jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../java/jqwidgets-3.6/jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../../java/jqwidgets-3.6/jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../../java/jqwidgets-3.6/jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../../java/jqwidgets-3.6/jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../../java/jqwidgets-3.6/jqwidgets/jqxgrid.js"></script> <script type="text/javascript" src="../../java/jqwidgets-3.6/jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="../../java/jqwidgets-3.6/jqwidgets/jqxgrid.edit.js"></script> <script type="text/javascript" src="../../java/jqwidgets-3.6/jqwidgets/jqxgrid.export.js"></script> <script type="text/javascript" src="../../java/jqwidgets-3.6/jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../../java/jqwidgets-3.6/jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="../../java/jqwidgets-3.6/jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="../../java/jqwidgets-3.6/jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../../java/jqwidgets-3.6/jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../../java/jqwidgets-3.6/jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../../java/jqwidgets-3.6/jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../../java/jqwidgets-3.6/jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../../java/jqwidgets-3.6/jqwidgets/globalization/globalize.culture.fr-FR.js"></script> <script type="text/javascript"> $(document).ready(function () { //initialiser les boutons du bas de page $("#Termine").jqxButton({ disabled: true, width: '80', height: '20', theme: 'classic'}); $("#Suivant").jqxButton({ disabled: true, width: '80', height: '20', theme: 'classic'}); $("#Pause").jqxButton({ disabled: true, width: '80', height: '20', theme: 'classic'}); $("#Annule").jqxButton({ disabled: true, width: '80', height: '20', theme: 'classic'}); //initialiser une ligne de la grille var generaterow = function (i) { var row = {}; row["no_facture"] = "0"; row["code_prod"] = "-"; row["qtt"] = "0"; row["descrip"] = "-"; row["no_lot"] = "-"; return row; } //adresse du moteur de recherche et autre constantes var url = "../moteur/index.php"; var resp = 9; var table_form = "q_exp_f_04"; var ficheno = 169; //selectionner la date $("#jqxdate").jqxDateTimeInput({ theme: 'classic', width: '150px', height: '25px', showCalendarButton: true, formatString: 'yyyy-MM-dd', culture: 'fr-FR', showFooter:true, todayString: "Aujourd'hui", clearString: 'Effacer', }); var ladate = $('#jqxdate').jqxDateTimeInput('getText'); //selectionner le numero de formulaire var source_form = { datatype: "json", type: "POST", datafields: [ { name: 'AUTO_INCREMENT' } ], url: url, async: false, data: { select: true, dbase: "information_schema.tables", numrow: "1", filtre: "table_name = 'formadmin' AND table_schema = DATABASE( )", ordre: "-", field: "AUTO_INCREMENT" } }; var dataAdapter3 = new $.jqx.dataAdapter(source_form, { loadComplete: function (records){}, }); dataAdapter3.dataBind(); var form_no = dataAdapter3.records[0].AUTO_INCREMENT; $('#formulaire').html("Formulaire no: " + form_no); // prepare le data pour liste des clients var source = { datatype: "json", type: "POST", datafields: [ { name: 'nocli' }, { name: 'nom' } ], url: url, async: false, data: { select: true, dbase: "client", numrow: "*", filtre: "-", ordre: "nom desc", field: "nom,nocli" } }; var dataAdapter = new $.jqx.dataAdapter(source); // Creer une jqxDropDownList des clients $("#jqxWidget").jqxDropDownList({ source: dataAdapter, displayMember: "nom", valueMember: "nocli", width: 300, height: 25, placeHolder: "Choisir le client" }); //liste des formulaires ouverts var source_actif = { datatype: "json", type: "POST", datafields: [ { name: 'form_no' }, { name: 'date_actif' } ], url: url, async: false, data: { select: true, dbase: "formadmin", numrow: "*", filtre: "ficheno=169 AND complet=0 AND conforme=-1", ordre: "form_no asc", field: "form_no,concat(form_no,'-',date_actif) as liste" } }; var dataAdapter4 = new $.jqx.dataAdapter(source_actif); // Creer une jqxDropDownList des clients $("#open_list").jqxDropDownList({ source: dataAdapter4, displayMember: "form_no", valueMember: "form_no", width: 260, height: 25, placeHolder: "Choisir le formulaire à terminer" }); // recharger la grille avec les valeurs du formulaire $("#open_list").on('select', function (event) { //rouver le numero du formulaire var formno = event.args.item.value; // desactiver les autre liste $("#jqxWidget").jqxDropDownList({ disabled: true }); $("#open_list").jqxDropDownList({ disabled: true }); $('#jqxdate').jqxDateTimeInput({disabled: true}); //var commit = $("#jqxgrid").jqxGrid('reload', formno); }); // Initialiser la fenetre popup // $("#lepopup").jqxWindow('hide'); // prepare la grille qui s'affiche si on selectionne un item de la liste $("#jqxWidget").on('select', function (event) { // get client's ID. var nocli = event.args.item.value; // deuxieme dataadapter pour la grille $("#jqxWidget").jqxDropDownList({ disabled: true }); $("#open_list").jqxDropDownList({ disabled: true }); var source2 = { datatype: "json", type: "POST", datafields: [ { name: 'nocli' }, { name: 'date' }, { name: 'row' }, { name: 'no_facture' }, { name: 'code_prod' }, { name: 'qtt' }, { name: 'descrip' }, { name: 'no_lot' }, { name: 'no_retour'} ], url: url, async: false, //ajouter un rang vide addrow: function (rowid, rowdata, position, commit) { // ajouter une ligne a la base de donnees var data = "insert=true&dbase=" + table_form + "&nocli=" + nocli + "&date=" + ladate + "&formno=" + form_no + "&row=" + rowid + "&cause=0&" + $.param(rowdata); $.ajax({ dataType: 'json', url: '../moteur/index.php', type: "POST", data: data, cache: false, success: function (data, status, xhr) { // insert command is executed. $("#Termine").jqxButton({disabled: false}); $("#Suivant").jqxButton({disabled: false}); $("#Pause").jqxButton({disabled: false}); $("#Annule").jqxButton({disabled: false}); $('#jqxdate').jqxDateTimeInput({disabled: true}); commit(true); }, error: function (jqXHR, textStatus, errorThrown) { // cancel changes. commit(false); } }); }, updaterow: function (rowid, rowdata, commit) { // changer les donnees d'une ligne dans la base de donnees var selectedrow = $('#jqxgrid').jqxGrid('selectedrowindex'); var filtre = "formno=" + form_no + " AND row=" + $('#jqxgrid').jqxGrid('getrowid',selectedrow); var data = "update=true&dbase=" + table_form + "&filtre=" + filtre + "&" + $.param(rowdata); $.ajax({ dataType: 'json', url: '../moteur/index.php', type: "POST", data: data, cache: false, success: function (data, status, xhr) { // insert command is executed. commit(true); }, error: function (jqXHR, textStatus, errorThrown) { // cancel changes. commit(false); } }); }, deleterow: function (rowid, commit) { //effacer une ligne de la base de donnees var filtre = "formno=" + form_no + " AND row=" + rowid; var data = "delete=true&dbase=" + table_form + "&filtre=" + filtre; $.ajax({ dataType: 'json', url: '../moteur/index.php', type: "POST", data: data, success: function (data, status, xhr) { // insert command is executed. commit(true); }, error: function (jqXHR, textStatus, errorThrown) { // cancel changes. commit(true); } }); } }; var dataAdapter2 = new $.jqx.dataAdapter(source2); // initializer les champs du questionnaire. $("#nofacture").jqxInput({ theme: 'classic', width: 150, height: 23 }); $("#nolot").jqxInput({ theme: 'classic', width: 150, height: 23 }); $("#codeprod").jqxInput({ theme: 'classic', width: 150, height: 23 }); $("#quantite").jqxInput({ theme: 'classic', width: 150, height: 23 }); $("#cause").jqxInput({ theme: 'classic', width: 250, height: 23 }); var editrow = 0; // initialiser la grille des items retournes $("#jqxgrid").jqxGrid({ width: 800, columns: [ { text: 'No Facture', dataField: 'no_facture', width: 80 }, { text: 'No Lot', dataField: 'no_lot', width: 60 }, { text: 'Code Produit', dataField: 'code_prod', width: 90 }, { text: 'Quantite', dataField: 'qtt', width: 70 }, { text: 'Cause', dataField: 'descrip', width: 450 }, { text: 'Editer', datafield: 'Edit', width: 50, columntype: 'button', cellsrenderer: function () { return "Editer"; }, buttonclick: function (row) { // open the popup window when the user clicks a button. editrow = row; var offset = $("#jqxgrid").offset(); $("#lepopup").jqxWindow({ position: { x: parseInt(offset.left) + 80, y: parseInt(offset.top) + 80 } }); // get the clicked row's data and initialize the input fields. var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow); $("#nofacture").val(dataRecord.no_facture); $("#nolot").val(dataRecord.no_lot); $("#codeprod").val(dataRecord.code_prod); //$("#quantite").jqxNumberInput({ decimal: dataRecord.qtt}); $("#quantite").val(dataRecord.qtt); $("#cause").val(dataRecord.descrip); // show the popup window. $("#lepopup").jqxWindow('open'); } } ], source: dataAdapter2 }); //traduction var localizationobj = {}; localizationobj.emptydatastring = "Aucune donnée disponible"; $("#jqxgrid").jqxGrid('localizestrings', localizationobj); //colonne invisible $('#jqxgrid').jqxGrid('hidecolumn', 'no_retour'); $('#jqxgrid').jqxGrid('hidecolumn', 'row'); $('#jqxgrid').jqxGrid('hidecolumn', 'date'); // initialiser la fenetre d'edition . $("#lepopup").jqxWindow({ width: 370, resizable: true, isModal: true, autoOpen: false, cancelButton: $("#Cancel"), modalOpacity: 0.01 }); $("#lepopup").on('open', function () { $("#nofacture").jqxInput('selectAll'); }); $("#Cancel").jqxButton({ theme: 'classic' }); $("#Save").jqxButton({ theme: 'classic' }); // update the edited row when the user clicks the 'Save' button. $("#Save").click(function () { if (editrow >= 0) { //var selectedrow = $('#jqxgrid').jqxGrid('selectedrowindex'); var row = { no_facture: $("#nofacture").val(), no_lot: $("#nolot").val(), code_prod: $("#codeprod").val(), qtt: $("#quantite").val(), descrip: $("#cause").val(), date: ladate }; var rowID = $('#jqxgrid').jqxGrid('getrowid', editrow); $('#jqxgrid').jqxGrid('updaterow', rowID, row); $("#lepopup").jqxWindow('hide'); } }); }); $('#addrowbutton').click(function () { // trouver combien de rang sont present dans la grille var datainformations = $("#jqxgrid").jqxGrid("getdatainformation"); var rowscounts = datainformations.rowscount; // creer nouveau rang dans la grille. var datarow = generaterow(); var row_id = $("#jqxgrid").jqxGrid('getrowid',rowscounts+1); $("#jqxgrid").jqxGrid('addrow', row_id, datarow); }); $("#deleterowbutton").bind('click', function () { var selectedrowindex = $("#jqxgrid").jqxGrid('getselectedrowindex'); var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount; if (selectedrowindex >= 0 && selectedrowindex < rowscount) { var id = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex); var commit = $("#jqxgrid").jqxGrid('deleterow', id); } }); //terminer le formulaire et sauver les donnees $('#Termine').on('click', function () { close_form(form_no,"../menu.php"); }); //terminer le formulaire, sauver les donnees et en ouvrir un autre $('#Suivant').on('click', function () { close_form(form_no,"./index.php"); }); //fermeture du formulaire function close_form(form_no,adress) { var registre = "<a href=\"show.php?form_no=" + form_no +"\" target=\"retour\"></a>"; var data = "insert=true&dbase=formadmin&date_actif=" + ladate + "&ficheno=" + ficheno + "&delais=1&date_retourne=" + ladate + "&complet=1&conforme=0&resp=" + resp + "&source=0&lien=0&qtt_ncr=0®istre=" + registre; $.ajax({ dataType: 'json', url: '../moteur/index.php', type: "POST", data: data, cache: false, success: function(data){ //alert(data); window.location.href = adress; }, error: function(){ alert("marche pas"); } }); } //mettre en pause le formulaire pour terminer plutard $('#Pause').on('click', function () { var adress = "../menu.php"; var data = "insert=true&dbase=formadmin&date_actif=" + ladate + "&ficheno=" + ficheno + "&delais=1&date_retourne=" + ladate + "&complet=0&conforme=-1&resp=" + resp + "&source=0&lien=0&qtt_ncr=0®istre=''"; $.ajax({ dataType: 'json', url: '../moteur/index.php', type: "POST", data: data, cache: false, success: function(data){ //alert(data); window.location.href = adress; }, error: function(){ alert("marche pas"); } }); }); //annuler tout le formulaire $('#Annule').on('click', function () { var adress = "../menu.php"; var filtre = "formno=" + form_no; var data = "delete=true&dbase=" + table_form + "&filtre=" + filtre; $.ajax({ dataType: 'json', url: '../moteur/index.php', type: "POST", data: data, cache: false, success: function(data){ window.location.href = adress; }, error: function(){ alert("marche pas"); } }); }); }); </script> </head> <body class="default"> <div class="header"> <h3><div id="formulaire"></div></h3> <p><b>Note:</b> 1- Choisir le client ou choisir un formulaire déjà actif, 2- choisir la date de retour du ou des produit(s), 3- ajouter et compléter chaque ligne du tableau (une par produit)</p> </div> <br> <div class="content"> <div id="jqxWidget" style="font-size: 13px; font-family: verdana; float: left;"> <br> </div> <div id="open_list" style"font-size: 13px; font-family: verdana; float: left;"> <br> </div> <div class="date"> Date du retour: <div id="jqxdate"></div> </div> <br><br><br> <div id="jqxgrid"></div> <div style="float: left;" id="selectionlog"> </div> <div id="lepopup"> <div style="overflow: hidden;"> <table> <th><td colspan="2" align="center"> Compléter la grille </td></th> <tr> <td align="right">No_Facture:</td> <td align="left"><input id="nofacture" /></td> </tr> <tr> <td align="right">No_Lot:</td> <td align="left"><input id="nolot" /></td> </tr> <tr> <td align="right">Code_Produit:</td> <td align="left"><input id="codeprod" /></td> </tr> <tr> <td align="right">Quantité:</td> <td align="left"><input id="quantite"></td> </tr> <tr> <td align="right">Description:</td> <td align="left"><input id="cause"></td> </tr> <tr> <td align="right"></td> <td style="padding-top: 10px;" align="right"><input style="margin-right: 5px;" type="button" id="Save" value="Save" /><input id="Cancel" type="button" value="Cancel" /></td> </tr> </table> </div> </div> <input id="addrowbutton" type="button" value="Ajouter" title="Ajouter une ligne au tableau"/> <input id="deleterowbutton" type="button" value="Effacer" title="Effacer la ligne sélectionnée"/> </div> <br> <div class="footer"> <input type="button" value="Terminé" id='Termine' title="Compléter ce formulaire et fermer la fenêtre"/> <input type="button" value="Suivant" id='Suivant' title="Compléter ce formulaire et en ouvrir un autre"/> <input type="button" value="Pause" id='Pause' title="Continuer plus tard"/> <input type="button" value="Anuler" id='Annule' title="Anuler tout le formulaire"/> <p>Les Fines Herbes de Chez Nous Inc.</p> </div> </body> </html>Thanks,
-
AuthorPosts
Viewing 4 posts - 1 through 4 (of 4 total)
You must be logged in to reply to this topic.