homepage Welcome to WebmasterWorld Guest from 54.237.122.241
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
refresh specific elements with jquery
neophyte




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

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?

 

enigma1




msg:4454511
 10:06 am on May 17, 2012 (gmt 0)

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.

neophyte




msg:4454520
 11:19 am on May 17, 2012 (gmt 0)

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.

Fotiman




msg:4454579
 1:38 pm on May 17, 2012 (gmt 0)

What does it mean to "refresh" an element? Elements don't refresh, pages/locations do.

neophyte




msg:4454815
 12:31 am on May 18, 2012 (gmt 0)

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.

Fotiman




msg:4454816
 12:41 am on May 18, 2012 (gmt 0)

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?

neophyte




msg:4454872
 4:56 am on May 18, 2012 (gmt 0)

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!

Fotiman




msg:4455010
 1:47 pm on May 18, 2012 (gmt 0)

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).

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved