views:

116

answers:

2

I am working on an administration page to add an article to a site. Two of the fields ("Tags" and "Resources") begin with only once instance labeled "Tag 1" and "Resource 1" respectively.

Using jQuery, I allow the user to add additional tags and/or resources ("Tag 2", "Tag 3", etc) and it works ALMOST as I want it to. If the page has been loaded fresh (No resfresh), the function correctly counts up adding instances 2, 3, 4...

BUT... if I refresh the page (In my case COMMAND-R), a single instance is displayed (what I want to happen) and the count begins where it left off once I begin adding tags so the count would proceed as something like: Tag 1, Tag 6, Tag 7, Tag 8, etc.

This only happens in Firefox (Tested in Safari, IE6, and IE7 so far).

Any ideas what is causing this behavior.

jQuery Script below:

// Functions for adding additional tags and resources to articles
$(document).ready(function(){
    $(".tag:last").addClass("last-tag");
    $(".resource:last").addClass("last-resource");

    t = null;
    t = $("#tag-count").val();

    r = null;
    r = $("#resource-count").val();

    $(".add-tag").click(function () {
        t++;
        $(".last-tag")
            .removeClass("last-tag")
            .after("<li class=\"form-item last-tag\"><label for=\"tag-"+ t +"-input\">Tag "+ t +"</label><input type=\"text\" class=\"text-input\" name=\"tag[]\" id=\"tag-"+ t +"-input\" value=\"\" />");
        $("#tag-count").val(t);
        return false;
    });

    $(".add-resource").click(function () {
        r++;
        $(".last-resource")
            .removeClass("last-resource")
            .after("<li class=\"form-item last-resource\"><label for=\"resource-"+ r +"-input\">Resource "+ r +"</label><input type=\"text\" class=\"text-input\" name=\"resource[]\" id=\"resource-"+ r +"-input\" value=\"\" />");
        $("#resource-count").val(r);
        return false;
    }); 
});

Source for "add.php":

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <title>Add an Article to Site</title>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <link rel="stylesheet" type="text/css" media="all" href="\\\\\SITE_ROOT\\\\\/css/admin/format.css" />
    <script src="\\\\\SITE_ROOT\\\\\/scripts/jquery.js" type="text/javascript"></script>
    <script src="\\\\\SITE_ROOT\\\\\/scripts/jquery.validate.js" type="text/javascript"></script>
    <script src="\\\\\SITE_ROOT\\\\\/scripts/admin/admin.functions.js" type="text/javascript"></script>
</head>
<body>

<h1>Site Administration</h1>

<ul class="nav">
    <li><?=anchor('admin/add/', 'Add New Article');?></li>
    <li><?=anchor('admin/delete/', 'Delete an Article');?></li>
</ul>

<?=form_open('admin/article_insert');?>

    <fieldset>
        <legend>Article Information</legend>
        <ul>
            <li class="form-item">
                <label for="title-input">Title</label>
                <input type="text" class="text-input" name="title" id="title-input" value="<?php echo set_value('title'); ?>" />
                <?php echo form_error('title'); ?>

            </li>
            <li class="form-item">
                <label for="subtitle-input">Subtitle</label>
                <input type="text" class="text-input" name="subtitle" id="subtitle-input" value="<?php echo set_value('subtitle'); ?>" />
                <?php echo form_error('subtitle'); ?>

            </li>
            <li class="form-item">
                <label for="author-input">Author</label>
                <input type="text" class="text-input" name="author" id="author-input" value="<?php echo set_value('author'); ?>" />
                <?php echo form_error('author'); ?>

            </li>
            <li class="form-item">
                <label for="category-input">Category</label>
                <input type="text" class="text-input" name="category" id="category-input" value="<?php echo set_value('category'); ?>" />
                <?php echo form_error('category'); ?>

            </li>

            <input type="hidden" id="tag-count" name="tag-count" value="1" />
            <li class="form-item tag">
                <label for="tag-1-input">Tag 1</label>
                <input type="text" class="text-input" name="tag[]" id="tag-1-input" value="" />
                <a href="#" class="add-tag">Add Another Tag</a>
                <?php echo form_error('tag[]'); ?>

            </li>
            <li class="form-item">
                <label for="content-input">Article Content</label>
                <textarea name="content" id="content-input" rows="10"><?php echo set_value('content'); ?></textarea>
                <?php echo form_error('content'); ?>

            </li>
            <li class="form-item">
                <label for="excerpt-input">Excerpt Content</label>
                <textarea name="excerpt" id="excerpt-input" rows="6"><?php echo set_value('excerpt'); ?></textarea>
                <?php echo form_error('excerpt'); ?>

            </li>

            <input type="hidden" id="resource-count" name="resource-count" value="1" />
            <li class="form-item resource">
                <label for="resource-1-input">Resource 1</label>
                <input type="text" class="text-input" name="resource[]" id="resource-1-input" value="" />
                <a href="#" class="add-resource">Add Another Resource</a>
                <?php echo form_error('resource[]'); ?>

            </li>
            <li class="form-item">
                <label for="url-input">URL</label>
                <span class="pre-input-span"><?=base_url()?></span><input type="text" class="text-input" name="url" id="url-input" value="<?php echo set_value('url'); ?>" />
                <?php echo form_error('url'); ?>

            </li>
            <li class="form-item">
                <label for="submit-input">Submit</label>
                <input type="submit" name="submit" id="submit-input" value="Submit Article" />
            </li>
        </ul>
    </fieldset>

</form>

<p><br />Page rendered in {elapsed_time} seconds</p>

</body>
</html>
+2  A: 

It is because you are storing the tag count in an hidden field. Firefox by default, allows you to refresh the page without losing input data, so the tag count is not refreshing.

You can do one of three (or more) things to fix it.

1) I believe you can use defaultValue to get the initial value, but I couldn't find a list of browser support (Update: Just tested in IE6, IE7, IE8, FF2, FF3, FF3.6, Safari 4, Chrome 3, and this solution works great.):

var t = null;
t = $("#tag-count")[0].defaultValue;

or

var t = null, tag_count = $("#tag-count");
tag_count.val( tag_count[0].defaultValue ); // Update the old value with the correct one
t = tag_count.val();

2) Just use a normal variable to store the tag count, and it will be reset on each load

Change t = null; to var t = 1; and just use it, but remove any call to $("#tag-count"). If you need that information on the server, add this:

$("form").submit(function(e){
   $("#tag-count").val(t);
});

3) Use the field like you have, but reset it on page load:

$("#tag-count").val(1); // Assumes it always starts at 1
Doug Neiner
I'd rather not use $("#tag_count") at all, but I use this same function on an "Edit" page so that when the page loads, PHP counts the number of tags, applies that number to the value of $("#tag_count"), and so if I begin adding tags, the count begins in the correct place (outside of firefox).Would it make more sense to hide the $("#tag_count") number in a hidden <div> or <p> so that on refresh, the input value isn't saved for me by firefox?
ian_local_info
I'm a bit confused where the "[0]" of $("#tag_count")[0] came from.I get an error when using your update:Error: $("#tag_count")[0] is undefined
ian_local_info
@ian_local_info I don't think you need to keep track of the tag count at all. For the tags that already have database id's, output their name like this: `tag[5]` or `tag[17]`. Then, just add new tags with this name `tag[]`. Finally, in PHP, You should be able to do a `foreach( $_POST['tag'] as $id => $value ){ ... }` But I am unsure how it handles `$keys` when you stop supplying them. Anyway, that might be better. Hiding the `input` would have no change on the affect of Firefox. -- Try my updated 1st solution (second option), and see if it works for you.
Doug Neiner
@ian_local_info Sorry, I misread your ID, and used an underscore instead of a dash. The `[0]` gets the actual DOM element instead of the jQuery wrapper set.
Doug Neiner
A: 

Thanks for the help everyone.

I decided to trade the hidden input for a and it resolved itself. The issue was resolved once firefox didn't have an input value to retain on refresh.

ian_local_info