i have built a simple add/remove chapter form. when "add new chapter"
clicked; ajax get fired, retrieves php file, and appends new chapter. newly
appended chapter is a <li> added to ol#append-chapter. the script also keeps
track of chapter count and displays current chapter count in h4.
issues:
1. when i remove a chapter, it does not recalculate the number of chapters
on the page. say i click add chapter 4 times (1, 2, 3, 4), if i remove
chapter two, my list reorders to (1,3,4) and if i click add new chapter it
displays (1, 3,4,2). to make it worse, if i add two more chapters the new
order becomes (1,3,4,2,3,4)
- i would like the chapters to display correct order/count when added or
removed. using example above...if i remove chapter 2 i would get (1,2,3),
and adding new chapters would proceed sequentially.
2. i'm adding the remove chapter to <h4>; each time i add a new chapter the
script executes and appends another remove chapter to every h4, even if it
already has one.
ex. if i have two chapters:
- chapter 1 remove chapter remove chapter
- chapter 2 remove chapter
other than these issues, script works fine. any help tacking these final
bugs would be great. thanks!
set-up:
<ol id="append-chapter"></ol>
<p> Click to add chapter </p>
("#chapter-append").click(function() {
var chapterCount = new
Number($("#chapter-count").val());
if (chapterCount <1) chapterCount=0;
chapterCount = chapterCount +1;
$("#chapter-count").val(chapterCount);
var queryString =
"add-chapter.php?chapter-number="+chapterCount;
//alert(queryString);
$.get(queryString, function(html) {
// append the "ajax'd" data to the table body
$("ol#add-chapter").append(html);
$("ol#add-chapter li
h4").append(removeChapter).bind('click',
function() {
var newChapter
= "#chapter-"+chapterCount+"-container";
$(newChapter).remove();
chapterCount = chapterCount -1;
$("#chapter-count").val(chapterCount);
return
false;
});
});
return false;
});
var removeChapter = 'Remove chapter';
this is the piece added via ajax:
<?php
$x=$_GET['chapter-number'];
echo <<<EOS
<li id="chapter-$x-container"><h4>Chapter $x</h4>
<ol>
<li>
<label for="chap-$x-title">Chapter Title:</label>
<input type="text" name="chap-$x-title" id="chap-title" />
</li>
<li>
<label for="chap-$x-web-descrip">Chapter Web Description:</label>
<textarea name="chap-$x-web-description" id="chap-$x-web-description"
rows="5" cols="28"></textarea>
</li>
<li>
<label for="chap-$x-full-description">Chapter Full Description:</label>
<textarea name="chap-$x-full-description" id="chap-$x-full-description"
rows="5" cols="28"></textarea>
</li>
<li>
<label for="chap-$x-thumb-url">Thumbnail URL: Dimensions</label>
<textarea class="for-url" name="chap-$x-thumb-url"
title="chap-$x-thumb-url"></textarea>
</li>
<li>
<label for="chap-$x-start">Chapter Start Time: Time format</label>
<input type="text" name="chap-$x-start" id="chap-$x-start" />
</li>
<li>
<label for="chap-$x-end">Chapter End Time: Time format</label>
<input type="text" name="chap-$x-end" id="chap-$x-end" />
</li>
</ol>
</li>
EOS;
?>
--
View this message in context:
http://www.nabble.com/add-remove-with-ordered-information-tp19708456s27240p19708456.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
