CODEWITHSUNDEEP
jquery
webestdesigns
webestdesigns

Reputation: 438

reload the same div from the same url

I have contentEditable divs, (that can be changed by the client,) how can I add a button to refresh the content of the div, It should remove all the children of this $(this) div and reload them from the server, to refresh the content & revert the changes made by the user.

Problem is, that there are many of these editable divs and all share the same classes, so I can't just specify an id or class to .load() - What seems to be the problem is that I can't use jquery selectors as a fragment to fetch, so I would need an id for each one of the editable divs.

I Have tried the following

.load() the url (which is "window.location") using $(this) as the id

with no luck 

  There are many of these divs! I appended a button to each editable div,
  <div contentEditable class="editable">`<p>abc...</p>`<button>refresh</button></div>  


 $('.editable button').click(function(){
    $(this).parent('.editable').children('*').remove();
    $(this).parent('.editable')
    .load(window.location + " " + $(this).parent('.editable').children('*') );
    return false;
    })

What is wrong? & What is the best approach?

Upvotes: 1

Views: 1334

Answers (1)

Rafael Verger
Rafael Verger

Reputation: 1761

What you want with this code: window.location + " " + $(this).parent('.editable').children('*') ?

If you have an especific URL to load each editable content you can set this URL as an attribute of the editable element, but if you have only one editable area and is the all page content, you only need to get the page again (like a reload)

So, solving case 1:

$('.editable button').click(function(){
  var $editable = $(this).closest('.editable');
  var reloadURL = $editable.attr('reload-url');
  $editable.load(reloadURL);
})

For the case 2, you just have to:

$('.editable button').click(function(){
  var $editable = $(this).closest('.editable');
  $editable.load(window.location.href + " #" + $editable.attr('id'));
})

The .load() method replace the content of an element by the content from the response of an ajax request

Upvotes: 1

Related Questions