Welcome to WebmasterWorld Guest from 54.204.243.45

Forum Moderators: open

refresh specific elements with jquery

   
4:11 am on May 17, 2012 (gmt 0)

10+ Year Member



Hello All -

I've got the need to refresh one or more specific page elements (not the entire page) with jquery when a particular javascript function completes.

I've looked all over the web but can't find the right solution for this functionality - most information relates to refreshing one or more elements after a certain period of time... I've tried to reverse engineer some of these suggestions but I can't get the syntax right.

In a nutshell:

I'm doing an ajax call to DELETE a single row from a database table.

After the delete finishes I need to update the content in a particular div (#main_content). I'd like to make this refresh a seperate function so I can use it for other things as well, like:

- ajax call
- on success...
- updateElement(#main_content)

function updateContent(element)
{
location.reload().element; (this is where it's not working probably because of incorrect syntax)
}

Can anyone give me an idea on where I'm going wrong?
10:06 am on May 17, 2012 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



When you want to update an element use the html property.

$selector.html(msg);

[api.jquery.com...]

As I understand you don't want to reload the entire page.
11:19 am on May 17, 2012 (gmt 0)

10+ Year Member



Hi enigma1 -

Thanks very much for your reply. I re-read my post and I can see where it could cause come confusion.

What I want to do is REFRESH a specific element (not update it with new content).

Sorry for the confusion and hope this makes my question clear: refresh a specific element, not update a specific element.
1:38 pm on May 17, 2012 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



What does it mean to "refresh" an element? Elements don't refresh, pages/locations do.
12:31 am on May 18, 2012 (gmt 0)

10+ Year Member



Hi Fotiman -

Well, that's an interesting point; this question may just show how new I am to javascript/jquery.

However, when doing a web search on "jquery refresh element" there are quite a few results so I'm assuming it can be done - I just can't get the syntax correct.

If I'm way off base here and this isn't possible then please do let me know.
12:41 am on May 18, 2012 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



I guess my point is that it's still not clear exactly what you mean by "refresh", since you said that you don't mean update it with new content. I have no idea what exactly you're trying to accomplish. Can you detail the scenario you're trying to create?
4:56 am on May 18, 2012 (gmt 0)

10+ Year Member



Hi Fotiman -

Okay, here's the scenario:

there's a div (#main_content) that holds any number of tables of information drawn from the database.

An Admin may delete any of these tables at any time by clicking the delete button on any of the tables.

Once the delete button is clicked:

1. an ajax call is made which deletes a row in the database; this row supplies the data to the table being deleted.
2. The element holding all of the tables (#main_content) needs to be refreshed (updated/whatever) to show that the target table had indeed been deleted.

That's how it's suppose to work.

I've got it working by simply refreshing the entire page, but would like to be able to only refresh the content div only if possible.

Hummm... while re-reading this reply I now realize that the reason that refreshing the entire page works is because on refresh new data is drawn from the database which then repopulates #content_main.

So, looks like to do this via jquery I'd have to:

1. delete the row from the database, and then...
2. make a second ajax call to pull fresh content from the database and load that content into #content_main.

Boy, I feel like an idiot not thinking this through before making my initial post. Sorry about that!
1:47 pm on May 18, 2012 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



Ok, I think you can probably still provide a more efficient method than doing multiple AJAX requests. Here's the approach I would take.

If each child has it's own delete button, then onclick of one of those buttons send an AJAX POST request to the server. This request is basically a request to delete some data (there may be some security considerations here... just saying). The page on the server that processes the request should perform the delete in the database and then return a response that indicates whether the request was successful. When your AJAX request gets the response and it was successful, delete that child from the container.

Note, here is how I'd do it as a progressive enhancement:

<div id="main_content">
<div>
<form method="post" action="delete.php">
<table>...</table>
<input type="hidden" name="rowId" value="42">
<input type="submit" class="deleteBtn" value="Delete">
</form>
</div>
...
</div>
$('form').submit(function(event) {
// stop the form from submitting normally
event.preventDefault();

// get some values relating to this form/section
var $form = $(this),
url = $form.attr('action'),
rowId = $form.find('input[name="rowId"]').val(),
$nodeToDeleteOnSuccess = $form.parent();

// send the data using post and delete the container on success
$.post( url, {rowId: rowId}, function(data){
if (data === "success") {
$nodeToDeleteOnSuccess.remove();
}
}, "text" );

return false;
});


Note, as a progressive enhancement this is still not complete. I would want to change the delete page to return more than just the text "success" so that the user saw more than just that text. But this *should* work (I haven't tried it).
 

Featured Threads

Hot Threads This Week

Hot Threads This Month