How to retrieve values from fields loaded with jQuery

Navigation
6

Hello, I recently encountered a problem loading div contents dynamically using jQuery, but it turns out that when I load content into this div, I can not retrieve the values that are sent from it.

The content loaded in the div is a form, which when clicked the "add" button, it loads another function in the "onclick" event of that same button, but when I click that button the div returns the value set in the switch default and does not load the function of the event placed on the button.

One of the forms loaded in this div is the addition of products: 

<form method="POST">
<input type="text" name="produto"/>
<input type="number" name="preco"/>
<textarea name="descricao"></textarea>
<select name="categoria">
 <option value="1">1</option>
 <option value="1">1</option>
</select>
<button onclick="add()">Adicionar</button>

For example, pressing the "Add" button, if the add () function was executed without error, a message would be displayed in the "staus" div and it would stay on the same page instead of returning the default page

NOTE: In the add () function, the data coming from the form is collected. Part of the script that handles this form: 

produto = $('input[name=xxx]').val();
$.post('adicionar.php',{produto:produto},function(i){$('#staus').html(i)});

link

    
asked by anonymous 26.03.2014 / 12:17

2 answers

3

EDIT: The #staus div is within the #direita element that is the target of the load method, and therefore will be replaced by the form that is coming from the server. So when you click the button, the #status div will no longer exist because it has been deleted from the page.

load is asynchronous

The load method of jquery is asynchronous. To get access to the elements brought by the load method of jquery, you must add a callback function for when the request is ready: 

$('#direita').load("url", 
     function (responseText, textStatus, XMLHttpRequest) {
         if (textStatus == "success") {
             // o request funcionou e os elementos já devem estar disponíveis
             // aqui você pode associar eventos aos elementos trazidos via AJAX
         }
         if (textStatus == "error") {
             // o request não funcionou, você terá de informar o usuário de que
             // algo deu errado
         }
     }

Other comments in your code

The case of switch is done by putting only the value to be compared, not making an assignment in case . 

switch(mostrar){
    case 'add': // errado: case mostrar = 'add' 
        break;
    case 'editar': // errado: case mostrar = 'editar' 
        break;
    default:
}
    
26.03.2014 / 14:43
1

This happens because delegating the event to the button does not yet exist in the DOM. For the event to work with an element that will still be loaded into the DOM, you can delegate the event to a parent element that already exists and add a filter to the actual picker.

Example: 

$(document).on('click', 'button', function(event) {

    // 

});

Since $(document) is the element for which the event is delegated, and 'button' the filter that corresponds to a possible element that already exists or will appear within $(document) .

    
26.03.2014 / 12:24
Search for details of a book with Google Books API in PHP How to adjust navigation arrows