Response title
This is preview!
Move this topic
CARREGAMENTO DINÂMICO NO COMBOBOX NÃO FUNCIONA APÓS DUPLICAÇÃO DOS CAMPOS. AJUDEM!!
in Getting Started
•
10 years ago
Amigos estou utilizando um carregamento dinâmico para combox via ajax. No entanto após duplicar o campo combox o carregamento não funciona. Como resolver o problema? Sou iniciante no jquery e preciso da ajuda de vocês.
Segue abaixo o link para o vídeo que explica melhor minha dúvida.
Um abraço a todos.
Friends'm using a dynamic loading via ajax combox. However after doubling the field combox charging does not work. How to fix it? I'm new to jquery and I need your help.
Below is the link to the video that best explains my question.
A hug to everyone.
1
Replies(11)
Please show your jQuery code. OR ..... ..... Looks like what you need is to use
$(document).on('change','select',function(event) { ...});
So that select elements added after DOM ready can also have the handler attached to them.
Leave a comment on Godsbest's reply
Thank you for your cooperation. As you requested follows the jquery code and the code of the form. Friend takes a lot to help me. I can not solve this riddle.
CÓDIGO FORM:
<table cellspacing="0" border="0">
<thead>
<tr>
<td style="padding:10px;">Quantidade</td>
<td style="padding:10px;">Descrição</td>
<td style="padding:10px;">Valor Unitário</td>
<td style="padding:10px;">Total do Ítem</td>
<td style="padding:10px;"> </td>
</tr>
</thead>
<tbody id="repetir">
<tr id="linha_1">
<td style="padding:10px;"><input name="dia[]" type="text" value="" size="3" maxlength="3" style="padding:5px;" /></td>
<td style="padding-top:22px; padding-left:10px;">
<?php
include("con_query/BDconex.php");
$querys = mysql_query("SELECT * FROM itens ORDER BY PRO_NOME ASC");
?>
<select name="search_category" id="search_category_id" style="width:200px;">
<option selected>Selecione um Produto</option>
<?php
while ($rows = mysql_fetch_array($querys)){
?>
<option value="<?php echo $rows['PRO_ID']; ?>"><?php echo utf8_encode($rows[PRO_NOME]); ?></option>
<?php
}
?>
</select>
</td>
<td style="padding:10px;">
<div class="both">
<div id="show_sub_categories" align="center">
<img src="loader.gif" style="margin-top:8px; float:left" id="loader" alt="" />
</div>
</div>
</td>
<td style="padding:10px;">
<input name="hora[]" type="text" value="" size="3" maxlength="3" style="padding:5px;" />
</td>
<td style="padding:10px;"><input type="button" value="Remover" id="remove" onClick="$.removeLinha(this);" style="padding:5px;" /></td>
</tr>
</tbody>
<tfoot>
<tr>
<td align="right" colspan="5"><input type="button" value="Adicionar" id="add" /></td>
</tr>
</tfoot>
</table>
CÓDIGO JQUERY:
<script type="text/javascript">
$(document).ready(function() {
$('#loader').hide();
$('#show_heading').hide();
$('#search_category_id').change(function(){
$('#show_sub_categories').fadeOut();
$('#loader').show();
$.post("js/dynamic_dropdown/get_chid_categories.php", {
parent_id: $('#search_category_id').val(),
}, function(response){
setTimeout("finishAjax('show_sub_categories', '"+escape(response)+"')", 400);
});
return false;
});
});
function finishAjax(id, response){
$('#loader').hide();
$('#show_heading').show();
$('#'+id).html(unescape(response));
$('#'+id).fadeIn();
}
function alert_id()
{
if($('#sub_category_id').val() == '')
alert('Please select a sub category.');
else
alert($('#sub_category_id').val());
return false;
}
</script>
Add me on msn: damtaipu@homtail.com
Leave a comment on damxrn's reply
You saw the video showing the problem?:
Leave a comment on damxrn's reply
Yes the video is very clear. There are several challenges on that page.
1. Your change event handler is attached to the select by ID which means that it can only be attached to ONE (1) element. Rather that use id your can use a class selector: $('select.main_category').change( ...... )
<select name="search_category" class="main_category" id="search_category_id_1" style="width:200px;">
2. If you are cloning the select element generated by PHP you need to change the IDs of the clones. Element IDs should be unique in a given page.
<select name="search_category" class="main_category" id="search_category_id_2" style="width:200px;">
3. As I mentioned earlier you have to change the way your change handler is defined so that it can attach to the clones created dynamically:
$(document).on('change','select.main_category',function() {
........
........
});
4. Adjust the rest of your code to handle the new IDs and added class - main_categroy.
Leave a comment on Godsbest's reply
First of all thank you for the friendly collaboration. Now I understand the logic of the thing.
But honestly, as I am new to jquery and do NOT know this change. The friend could help me in this problem?
A hug.
Leave a comment on damxrn's reply
Guy, I have searched a lot on the internet and find nothing. No scrip for sale. If I can solve this problem I will release the code to put people.
I'm sure someone will enjoy it.
Leave a comment on damxrn's reply
The following ensures future select also work:
$(document).on('change','select.main_category',function() {
$(this).parents('tr').find('div.sub_category').html( subs[ $(this).val() ] );
});
$(this).parents('tr').find('div.sub_category').html( subs[ $(this).val() ] );
});
See demo here: http://jsfiddle.net/ehcFn/1/
Leave a comment on Godsbest's reply
My friend, thank you for the valuable collaboration. pucos adapted to the code to my asparagine and worked perfectly. Very good!! was exactly what I needed. However, just could not implement the ajax call (below) which brings the result of a php page.:
$('#search_category_id').change(function(){
$('#show_sub_categories').fadeOut();
$('#loader').show();
$.post("js/dynamic_dropdown/get_chid_categories.php", {
parent_id: $('#search_category_id').val(),
}, function(response){
setTimeout("finishAjax('show_sub_categories', '"+escape(response)+"')", 400);
});
return false;
});
});
function finishAjax(id, response){
$('#loader').hide();
$('#show_heading').show();
$('#'+id).html(unescape(response));
$('#'+id).fadeIn();
}
If only it can help me thank you very much. But if it can not, yet, thank you much for your patience in taking the time to solve problems beginners like me. You're a guy who solved a big problem in my early professional. Your code will study. I am very grateful. A BIG hug.
What is your name?
Atte.
José Damião/ Brasil, Natal/RN
Leave a comment on damxrn's reply
Leave a comment on Godsbest's reply
Friend,
thanks for your help I could. I made only a few changes in ajax call (below) and 'voila'! worked perfectly.
AJAX MODIFIED ('ll distribute the code starting from this link): http://jsfiddle.net/damxrn/qK8L7/1/
Thanks for everything. If one day I can help can contact.
Leave a comment on damxrn's reply
Glad to help!!
Feel free to post here any question you may have in the future.
Leave a comment on Godsbest's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to damxrn's question