Ajax does not work with Modal Bootstrap

Question

Ajax does not work with Modal Bootstrap

Navigation

#1 by (1 votes)

1

Hello, I have the following code, where Modal Bootstrap opens from a DB lookup when I click on an item in the returned list:

<input type="text" name="pesquisa" id="pesquisa">
<table class="resultado">
</table>

So far so good, it returns the values correctly, opens the Modal with the correct ID, but when I click the button to execute, it executes the function only with the first item of the ID column of the DB, that is, it works only with ID "1", the other IDs it does not return the value in content.

function reg_prod() {
  $.ajax({
    type: "POST",
    url: "../_php/nova_entrega_reg_prod.php",
    data: {
      produto: $('#id').val(),
    },
    success: function(data) {
      $('#conteudo').html(data);
    }
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scripttype="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><divclass="modal fade" id="myModal<?php echo $qry['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" id="myModalLabel">Titulo</h4>
			</div>
			<div class="modal-body" style="white-space: normal;">
        <input type="text" name="nome" id="id" value="<?php echo $qry['id']?>">
			</div>
      
			<div id="conteudo">Teste</div>
      
			<div class="modal-footer">
			<button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
			<button type="button" onClick="reg_prod()" class="btn btn-success">Registrar</button>
			</div>
		</div>
	</div>
</div>

Here in content he should return, in this case, the same ID he opened MODAL

<?php
$produto = $_POST['produto'];

echo $produto;
?>

Does anyone know why this happens?

php html ajax twitter-bootstrap modal

asked by anonymous 06.04.2018 / 18:16

1 answer

How to insert a new order via the Jasmin API (POST Order)? Pointer and Memory Allocation

score 1 · Accepted Answer

You must get id of each input of the respective modal. The way you're doing, you'll always get the id of the first modal you find, and you still have to set id s different for each thing. What you are doing is repeating id s, which is incorrect. A id must be unique on the same page.

Change the id s of elements using PHP value:

<input type="text" name="nome" id="id<?php echo $qry['id']?>" value="<?php echo $qry['id']?>">

Since you want to pass the value of the field that is id itself, nor needs the id="id" attribute, thus:

<input type="text" name="nome" value="<?php echo $qry['id']?>">

and div also put id of PHP ...

<div id="conteudo<?php echo $qry['id']?>">Teste</div>

Pass id as a parameter to Ajax in onclick :

<button type="button" onClick="reg_prod('<?php echo $qry['id']?>')" class="btn btn-success">Registrar</button>

And change the Ajax function to receive and send id :

function reg_prod(i) {
  $.ajax({
    type: "POST",
    url: "../_php/nova_entrega_reg_prod.php",
    data: {
      produto: i,
    },
    success: function(data) {
      $('#conteudo'+i).html(data);
    }
  });
}