javascript - My Jquery code still won't work , yet nothing is shown in firebug

Question

I posted this code minutes 15 mins ago and I did get help for the preventDefault issue , but now I'm not getting my alerts to work , yet firebug doesn't show any error related to this code .. May i ask where I'm going wrong ,

<?php
        header ("Cache-Control: no-cache, must-revalidate");    // HTTP/1.1
        header ("Expires: Sat 26 Jul 1997 05:00:00 GMT");       // Date in the past
        require_once ("../_includes/functions.php");
        ?>
        <link rel="stylesheet" title="Style CSS" href="../_reports/report_assets/cwcalendar.css" type="text/css" media="all" />
        <script src="../_js/jquery-1.6.2.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="../_js/timer.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript" src="../_reports/report_assets/calendar.js"></script>
        <script type="text/javascript">
        $(document).ready(function(){
            $('#select').click(function(event){ 
                $(':checkbox').prop("checked", true);
                event.preventDefault();
            });
            $('#deselect').click(function(event){ 
                $(':checkbox').prop("checked", false);
                event.preventDefault();
            });

            $('#add').click(function() {
                var field = '<input class="project_fields" type="text" size ="30" name = field_settings[] /> &nbsp;&nbsp;&nbsp;&nbsp;';
                var checkbox = '<input class ="checkbox" type ="checkbox" name ="check_field[]" />&nbsp;&nbsp;&nbsp;';
                var delete_link = '<a class ="delete_link" style="text-decoration:none;" href="#"> Delete field </a> &nbsp;&nbsp;&nbsp;<br /><br />';
                var input = field + checkbox + delete_link;
                $('#input_fields').append(input);
            });


            $('#project_fields_submit').click(function(event) {
                event.preventDefault();
                var array_fields = new Array();
                $('.checkbox').each(function() {
                    if($(this) .is(':checked')) {
                        array_fields.push('1');
                        alert('checked!!!');
                    }
                    else {

                        array_fields.push('0');
                        alert('not checked !!!')
                    }

                });
                $('#checkboxes').val(array_fields);
            });

            $('#edit_fields_submit').click(function(event) {
                event.preventDefault(); 
                var edit_fields = new Array();
                $('.edit_check').each(function() {
                    if($(this) .is(':checked')) {
                        alert('checked !!!'); // doesn't alert anything after filling out the fields , though it used to
                        edit_fields.push('1');
                    }
                    else {

                        edit_fields.push('0');
                        alert('not checked !!!');
                    }

                });
                $('#edit_checkboxes').val(edit_fields);
                            alert($('#edit_checkboxes').val()); // doesn't work 
            });
            var nextRowID = 0;
            $('#add_edit').click(function() {
                var id = ++nextRowID;
                var new_field = '<input class ="class'+id+'"  type="text" size ="40" name = edit_field_value[] value =""> &nbsp;&nbsp;&nbsp;';
                var new_checkbox = '<input class ="class'+id+'"  type ="checkbox" name ="check_field[]" >&nbsp;&nbsp;&nbsp;';
                var delete_edit = '<a id ="'+id+'" class ="new_delete_edit" style="text-decoration:none;" href="#" > Delete field </a><br><br>';
                var new_input = new_field + new_checkbox; 
                $('#new_input_fields').append(new_input);
                $('#new_input_fields').append(delete_edit);
            });


            $('a.delete_edit').click(function(event) {
                event.preventDefault();
                var ID = $(this).attr('id');
                var delete_field_id = 'edit_field'+ID;
                var field_data = $('#'+ delete_field_id).val(); 
                var project_id =  $('#edit_project_id').val();
                var string = {field : field_data, pid : project_id };
                $.ajax({
                    type: "POST",
                    url: "_ajax/delete_field.php",
                    data: string,
                    success: function(data){
                        $('#'+ID).remove();
                        $('#'+delete_field_id).remove();
                        $('#new_check'+ID).remove();
                    }
                });


            });


            $('.new_delete_edit').live('click', function(event) {
                event.preventDefault();
                var id = $(this).attr('id');
                $('.class'+id).hide();
                $('#'+id).hide();
            });

        });
</script>




<?php

if (isset($_GET['pid']) && isset($_GET['user_id'])) {

    $id = $_GET['user_id']; 
    $pid = $_GET['pid']; 
    $show_id = $_GET['show_id']; 
"       

        $query_settings ="SELECT project_settings FROM projects WHERE project_id ='$pid'";
        $result_settings = mysql_query($query_settings);
        $row_settings = mysql_fetch_array($result_settings,MYSQL_ASSOC);
        if($row_settings['project_settings'] == NULL) {
            echo "<h2> Project Settings </h2>";
            echo "<br><br>";
            echo " <b> Add fields </b>";
            echo "&nbsp;&nbsp;";
            echo "<img id ='add' src='_assets/add.png' /><br><br><br>";
            echo '<form action ="" method="post">';
            echo'<input type="hidden" name="pid" value="'.$pid.'">';
            echo "<input id ='checkboxes' type ='hidden' name ='checkboxes' value ='' >";
            echo "<div id='input_fields'> </div>";
            echo '<input id ="project_fields_submit"  type ="submit" name ="project_fields_submit" class="button" value ="Save Settings" /><br><br>';
            echo '</form>';
            echo "<br><br><br><br><p></p>";
        }
        else  {
            echo "<h2> This Project Settings </h2>";
            echo "<br><br><br><br>";
            echo "<b> Add fields</b>&nbsp;&nbsp;<img id ='add_edit' src='_assets/add.png' /><br><br><br>";
            $fields_data = unserialize($row_settings['project_settings']); 
            $i = 0;
            echo '<form action ="" method="post">';
            echo'<input id ="edit_project_id" type="hidden" name="edit_project_id" value="'.$pid.'">';
            echo "<div id='new_input_fields'> </div>";
            echo "<input id ='edit_checkboxes' type ='hidden' name ='edit_checkbox' value ='' >";
            foreach ($fields_data as $key => $value) {
                if($value =="1") {
                    echo "<input id ='edit_field".$i."' class ='edit_data' type ='text' size ='40' name = edit_field_value[] value ='".$key."' />&nbsp;&nbsp;&nbsp;";
                    echo "<input id ='new_check".$i."' class ='edit_check' type='checkbox' name ='edit_checkboxes' checked />&nbsp;&nbsp;&nbsp;";
                    echo "<a id ='".$i."' class ='delete_edit' style='text-decoration:none;' href='#'> Delete field </a><br><br>";

                } else {

                    echo "<input id ='edit_field".$i."' class ='edit_data' type ='text' size='40' name = edit_field_value[] value ='".$key."' />&nbsp;&nbsp;&nbsp;";
                    echo "<input id ='new_check".$i."' class ='edit_check' type='checkbox' name ='edit_checkboxes' />&nbsp;&nbsp;&nbsp;";
                    echo "<a id ='".$i."' class ='delete_edit' style='text-decoration:none;' href='#'> Delete field </a><br><br>";
                }
                $i++;
            }
            echo '<input id ="edit_fields_submit"  type ="submit" name ="edit_fields_submit" class="button" value ="Save Settings" /><br><br>';
            echo '</form>'; 
        }
        echo '</div>';
        echo '<div id="project-setting-results"></div><div class="clear"></div>';
        echo '</div><!-- end fragment-6 -->';
    }

    ?>

score 0 · Accepted Answer

I suggest changing your design. Using <form> codes and posting isn't always the best way of sending your data to another (or the same) page for PHP processing. Instead, switch over to using AJAX code to submit your form.

For one thing, this will allow you to get away from the e.preventDefault kludges. A number of things will iron themselves out if you use the AJAX approach (instead of submitting a form). I can see that you're already using AJAX in your code, but if you're still uncomfortable with it you can check out these other answers:

Change your #edit_fields_submit input field from type="submit" to type="button" and use javascript/AJAX to:

Get all the values you would normally submit as a <form>;
Use AJAX to submit them to a PHP file for processing
In the success: function of the AJAX code block, use javascript to send the user over to whatever page you want them to see next

Example:

$('#edit_fields_submit').click(function(event) {
    var edit_fields = new Array();
    $('.edit_check').each(function() {
        if($(this) .is(':checked')) {
            alert('checked !!!'); // doesn't alert anything after filling out the fields , though it used to
            edit_fields.push('1');
        }
        else {

            edit_fields.push('0');
            alert('not checked !!!');
        }

    });
    $('#edit_checkboxes').val(edit_fields);
                alert($('#edit_checkboxes').val()); // doesn't work 

    var field_data = //you know how to get these values
    var project_id = //etc
    var string = {field : field_data, pid : project_id };
    $.ajax({
        type: "POST",
        url: "_ajax/myprocessor.php",
        dataType: "json",
        data: string,
        success: function(data){
            document.location.href='yournewpage.php';
        }
    });

});

javascript - My Jquery code still won't work , yet nothing is shown in firebug

1 回答 1

Related

Reference