javascript - load Content with jQuery without refresh -
i want load content(is html) jquery. why following code not worked me?
use of tutorial: http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/
html:
click on each of link load page it(href).
<div id="icon"> <a href="http://localhost/test/test2.php" id="delete_icon"></a> <a href="<?=base_url();?>admin/tour/insert_foreign" id="add_icon" ></a> <a href="http://localhost/test/1st.htm" id="edit_icon" ></a> <a href="http://localhost/test/index1.php" id="print_icon"></a> </div>
js:
var hash = window.location.hash.substr(1); var href = $('#nav li a').each(function () { var href = $(this).attr('href'); if (hash == href.substr(0, href.length - 5)) { var toload = hash + '.html #content'; $('#content').load(toload) } }); $('#icon a').click(function () { var toload = $(this).attr('href') + ' #content'; $('#content').hide('fast', loadcontent); $('#load').remove(); $('#wrapper').append('<span id="load">loading...</span>'); $('#load').fadein('normal'); window.location.hash = $(this).attr('href').substr(0, $(this).attr('href').length - 5); function loadcontent() { $('#content').load(toload, '', shownewcontent()) } function shownewcontent() { $('#content').show('normal', hideloader()); } function hideloader() { $('#load').fadeout('normal'); } return false; });
first of all:
- what not working?
- are getting errors?
- is xhr firing properly? (see http://fixingthesejquery.com/#slide33 debugging tips)
if want question answered should include relevant information possible.
secondly, looking @ code quickly:
you need pass reference function callback functions, instead invoking functions (shownewcontent()
instead of shownewcontent
), , passing whatever returns (in case, nothing).
try instead:
function loadcontent() { $('#content').load(toload, '', shownewcontent); } function shownewcontent() { $('#content').show('normal', hideloader); }
Comments
Post a Comment