Return value of a form loaded by Dialogue via Ajax?

Question

Return value of a form loaded by Dialogue via Ajax?

Navigation

#1 by (1 votes)

0

Hello friends, I try to do the following.

I have a page with a series of Tabs, each Tab can create a Dialog that loads by AJAX the content of a form ( link this form will be shown for each Tab that opens it), Every time I save the form data I must return a value to the tab that opened it, something like a callback .

I hope some comment, thank you.

JS called when opening a new tab "tab-option.js"

(function ($, App, url) {
    "use strict";
    $(function () {

        $('.buscar-cliente' + idDynamic).on('click', function () {

            $("#modalCliente" + idDynamic).dialog({
                title: 'Partes',
                closed: false,
                cache: false,
                href: "http://localhost/catalogos/cliente/",
                queryParams: {cliente: value},
                modal: true,
                inline: true,
                onBeforeOpen: function () {
                    $("#modalNuevaParte" + idDynamic).dialog('center');
                }
            }); 
        });

    });
}(jQuery, App, url));

JS that loads when calling the form via ajax (client.js)

(function ($, App, url) {
    "use strict";
    $(function () {

        //Code.....

        $('#guardarCliente' + idDynamic).on('click', function (e) {
             //codigo para guardar datos....

            // Como puedo regresar un valor ala pagina del tab-opcion.js ???? 
        });

    });
}(jQuery, App, url));

javascript jquery

asked by Alexander Morales 16.03.2017 в 19:09

source

1 answer

Running a Java executable jar on a PC [closed] Error configuring Apache Tomcat in Eclipse JEE

score 1 · Accepted Answer

When you invoke the dialog in tab-opcion.js add callback close Ex:

$( "#dialog" ).dialog({
  close: function( event, ui ) {
    //Codigo aqui
    var valorObtenidoDelModal = $(this).data('valorInputModal');
    $("#lblResult").text(valorObtenidoDelModal);
  }
});

Then in cliente.js after you save successfully you set to dialog the value you got and then use it in the close event of it.

dialg.data("valorInputModal", modalInput.val());

//Este seria el js1
$(function() {
  $("#lblResult").text("nada");

  $("#btnMostrar").click(function() {
    $("#dialog").dialog({
      close: function(event, ui) {
        var valorObtenidoDelModal = $(this).data('valorInputModal');
        $("#lblResult").text(valorObtenidoDelModal);
      }
    });
  })
});

//Este seria el js2
$(function() {
  var dialg = $('#dialog'); //Este se corresponde con el dialog, si bien son archivos js distintos, estan referenciados en el mismo HTML por lo cual se puede llegar al DOM y obtener este elemento.
  $("#txtModalInput").change(function(evt) {
    evt.lala = 3;
    var modalInput = $(this); //Este se corresponde con el modalInput
    dialg.data("valorInputModal", modalInput.val());
  });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<input id="btnMostrar" type="button" value="mostrar dialogo" />
<br />
<br /> Valor seleccionado en el dialog:<br />
<span id="lblResult"></span>

<div id="dialog" title="Basic dialog" style="display:none;">
  Ingrese un valor y luego cierre el dialogo.
  <input type="text" id="txtModalInput" />
</div>