Take data-attr value and insert into another element

Asked

Viewed 810 times

2

I have a dynamic listing with PHP, and when you click on a "< tr> " of the table that is listed, you should open a modal with various information. What I intend to do, is to assign certain values of the listing to Data-Attributes, and with Jquery, I intend to take the values of these data-* and put in the content of this modal that will be opened. There I have only a data-* and a field, because I believe that making one work, I can do with another.

<script type="text/javascript">
$(document).ready(function(){
	
	$(".teste").click(function(){
		
		var val = $(".teste").data("pro");
		$("#pro").val(val);
		});
	});
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body>
<table class="table">
  	<tr data-toggle="modal" class="teste" data-target="#exampleModal" data-pro="teste">
        <td>teste</td>
        <td>teste</td>
        <td>teste</td>
        <td>teste</td>
	</tr>
</table>	

<div class="modal fade bd-example-modal-lg" id="exampleModal" 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" id="exampleModalLabel">OS nº1226</h5>
					<label>
						Emissão: dd/mm/yyyy
					</label>
				  </div>
				  <div class="modal-body">
						<div class="row">
							<div class="col-md-12">
							Nome: fulano de tal da silva
							</div>
						</div>
						<div class="row">
							<div class="col-md-6">
							CPF: 000.000.000-00
								</div>
							<div class="col-md-6">
							Telefone: (00)0000-0000
							</div>
						</div>
						<div class="row">
							<div class="col-md-4">
							Veículo: brasilia 
							</div>
							<div class="col-md-4">
							Placa: abc-0000
							</div>
							<div class="col-md-4">
							Status: 
							<form class="select_OS">
								<select>
								  <option value="nenhum">--status--</option>
								  <option value="emitida">Emitida</option>
								  <option value="em_orcamento">Em orçamento</option>
								  <option value="aguardando">Aguardando resp.cliente</option>
								  <option value="aguardando">Ordem autorizada</option>
								  <option value="em_exec">Em Execução</option>
								  <option value="finalizada">Finalizada</option>
								</select>
							</form>
							</div>
						</div>
						<div class="row">
							<div class="col-md-12" id="pro">
							Defeito apresentado:
							<p>
							</p>
							</div>
						</div>
						<div class="row">
							<div class="col-md-12">
							Solução:
							<br>
							<p>
								solucao
								solucao
								solucao
							
							</p>
							</div>
						</div>
					</div>
				  <div class="modal-footer">
					<button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar janela</button>
					<button type="button" class="btn btn-primary">Salvar</button>
				  </div>
				</div>
			  </div>
			</div>	
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>

</script>
<!-- bootstrap -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  
</body>
</html>

jquery html5 bootstrap-3

  • Substitute $("#pro").val(val); for $("#pro").text(val); or $("#pro").html(val);. The .val() serves only for form elements.

  • It didn’t. If you can try to make it work with this code of mine so I can see what’s going wrong

  • https://hastebin.com/ejuvelenov.xml

1 answer

1


Create a span in div #pro that will receive the value of the dataset:

<div class="col-md-12" id="pro">
   Defeito apresentado: <span></span>
   <p>
   </p>
</div>

And use $(this) in the event to pick up the dataset of the clicked line, and change the selector and method to .text:

$(".teste").click(function(){
   var val = $(this).data("pro");
   $("#pro span").text(val);
   });
});

Example:

$(document).ready(function(){
	
   $(".teste").click(function(){
      var val = $(this).data("pro");
      $("#pro span").text(val);
      });
   });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

<table class="table">
  	<tr data-toggle="modal" class="teste" data-target="#exampleModal" data-pro="teste1">
        <td>teste</td>
        <td>teste</td>
        <td>teste</td>
        <td>teste</td>
	</tr>
  	<tr data-toggle="modal" class="teste" data-target="#exampleModal" data-pro="teste2">
        <td>teste</td>
        <td>teste</td>
        <td>teste</td>
        <td>teste</td>
	</tr>
</table>	

<div class="modal fade bd-example-modal-lg" id="exampleModal" 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" id="exampleModalLabel">OS nº1226</h5>
					<label>
						Emissão: dd/mm/yyyy
					</label>
				  </div>
				  <div class="modal-body">
						<div class="row">
							<div class="col-md-12">
							Nome: fulano de tal da silva
							</div>
						</div>
						<div class="row">
							<div class="col-md-6">
							CPF: 000.000.000-00
								</div>
							<div class="col-md-6">
							Telefone: (00)0000-0000
							</div>
						</div>
						<div class="row">
							<div class="col-md-4">
							Veículo: brasilia 
							</div>
							<div class="col-md-4">
							Placa: abc-0000
							</div>
							<div class="col-md-4">
							Status: 
							<form class="select_OS">
								<select>
								  <option value="nenhum">--status--</option>
								  <option value="emitida">Emitida</option>
								  <option value="em_orcamento">Em orçamento</option>
								  <option value="aguardando">Aguardando resp.cliente</option>
								  <option value="aguardando">Ordem autorizada</option>
								  <option value="em_exec">Em Execução</option>
								  <option value="finalizada">Finalizada</option>
								</select>
							</form>
							</div>
						</div>
						<div class="row">
                     <div class="col-md-12" id="pro">
                        Defeito apresentado: <span></span>
                        <p>
                        </p>
                     </div>
						</div>
						<div class="row">
							<div class="col-md-12">
							Solução:
							<br>
							<p>
								solucao
								solucao
								solucao
							
							</p>
							</div>
						</div>
					</div>
				  <div class="modal-footer">
					<button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar janela</button>
					<button type="button" class="btn btn-primary">Salvar</button>
				  </div>
				</div>
			  </div>
			</div>

Browser other questions tagged jquery html5 bootstrap-3

You are not signed in. Login or sign up in order to post.