Apply Jquery After Page Loads

Question

I have following HTML code to add new div:

 <a class="add-link" id="buttonAdd" href="@Url.Action("Foo", "Foo1", new {actiontype = "Add" })">Add New Openings</a>

When i click on Add , new div is added. I want to show that div in editable mode by default, but as there is link in html for <a> I am not able to accomplish it. I want to show first div that is added as editable .

$(document).ready(function () {
 $('.container').on('click', '.add-link', function () {
 $("#accordion").first().find('.panel-title, .panel-collapse').attr('contenteditable', true).css('border', '2px solid');
 $('#accordion').first().find('.edit-link').css('display', 'none');
 $('#accordion').first().find('.done-link').css('display', 'inline');
 });

Can someone guide me please.

• iCollect.it Ltd: Which part of the page do you want to replace? (this assumes an Ajax load is also required, which is seems to be based on your comments).
• Richa: I don't wanna replace. New div is added whithout replacing. I just want whenever new div is added to show taht div in editable mode
• iCollect.it Ltd: In that case- question: The link you click returns what exactly?
• Richa: Returns the same page Foo/Foo1, but with newly added div. It shows in this fiddle jsfiddle.net/UZkJ3/25. It is output html
• iCollect.it Ltd: I have updated my answer with various options, but you need to decide how you want to fix this. Basically the current design will never work as it depended on the code remaining in memory across a page load.

Answer 1

You need to prevent the default click behaviour:

$(document).ready(function () {
 $('.container').on('click', '.add-link', function (e) {
 e.preventDefault();
 $("#accordion").first().find('.panel-title, .panel-collapse').attr('contenteditable', true).css('border', '2px solid');
 $('#accordion').first().find('.edit-link').css('display', 'none');
 $('#accordion').first().find('.done-link').css('display', 'inline');
 });

Apparently this is only the first issue. They also want the code to run after the link page has been loaded!!! :)

How web pages work.

Because the web was designed to be stateless, to a web browser, each page load is separate to the last. Even if they are the same URL. The practical upshot of this is that your code gets reloaded and restarted on each page.

Based on your comments you want to add a div then apply jQuery to the accordion. You have two options.

a)

Detect the change of divs on page load and apply the change then.

b)

Run the link via an Ajax call and update just the required part of the page using informtion in the new page returned from the server.

Of these two options only the Ajax solution will allow you to retain code-control on the originating page. I would suggest the URL be changed to a method which returns a PartialPage containing just the new DIV.

In order to answer this definitively, we need more information about how you prefer to solve the problem.

If you go Ajax:

If you go with an Ajax update, I suggest you change the link to an action that just returns the new DIV in a PartialView. Then you can do something like this:

$('.container').on('click', '.add-link', function (e) {
 // Stop default processing of the link
 e.preventDefault();
 // Load the new page (specified by the clicked link's href)
 var $link = $(this);
 var url = $link.attr('href');
 alert(url); // for testing - remove this
 // Execute a HTML GET command on the URL
 $.get(url, function (html) {
 // Add the new DIV "somewhere" to be determined
 $('.container').append(html);
 // Then do your other processing
 $("#accordion").first().find('.panel-title, .panel-collapse').attr('contenteditable', true).css('border', '2px solid');
 $('#accordion').first().find('.edit-link').css('display', 'none');
 $('#accordion').first().find('.done-link').css('display', 'inline');
 });
});

• Richa: I tried,but it is not solving my problem. Is there a way i can apply above jquery after the href in HTML is finished??
• iCollect.it Ltd: Yes, you need to process the request using an Ajax call instead. You lose control over all code when a new page is loaded.
• Richa: Could you please help me out with it. Because i am not so familiar with AJAX. Thanks
• iCollect.it Ltd: @RS26: You need to describe how the pages are related and the contents of them. Can you post the HTML to a JSFiddle?
• Richa: jsfiddle.net/UZkJ3/23. This is how it should work.When i click on New div , a new is getting added but it is not staying in editable mode because of href and also firstchild gets changed so