Ir para conteúdo
Eliabe Andrade

Resgatar dados vindos do BD Janela Modal

Recommended Posts

Galera é o seguinte,  não tenho muita experiência em PHP, estou começando agora e estou enfrentando o seguinte problema, estou utilizando o seguinte modelo de janela modal para resgatar os dados vindos do meu banco de dados: Varying modal content based on trigger buttonporem enfrento o seguinte problema, quando programo ele para resgatar os dados em um campo input do tipo text ele regata numa boa, porem eu gostaria de recuperar este dado através de um campo input do tipo radio, mas não consigo de forma alguma, abaixo segue meu código para que vocês possam entender melhor:

 

<button type="button" class="btn btn-xs btn-warning" data-toggle="modal" data-target="#exampleModal" data-whatever="<?php echo $cliente->id ?>" data-whateverproposta="<?php echo $cliente->proposta_valida; ?>" >Validar</button>

<!-- Inicio Modal -->
<div class="modal fade" id="myModal<?php echo $cliente->id ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
				<span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title text-center" id="myModalLabel"><?php echo $cliente->proposta_valida ?></h4>
			</div>
	<div class="modal-body">
		<p><?php echo $cliente->id ?></p>
		<p><?php echo $cliente->proposta_valida ?></p>
	</div>
		</div>
	</div>
</div>
<!-- Fim Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
		  <div class="modal-dialog" role="document">
			<div class="modal-content">
			  <div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title" id="exampleModalLabel">Curso</h4>
			  </div>
			  <div class="modal-body">
				<!--<form method="POST" action="http://localhost/Aula/aula_anterior/26-Modal-editar-curso/processa.php" enctype="multipart/form-data">-->
				  
				<div class="form-group">			  
				<label class="radio-inline"><input type="radio" name="proposta" value="1" >SIM</label>
				<label class="radio-inline"><input type="radio" name="proposta" value="2" >NÃO</label>
				</div>
				<input name="id" type="hidden" class="form-control" id="id-proposta" value="">
				<button type="button" class="btn btn-success" data-dismiss="modal">Cancelar</button>
				<button type="submit" class="btn btn-danger">Alterar</button>
			 
				<!--</form>-->
			  </div>
			  
			</div>
		  </div>
		</div>
	<script type="text/javascript">
		$('#exampleModal').on('show.bs.modal', function (event) {
		  var button = $(event.relatedTarget) // Button that triggered the modal
		  var recipient = button.data('whatever') // Extract info from data-* attributes
		  var recipientproposta = button.data('whateverproposta')
		  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
		  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
		  var modal = $(this)
		  modal.find('.modal-title').text('ID DO CLIENTE ' + recipient)
		  modal.find('#id-proposta').val(recipient)
		  modal.find('.modal-body input:radio[name= proposta]')
			  .filter(['value=' + recipientproposta + ''])
			  .prop('checked', true);
			  
		  alert("O Value é: " +recipientproposta);
		  		  
		})
	</script>

 

o meu problema é que não consigo checar o radio, até consigo resgatar o dado vindo do banco, mas não consigo fazer com que ele cheque.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por Gustavo2503
      Eu estou criando uma classe que cria modais usando React, eu preciso criar um modal dentro de um modal, para isso, eu quero chamar a mesma função dentro dela mesma. O modal é criado, mas o problema é que ele não abre, abre o modal principal (#modal-1), mas não abre o sub modal (#modal-2), veja como ficou meu código:
      index.html
      <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Modal</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script> <script src="js/modal.js" type="text/babel"></script> <link rel="stylesheet" href="css/modal.css"> </head> <body> <div align="center"> <h1>Modal</h1> </div> <button type="button" data-modal="modal-1">Open Modal</button> <div id="modal-content"></div> <script type="text/babel"> const contentSub = [ <h2>Title SubModal 1</h2>, <p>SubModal</p>, <small>Rodapé submodal 1</small> ]; const idSub = "modal-2"; const content = [ <h2>Title 1</h2>, <section> <button type="button" data-modal="modal-2">Open SubModal</button> <Modal id={idSub} content={contentSub}/> </section>, <small>Rodapé 1</small> ]; const id = "modal-1"; ReactDOM.render( <Modal id={id} content={content}/>, document.getElementById('modal-content') ); </script> </body> </html> js/modal.js
      class Modal extends React.Component{ constructor(props) { super(props); this.id = this.props.id; this.backgroudColorHeader = this.props.backgroudColorHeader === undefined ? 'rgba(103, 117, 240, 1)' : this.props.backgroudColorHeader; this.textColorHeader = this.props.textColorHeader === undefined ? '#fff' : this.props.textColorHeader; this.backgroudColorBody = this.props.backgroudColorBody === undefined ? 'rgba(255, 255, 255, 1)' : this.props.backgroudColorBody; this.textColorBody = this.props.textColorBody === undefined ? '#000' : this.props.textColorBody; this.backgroudColorFooter = this.props.backgroudColorFooter === undefined ? 'rgba(103, 117, 240, 1)' : this.props.backgroudColorFooter; this.textColorFooter = this.props.textColorFooter === undefined ? '#fff' : this.props.textColorFooter; this.borderRadius = this.props.borderRadius === undefined ? '8px' : this.props.borderRadius; this.content = this.props.content === undefined ? [<h2>header content</h2>, <p>body content</p>, <p>footer content</p>] : this.props.content; this.size = this.props.size === undefined ? 3 : this.props.size; } closeModal = () => { $('#'+this.id).removeClass("show"); $('body').removeClass("overflow-hidden"); }; render(){ $(`[data-modal]`).click( function () { var id = $(this).attr("data-modal"); var el = document.getElementById(id); $(el).addClass("show"); $('body').addClass("overflow-hidden"); }); var background, text; background = this.backgroudColorHeader; text = this.textColorHeader; const transparencyBackgroundHeader = background.substring(background.length-2,background.length-1) -.1; const backgroundColorHeader = `${background.substring(0,background.length-2)}${transparencyBackgroundHeader})`; const styleColorHeader = { backgroundColor: backgroundColorHeader, color: text, borderBottom: `1px solid ${background}` }; background = this.backgroudColorBody; text = this.textColorBody; const styleColorBody = { backgroundColor: background, color: text }; background = this.backgroudColorFooter; text = this.textColorFooter; const transparencyBackgroundFooter = background.substring(background.length-2,background.length-1) -.1; const backgroundColorFooter = `${background.substring(0,background.length-2)}${transparencyBackgroundFooter})`; const styleColorFooter = { backgroundColor: backgroundColorFooter, color: text, borderTop: `1px solid ${background}` }; const styleBorderRadius = {borderRadius: this.borderRadius}; const eDivision = ['h', 'b', 'f']; const eContent = this.content; var div = []; for (var i=0;i<eContent.length;i++){ const part = eDivision[i].replace('h', 'header').replace('b', 'body').replace('f', 'footer')+"-modal"; const closeModal = i === 0 ? <span onClick={this.closeModal} className="close-modal"><i className="material-icons">close</i></span> : "" ; var style; if (i===0) style = styleColorHeader; else if (i===1) style = styleColorBody; else style = styleColorFooter; div.push(<div key={i+1} className={part} style={style}> {closeModal} {eContent[i]} </div>); } const eSize = this.size; const s = ['s', 'm-s', 'm', 'm-l', 'l']; const size = s[eSize-1]; const classModal = (size !== "s" && size !== "m-s" && size !== "m" && size !== "m-l" && size !== "l") ? 'modal-modal modal-m' : "modal-modal modal-"+size; return <div id={this.id} className={classModal}> <div className="overflow-modal"> <div className="container-modal" style={styleBorderRadius}> {div} </div> </div> </div>; } }  
    • Por Jefferson andre
      Ola, 
      Como eu faço para mostrar uma janela popup com uma mensagem ?
      teria algum exemplo por favor
    • Por michelmir
      Olá a todos.
       
      Tenho um formulário que esta inserido em um código Bootstrap Modal. Quando os valores são inseridos nos campos input, o Ajax script passa esses valores para um arquivo php e retorna com um alert de sucesso. O que ocorre é que somente o alert aparece, porém quando clica no botão OK deste alerta o Modal não fecha. Abaixo segue o código do popup Modal e o script Ajax:
      <button type="button" class="btn btn-block btn-primary" data-toggle="modal" data-target="#dataModal"></button> <!-- Modal --> <div class="modal fade" id="dataModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" >Adicionar dados</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <form id="usersform" method="post"> <input type="text" name="nome" id="nome"/> <input type="email" name="email" id="email"/> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">CANCELAR</button> <button type="submit" class="btn btn-success" id="submit" >ADD USER</button> </form> </div> </div> </div> </div> E abaixo segue o Ajax script ao qual faz a passagem dos valores input para o arquivo insert.php que no caso funciona corretamente inserindo os dados no banco de dados:
      <script> $(document).on('submit', '#usersform', function(event){ event.preventDefault(); $.ajax({ url:"insert.php", method:'POST', data:new FormData(this), contentType:false, processData:false, success:function(data){ alert("Cadastro realizado com sucesso!"); $("#usersform")[0].reset(); $("#dataModal").modal('hide'); } }); }); </script> O que ocorre é que o popup Modal não fecha apesar do código $("#dataModal").modal('hide'); estar após o alert e nem "zera" os campos após o resultado de sucesso. Os dados são inseridos normalmente após clicar no "ok" da tela de mensagem do alert. O que pode ser? Obrigado.
    • Por Camila97
      Olá, estou tendo dificuldades em um site onde preciso desenvolver um modal ao clicar no botão X para excluir uma despesa, porém, o botão X foi criado no arquivo .js :
      //botão de excluir: let btn = document.createElement("button") btn.className = 'btn btn-danger' btn.innerHTML = '<i class="fas fa-times"></i>' btn.id = `id_despesa_${d.id}` btn.onclick = function(){ let id = this.id.replace('id_despesa_', ''); bd.remover(id) window.location.reload() } linha.insertCell(4).append(btn) console.log(d) Toda despesa criada, automaticamente é adicionado o botão X ao lado da despesa.
      Como poderia fazer aparecer um modal ao clicar nele, para saber se o usuário quer cancelar ou excluir a despesa?
    • Por manolegal
      Bom dia
      Em um modal bootstrap de cadastro, após submete-lo e não tendo sido informado todos os dados obrigatórios, o mesmo é ampliado, uma vez que são mostradas mensagens de preenchimento obrigatório. Após esta ação, não consigo realizar a rolagem do modal, não tendo acesso aos campos inferiores do form e nem ao botão de submit. Realizei várias pesquisas, porém não obtive sucesso.
      Partes do código:
      <div class="modal fade" id="modal_cad_pessoa" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Cadastrar Pessoa</h4> </div> <div class="modal-body"> <div class="container-fluid" id="container"> <div class="row"> <div class="row"> <div id="mensagem_pes" class="col-md-10 col-md-offset-1 form_div_mensagem_erro_modal"></div> </div> </div> <div> <form method="post" id="form_mod_pes_cad" nome="form_mod_pes_cad"> <div class="row"> <div class="form-group col-md-5"> <label>Nome</label> <input class="form-control" type="text" id="md_pessoa_nome" name="md_pessoa_nome" autofocus value="<?php echo $nome;?>" placeholder="Informe o Nome da Pessoa (Obrigatório)" required maxlength="50" title='(Preenchimento Obrigatório)'"> </div> </form> </div> <div class="modal-footer"> <button type="button" id="grav_md_pes" nome="grav_md_pes" class="btn btn-primary">Cadastrar</button> <button type="button" class="btn btn-default" data-dismiss="modal" id="fechar">Fechar</button> </div> </div> <!-- /container-fluid --> </div> <!-- /modal-body --> </div> <!-- /modal-content --> </div> <!-- /modal-dialog --> </div> <!-- /modal fade -->  
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.