0

Preciso confirmar alguns campos separadamente. Ocorre que ele sobrescreve o texto, não aguarda a confirmação e apenas aparece ao final da última chamada e a confirmação desta, se replica para as anteriores. Não sei o que posso fazer pra corrigir isso.

var modalConfirm = function(callback) {
  $("#gti-modal-btn-yes").click(function() {
    callback(true);
    $("#gti-modal").hide();
  });
  
  $("#gti-modal-btn-no").click(function() {
    callback(false);
    $("#gti-modal").hide();
  });
  
  $("#gti-modal-btn-close").click(function() {
    callback(false);
    $("#gti-modal").hide();
  });
}

function modalAsk(msg, oldVal, newVal) {
  
  $("#gti-modal-msg")[0].innerHTML = "<h3>" + msg + "</h3>";
  $("#gti-modal").show();
  
  modalConfirm(function(confirm) {
    if (confirm) {
      oldVal = newVal
      alert('Change')

    } else {
      alert('No Change')
    }
  });
}

function funConfirmFields(fieldName, oldVal, newVal) {
  if (newVal !== "") {
    if (newVal !== oldVal) {
      if (modalAsk('Atenção!</br>Campo: " ' + fieldName.toUpperCase() + '"</br>Valor atual: ' + oldVal + '</br>Novo Valor: ' + newVal + '</br></br>atualizar para o novo valor?')) {
        newVal = oldVal
      }
    }
  } else {
    newVal = oldVal;
  }
  return newVal
}

$(document).ready(function() {  
  $("#txtNome")[0].value = funConfirmFields('Nome',  $("#txtNome")[0].value, "b");
  $("#txtDoc")[0].value = funConfirmFields('Doc', $("#txtDoc")[0].value, "2222");
  $("#txtCel")[0].value = funConfirmFields('Cel', $("#txtCel")[0].value, "456");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div id="gti-modal" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="gti-modal-Label" aria-hidden="false" style="display: none;">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button id="gti-modal-btn-close" type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <p id="gti-modal-titulo" class="modal-title"><i class='fa fa-question-circle pull-rigth '></i> MyModal </p>
      </div>
      <div id="gti-modal-msg" class="modal-body"></div>
      <div class="modal-footer">
        <button id="gti-modal-btn-yes" type="button" class="btn btn-default" data-dismiss="modal" aria-hidden="true">yes</button>
        <button id="gti-modal-btn-no" type="button" class="btn btn-primary">No</button>
      </div>
    </div>
  </div>
</div>
<input class="form-control" type="text" id="txtNome" name="txtNome" value="a"/>
<input class="form-control" type="text" id="txtDoc" name="txtDoc" value= "111"/>
<input class="form-control" type="text" id="txtCel" name="txtCel" value= "123"/>

2
  • Olá Marisco seja muito bem vindo!! Eu não entendi muito bem o que quer fazer Commented 14/03/2020 às 21:35
  • Obrigado, estou tentando confirmar os campos alterados um a um.. faco uma consulta via soap e confronto com com o que já existe na tela o usuário deve decidir qual a informação está correta
    – Marisco
    Commented 14/03/2020 às 21:37

1 Resposta 1

0

Percebi que bootstrap-modalnão se comporta confirm Window então eu poderia usar jquery confirm etc.. mas preferi criar o modal dinamicamente como esta resposta

Este foi o resultado:

function addModal( id,  msg, callback) {            
  html =  '<div id="gti-modal-'+id+'" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="gti-modal-Label" aria-hidden="false" style="display: none;">';
  html += '<div class="modal-dialog">';
  html += '<div class="modal-content">';
  html += '<div class="modal-header">';
  html += '<button id="gti-modal-btn-close" type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>';
  html += '<h3 id="gti-modal-title" class="modal-title"><i class="fa fa-exclamation-triangle pull-rigth"></i> GTI</h3>';  
  html += '</div>';
  html += '<div class="modal-body">';
  html += '<h4>'+msg+'</h4>'
  html += '</div>';
  html += '<div class="modal-footer">';
  html += '<button id="gti-modal-btn-yes-'+id+'" type="button" class="btn btn-default">Yes</button>';
  html += '<button id="gti-modal-btn-no-'+id+'"type="button" class="btn btn-primary">No</button>';
  html += '</div>';  // content
  html += '</div>';  // dialog
  html += '</div>';  // footer
  html += '</div>';  // modalWindow
  $('body').append(html);
      
  $("#gti-modal-"+id).show();    
  $("#gti-modal-"+id).on('hidden.bs.modal', function (e) {
    $(this).remove();
  });
  $("#gti-modal-btn-yes-"+id).click(function () {
    callback(true);
    $("#gti-modal-"+id).hide();
  });
  $("#gti-modal-btn-no-"+id).click(function () {
    callback(false);
    $("#gti-modal-"+id).hide();
  });
  $("#gti-modal-btn-close-").click(function () {
    callback(false);
    $("#gti-modal-"+id).hide();
   });
}
function askModal(id, msg, inputFiel, newValue) {
  addModal(id, msg, function (confirm) {		
  inputFiel.val(confirm ? newValue : inputFiel.val());		
  });
}
function funConfirmField(id, inputFiel, newValue) {	
  if (newValue !== "" && (newValue  !== inputFiel.val())) {
    askModal(id, 'Atenção!</br>Field: '+id.toUpperCase() + '</br>New Value: ' +  newValue + '</br>Old Value: ' + inputFiel.val() + '</br></br>Change to New Value?', inputFiel, newValue);
  }
}
$(document).ready(function () {
  funConfirmField('Nome', $('#nome'), 'João');
  funConfirmField('Document', $('#doc'), '222');
  funConfirmField('Celular', $('#cel'), '456');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<input class="form-control" type="text" id="nome" name="mome" value="Maria"/>
<input class="form-control" type="text" id="doc" name="doc" value= "111"/>
<input class="form-control" type="text" id="cel" name="cel" value= "123"/>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .