.load() not working properly?

[phpnoob1991]

Here's the page in question:

 

http://www.lukaspleva.com/MoneyThink/NationalAdmin.php

 

If you go to that page, you'll see that you can remove chapters from the system just by clicking the red cross button next to each row. As you do that, the chapter counter at the top automatically updates.

 

Problem arises when you add a new chapter to the mix via the section at the top. The new section gets added and the counter updates, but the delete button stops working.

 

Looking at what's happening with the code, it seems like the .load() function is creating an additional form="update_existing_chapters" WITHIN the form id="update_existing_chapters" that's already on the page.

 

Basically, instead of just refreshing the div or the form, it creates a duplicate copy within it, which breaks the code.

 

The relevant piece of code is:

 

$('form#update_existing_chapters')
    .load('NationalAdmin.php form#update_existing_chapters');

Any idea why it's creating a duplicate element/section rather than just refreshing the current one?

 

Thank you in advance!

 

[trq]

Why have you got a selector within the argument to load() ?

[phpnoob1991]

Hmmm, so are you suggesting it should actually be:

 

$('form#update_existing_chapters').load();

 

?

 

I tried that, but unfortunately that doesn't fix the problem. Sorry, I am pretty new to jQuery, and am learning on the go. Am I missing something basic?

[phpnoob1991]

I did some more research, and it seems like this person had the exact same problem:

 

http://stackoverflow.com/questions/11589576/jquery-functions-not-working-after-using-load-to-refresh-div-content

 

Basically, because the delete button images are being generated dynamically, they lose the attached event when they reset.

 

The recommended fix is to use .on(), but I am not exactly sure how to implement that / use it within my current code...any hints?

 

This is what I thought would work, but it didn't:

 

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
				<script type="text/javascript">
				        jQuery(document).ready(function() {
				               $('#current_chapters').on('click', '.delete-chapter', function(){
				                   jQuery.ajax({
				                       type: 'post',
				                       url: "http://www.lukaspleva.com/MoneyThink/CreateNewChapter.php",
				                       dataType: 'text',
				                       data: $('#create_new_chapter').serialize(),
				         success: function(msg){ alert(msg); $('#current_chapters').load('NationalAdmin.php #current_chapters'); } 
				  	  });
				  	 return false;
				  	 });
				  	   	 });
				 </script>

[jazzman1]

When you create a new elements, you're also creating a new form too.

When you refresh the page, this second form disappears and you are able to delete the elements like before.

[phpnoob1991]

When you create a new elements, you're also creating a new form too.

When you refresh the page, this second form disappears and you are able to delete the elements like before.

 

Right, but I'd only like to refresh the appropriate div/form, not the whole page

[jazzman1]

Right, but I'd only like to refresh the appropriate div/form, not the whole page

 

You don't need to refresh the whole page, that's the purpose of javascript in this example (it was just for my test to check what's going on).

The problem is when you create new elements you also create a second form inside first one with the same id and name. That's a wrong html structure.

[phpnoob1991]

All is now fixed and working! The problem was me using .on() in the wrong script (I was putting it in the script associated with creating new entries in the form, not the script that handled the delete buttons).

 

 

[jazzman1]

You still have a wrong html structure. Do not do this.

[codefossa]

Even though it's marked as solved ..

 

If you create a div (that never gets added to the page) you can sort through the contents of another page. Much easier this way.

 

var page = $(document.createElement("div")).load('page.php');

 

Then you can use the stored html for whatever you want.

 

var newInfo = page.find('form#update_existing_chapters').html();

$('form#update_existing_chapters').html(newInfo);

 

Now your worry with the multiple forms with duplicate id's is nothing to worry about. You never add the contents of the page to the site, so a normal selector will not search it. Only when you call the variable storing the info.