JQuery not finding element to run each

[Adamhumbug]

Hi,

I have a form to collect personal data, fn, ln, email etc.

There is a button that creates a new blank line for you to fill out with another persons data.

I am wanting to turn this form into a nice bootstrap layout (i have that bit sorted).

This worked in my testing environment when i copied some html over (not created from the button).

When you click the button you get a line like this.

<tr id="OPRow605b06bd13161" class="">
	<td class="BRFOPRowPhotoPreviewCell">
		<input type="hidden" name="OPID605b06bd13161" id="OPID605b06bd13161" value="New">
	</td>
	<td>
		<input type="text" size="20" name="op_firstname605b06bd13161" id="op_firstname605b06bd13161" style="" value="">
	</td>
	<td>
		<input type="text" size="20" name="op_lastname605b06bd13161" id="op_lastname605b06bd13161" style="" value="">
	</td>
	<td>
		<select name="op_nationality605b06bd13161" id="op_nationality605b06bd13161" style="">
			<option value="" selected="selected">Please Select</option>
		</select>
	</td>
	<td>
		<input type="text" size="30" name="op_t1605b06bd13161" id="op_t1605b06bd13161" style="" value="">
	</td>
	<td>
		<select name="op_t1d605b06bd13161" id="op_t1d605b06bd13161" style="">
			<option value="" selected="selected">Please Select</option>
		</select>
	</td>
	<td>
		<input type="text" size="30" name="op_role605b06bd13161" id="op_role605b06bd13161" style="" value="">
	</td>
	<td><input type="text" size="20" name="op_e1605b06bd13161" id="op_e1605b06bd13161" style="" value="">
	</td>
	<td class="BRFOPRowPhotoCell">
		<input type="hidden" name="op_photo605b06bd13161" id="op_photo605b06bd13161" value="">
		<span onclick="doBRForm('editPhotoFromBatchRequest','605b06bd13161','')" class="IPListMenuItem BRFOPRowPhoto noPhoto">
			<span class="BRFOPRowPhotoSpan">Add</span>
		</span>
	</td>
	<td class="BRFRemoveRowCell">
		<span class="IPListMenuItem BRFRemoveRow" onclick="BRFRemoveRow('OPRow605b06bd13161')">
			<span class="BRFRemoveRowSpan">X</span>
		</span>
	</td>
</tr>

The code that i am running is looking for each iteration of the opening ID and then moves stuff around.

This works great in the testing environment but does not find that id when it is run inside the system.

function bootRow(){
	console.log('boot ran')
	$("[id^='OPRow']").length
	$("[id^='OPRow']").each(function(index, value){
		console.log('each ran')
		var fn = $("[id^='op_firstname']", this)
		var ln = $("[id^='op_lastname']", this)
		var nation = $("[id^='op_nationality']", this)
		var mobile = $("input[id^='op_t1']", this)
		var cc = $("select[id^='op_t1d']", this)
		var role = $("[id^='op_role']", this)
		var e1 = $("[id^='op_e1']", this)

		var fnlabel = $("[id$='op_firstname']").text()
		var lnlabel = $("[id$='op_lastname']").text()
		var nationlabel = $("[id$='op_nationality']").text()
		var mobilelabel = $("[id$='op_t1']").text()
		var cclabel = $("[id$='op_t1d']").text()
		var rolelabel = $("[id$='op_role']").text()
		var e1label = $("[id$='op_e1']").text()


		var row = $("<div class='row'><div class='col-6'><label class='fnlab'></label><div class='input-group mb-3 fnholder'></div></div><div class='col-6'><label class='lnlab'></label><div class='input-group mb-3 lnholder'></div></div></div><div class='row'><div class='col-6'><label class='nationlab'></label><div class='input-group mb-3 ccholder'></div></div><div class='col-6'><label class='mobilelab'></label><div class='input-group mb-3 mobileholder'></div></div></div><div class='row'><div class='col-4'><label class='cclab'></label><div class='input-group mb-3 nationholder'></div></div><div class='col-4'><label class='rolelab'></label><div class='input-group mb-3 roleholder'></div></div><div class='col-4'><label class='e1lab'></label><div class='input-group mb-3 e1holder'></div></div></div>")

		row.find('.fnholder').append(fn)
		row.find('.lnholder').append(ln)
		row.find('.nationholder').append(nation)
		row.find('.mobileholder').append(mobile)
		row.find('.ccholder').append(cc)
		row.find('.roleholder').append(role)
		row.find('.e1holder').append(e1)

		row.find('.fnlab').append(fnlabel)
		row.find('.lnlab').append(lnlabel)
		row.find('.nationlab').append(nationlabel)
		row.find('.mobilelab').append(mobilelabel)
		row.find('.cclab').append(cclabel)
		row.find('.rolelab').append(rolelabel)
		row.find('.e1lab').append(e1label)

		$('.content').append(row)

		$('.batchrequest input').addClass('form-control')
		$('.batchrequest select').addClass('custom-select')
	})
}

The button uses jquery to call add the new line so i have also included a call to this function at the end of the Ajax and can confirm that it runs every time the button is pressed.

I have console logged the length and it always says 0.

I appreciate any pointers you may be able to offer here and i will provide any further information that is required.

 

Thanks in advance.

[Adamhumbug]

Just to add some more clarification here.

The new line is created with AJAX and i have called my function bootRow() at the end of the AJAX which i can see running in the console logs.

What is not happening is the second log inside the each function suggesting that the each function is not finding the id when i can see it several times when inspecting the code and can see several of these lines on the screen.

The $("[id^='OPRow']").length that i have always returns 0

[Adamhumbug]

If i run this line manually in the console, i get the correct number of rows showing

$("[id^='OPRow']").length

and if i run my function (without the function part) in console, i get the correct outcome.

$("[id^='OPRow']").each(function(index, value){
		console.log('each ran')
		var fn = $("[id^='op_firstname']", this)
		var ln = $("[id^='op_lastname']", this)
		var nation = $("[id^='op_nationality']", this)
		var mobile = $("input[id^='op_t1']", this)
		var cc = $("select[id^='op_t1d']", this)
		var role = $("[id^='op_role']", this)
		var e1 = $("[id^='op_e1']", this)

		var fnlabel = $("[id$='op_firstname']").text()
		var lnlabel = $("[id$='op_lastname']").text()
		var nationlabel = $("[id$='op_nationality']").text()
		var mobilelabel = $("[id$='op_t1']").text()
		var cclabel = $("[id$='op_t1d']").text()
		var rolelabel = $("[id$='op_role']").text()
		var e1label = $("[id$='op_e1']").text()


		var row = $("<div class='row'><div class='col-6'><label class='fnlab'></label><div class='input-group mb-3 fnholder'></div></div><div class='col-6'><label class='lnlab'></label><div class='input-group mb-3 lnholder'></div></div></div><div class='row'><div class='col-6'><label class='nationlab'></label><div class='input-group mb-3 ccholder'></div></div><div class='col-6'><label class='mobilelab'></label><div class='input-group mb-3 mobileholder'></div></div></div><div class='row'><div class='col-4'><label class='cclab'></label><div class='input-group mb-3 nationholder'></div></div><div class='col-4'><label class='rolelab'></label><div class='input-group mb-3 roleholder'></div></div><div class='col-4'><label class='e1lab'></label><div class='input-group mb-3 e1holder'></div></div></div>")

		row.find('.fnholder').append(fn)
		row.find('.lnholder').append(ln)
		row.find('.nationholder').append(nation)
		row.find('.mobileholder').append(mobile)
		row.find('.ccholder').append(cc)
		row.find('.roleholder').append(role)
		row.find('.e1holder').append(e1)

		row.find('.fnlab').append(fnlabel)
		row.find('.lnlab').append(lnlabel)
		row.find('.nationlab').append(nationlabel)
		row.find('.mobilelab').append(mobilelabel)
		row.find('.cclab').append(cclabel)
		row.find('.rolelab').append(rolelabel)
		row.find('.e1lab').append(e1label)

		$('.content').append(row)

		$('.batchrequest input').addClass('form-control')
		$('.batchrequest select').addClass('custom-select')
	})

 

Edited March 24, 2021 by Adamhumbug

[kicken]

Sounds like you may be calling your function too early, before the stuff gets added to the DOM.  What's your Ajax function?

[Adamhumbug]

I dont have access to the ajax function, just a function that runs at the end.  I know this is pretty ambiguous but the system i am using i dont have access to the source.

I have created another button that just runs the function and i click that when i can see everything is in the DOM and it still wont log (each ran) so it still cannot find the elements.

But again, when i paste the code into console, i get the desired effect.

 

Edited March 26, 2021 by Adamhumbug