Jump to content

JQuery not finding element to run each


Recommended Posts

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.

Link to post
Share on other sites

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

Link to post
Share on other sites
Posted (edited)

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 by Adamhumbug
Link to post
Share on other sites

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

Link to post
Share on other sites
Posted (edited)

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 by Adamhumbug
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.