1

This is a really simple question, but I did not find an answer through searching.

When creating an SPA, what is the process for updating the content if you were to do it with jQuery? Is it simply deleting the contents of a node, and writing new HTML?

Here's some code to make the question clearer:

Suppose you have SPA page like this:

<div id='nav'>
  <div class='link'>home</div>
  <div class='link'>about</div>
  ...
</div>

<div id='page_content'>
  ...
</div>

When the user clicks on a nav item, jQuery does an HTTP get for the content: var content = .... To update the page, simply update the page with $('#page_content').html( content )?

B Seven
  • 44,484
  • 66
  • 240
  • 385
  • are you using any kind of framework for it? You could probably broadcast and subscribe to an event – corvid Sep 25 '14 at 23:48
  • I am creating the framework, and I was curious about __how to update__ the HTML with jQuery after the event is received. – B Seven Sep 25 '14 at 23:54

2 Answers2

2

Depends what you;'re trying to do. You can change values of textboxes like:

$("#textBoxID").val("ValueYouWant");

You can append a table row to a table like so:

$("#tableID").append("<tr<td>blahblah</td></tr>");

You can update a div's HTML:

$("#divID").innerhtml("Hello World");

Etc, etc. Your question is pretty vague, but I hope this helps.

Stan Shaw
  • 3,014
  • 1
  • 12
  • 27
  • I am asking about the last one. Suppose the page contents lives in `div#content`. When the user clicks on a new page, do you simply call `.innerhtml` to replace it with new page content? – B Seven Sep 26 '14 at 00:01
  • 1
    Yes, as I said, you can update a div's HTML. You didn't post any code, so I'm not entirely sure what you're trying to do, but it sounds like you're just trying to modify a specific div's html. If so, you can use the above or: $("#content").html("Hi"); – Stan Shaw Sep 26 '14 at 00:05
2

If by SPA you mean a Single Page solution, something like this:

<!-- HTML -->
<div id = "page-area" style = "width: 800; height: 600; border: 1px solid silver"></div>

// Javascript
$('#page-area').load('your-page.html');

// or
$.get('your-page.html', function(data){
    $('#page-area').html(data);
});

...if you want to load external files without refreshing the page.

Or to update element content:

var pagecontent = "<h1>New Content</h1><p>Some new content</p>";

$('#page-area').html(pagecontent);

Note that elements added to a page in this way will adopt existing styles and will clash with other elements with the same id attribute.

TheStatehz
  • 310
  • 2
  • 7
  • Yes, this is what I was asking. "Note that elements added to a page in this way will adopt existing styles and will clash with other elements with the same id attribute." Does that mean there is a better way or something else I should do? – B Seven Sep 26 '14 at 00:14
  • Just something to be aware of. Adopt a naming convention that ensures you do not call an external page containing an element that has the same ID attribute as an existing page element. Any code associated with these elements can misbehave when jQuery selecting an element by #id. See: http://stackoverflow.com/questions/902839/how-to-select-all-elements-with-a-particular-id-in-jquery – TheStatehz Sep 26 '14 at 00:25