About refreshing div in JQuery

[Suvojit Chakraborty]

Hi,

I have a requirement of refreshing a div in jquery. The scenario is:
I have following structure in html/jsp:

<div id="provider">
<div id="provider-d1" class="hiddenDiv" style="display:block;">
<div class="clear"> 
</div>
<a style="padding: 5px 5px 0pt 0pt;  display:none; cursor:pointer;" onclick="removeDetailsGeneric(this)" class="floatRight removeLink">Remove</a>
<div class="clear"> 
</div>
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td width="21%">Provider Name (Last, First)</td><td width="29%"><input type="text" name="providerName-0" value="" class="string" maxlength="30" style="width:auto"></td><td width="21%">Provider Address </td><td width="29%"><input type="text" name="providerAddress-0" value="" class="string" maxlength="50" style="width:auto"></td>
</tr>
<tr>
<td width="21%">City</td><td width="29%"><input type="text" name="providerCity-0" value="" class="fullname" maxlength="15" style="width:auto"></td><td width="19%">State</td><td width="31%"><select class="required" name="providerState-0" style="width:auto">

<option value="WV" xmlns:datetime="http://exslt.org/dates-and-times" xmlns="http://www.w3.org/1999/xhtml">WV</option>
<option value="WY" xmlns:datetime="http://exslt.org/dates-and-times" xmlns="http://www.w3.org/1999/xhtml">WY</option></select></td>
</tr>
<tr>
<td width="21%">Zip</td><td width="29%"><input type="text" name="providerZip-0" value="" class="zip" maxlength="15" style="width:auto"></td>
</tr>
</tbody></table>
</div>
</div>

Now my requirement is to make all the inputs inside the provider-d1 divs required (by puting an asterix after the label), as soon as user input some text in the text box.

following is the jquery code I am using to do this:

var asterixSet=false;
function requiredProvider(){ 
var providers = $('#provider div[id^="provider-d"]');
console.log("Inside requiredProvider");

providers.each(function(index){
	var thisid=$(this).attr('id');
	var children = $('#'+thisid+' :input');
	var children1=children;
	
	children.live("focusout",function(){console.log("Inisde live");
		var allSet=false;
		children1.each(function(index){
			var value = $(this).val();
			//alert(value.length);
			if(value != null && value.length > 0 && value != '_____')
			allSet=true;
		});
		if(allSet && ! asterixSet){
			asterixSet=true;
			children1.each(function(index){
				var value = $(this).val();
				var asterixReq="<em> *</em>";
				var content=$(this).parent().prev().html();
				content += asterixReq;
				$(this).parent().prev().html(content);
			});
		}
		else if(! allSet && asterixSet){
			asterixSet=false;
			children.each(function(index){
				var value = $(this).val();
				var asterixReq="<em> *</em>";
				var content=$(this).parent().prev().html();
				content = content.replace(asterixReq,"");
				$(this).parent().prev().html(content);
		//	alert("Hii");
			});
		}
	});
});
}

I am calling above code on doc.ready(). Now this works perfectly fine in case , provider-d1 div is already present. But there is also a button which clones above div and update the id.
Example: provider-d1 becomes provider-d2 and similarly input elements inside also get incremented.
So if I add another div, the logic in script doesnt get applied because var providers = $('#provider div[id^="provider-d"]'); would return only div which are present during the time pages was loaded. Div generated afterward doesnt get picked.

Please guide me to find a solution so that I may refresh my main div(provider) prior to the var providers = $('#provider div[id^="provider-d"]'); , so that newly added divs also get included in result.

Thanks for help

Suvojit

[Gregg Bolinger]

What calls your function requiredProvider() ?

[Suvojit Chakraborty]

hi,

Thanks for reply.

requiredProvider() is called from inside $(document).ready(function(){ requiredProvider(); }) which I have placed in <script> section of a xsl file which renders xml and generate view.

My problem perhaps will be solved if somehow I can call this from $(document).update()/reload() sort of function. I am not aware of existence of any such function but I am guessing some function to satisfy my need exist.

Thanks for help
Suvojit