SitePoint Sponsor

User Tag List

Page 2 of 8 FirstFirst 123456 ... LastLast
Results 26 to 50 of 184
  1. #26
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by newtomysql View Post
    Then how to determine if my jquery library is loaded properly or not?
    What code are you using to load the jquery library?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  2. #27
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    874
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Paul,
    I am calling it like this <script src="http://code.jquery.com/jquery-1.5.1.min.js"></script>. Anything wrong here?

  3. #28
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by newtomysql View Post
    I am calling it like this

    Code:
    <script src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
    Anything wrong here?
    That seems to be fine. If you can link us to a sample web page that demonstrates the problem, that will be the best way for us to experience any remaining issues that there may be.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #29
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    874
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Paul,
    Here is the link http://183.78.169.54/v3/dynamicrow.php. Ok I have tested now ready but the funny part the number thing works only for the first row not the next rows. Another thing I notice when I remove all rows then when I try to add I cant add anymore. Can you see the link please.

  5. #30
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by newtomysql View Post
    Here is the link http://183.78.169.54/v3/dynamicrow.php. Ok I have tested now ready but the funny part the number thing works only for the first row not the next rows.
    You'll want to use a live event, as you already have for the remove button. That way jQuery will continue to monitor things, and attach the event on to the new row when it's added.

    Code javascript:
    jQuery('.dOnly').live('keyup', function () {

    Quote Originally Posted by newtomysql View Post
    Another thing I notice when I remove all rows then when I try to add I cant add anymore.
    When removing, you need to check if there is more than 1 row, and remove only if there is.

    Code javascript:
    if ($('.dynatable tbody tr').length > 1) {
        $(this).parents("tr").remove();
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #31
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    874
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Paul,
    You can visit my site again. The problem I can not remove now after adding the new code I press the button no action. The number function works now the problem now how to control where the user can now put two or more decimal points.

  7. #32
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    You seem to have deleted the click event for the remove button. That still needs to be there.

    The remove code that I posted in my previous post, that needs to go inside the function that's attached to the click event for the remove button.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #33
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    874
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Paul,
    You are correct now it works fine but why must I check till is more than 1 so must keep it that way and cannot delete all is it ? So how about the decimal problem do you have any suggestion. Another question is that now when I press the submit button,I want to check each column to make sure it is fill if not I want to give an error message below what best method you suggest for that too.

  9. #34
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by newtomysql View Post
    You are correct now it works fine but why must I check till is more than 1
    The problem you had is that it was possible to remove all of the rows, resulting in not being able to add, due to not having any rows to clone.

    There are a couple of different solutions to that, but the one that I went with is to prevent one of the causes of the problem (removing every single row) from happening at all. That's prevented by ensuring that you cannot remove unless there is more than one row on the page.

    We can now move forward from there to complete the solution to the problem. Currently the add button copies row 0, and if that one is deleted then the add button has nothing to copy.

    So the next piece from here is to allow the add button to copy from just the first row, regardless of which one that happens to be.

    Currently the code gets the prototype from one specific row.

    Code:
    var prot = master.find(".prototype").clone();
    prot.attr("class", "");
    Since the values are cleared from the cloned row, we don't have to restrict ourselves to that one particular row. We can clone from any row, such as the first one that happens to be there.

    Code javascript:
    var prot = master.find("tbody tr:first").clone();
    prot.removeClass('prototype');

    Quote Originally Posted by newtomysql View Post
    So how about the decimal problem do you have any suggestion. Another question is that now when I press the submit button,I want to check each column to make sure it is fill if not I want to give an error message below what best method you suggest for that too.
    I would like to hold that one aside until the add/remove is working properly.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #35
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    874
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Paul,
    I have done accordingly and yes it works fine it copies from any of the last row. So anything else I must do to do strengthen it. Thank you.

  11. #36
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by newtomysql View Post
    Dear Paul,
    I have done accordingly and yes it works fine it copies from any of the last row. So anything else I must do to do strengthen it. Thank you.
    Nothing that seems obvious. Now, on to the validation.

    That is most easily performed by using the jQuery validation plugin. Have a look at the demo page source code for a good idea of how it works.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  12. #37
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    874
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Paul,
    Ok give me some time to learn up the jquery plugin. Then I will get back to you. Actually I am a bit confuse jquery by itself is provided by whom a spefic party is it? Will the plugin we import will conflict with the jquery script itself? How about the decimal control any solution for that ?

  13. #38
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by newtomysql View Post
    Dear Paul,
    Ok give me some time to learn up the jquery plugin. Then I will get back to you. Actually I am a bit confuse jquery by itself is provided by whom a spefic party is it? Will the plugin we import will conflict with the jquery script itself? How about the decimal control any solution for that ?
    No conflict will occur.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  14. #39
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    874
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Paul,
    Below is my latest code. I am stuck ok I have import this first <script src="jquery.validate.js"></script> am I correct? Then I add this $("#form1").validate();
    so next I am stuck cause in my case the input text names are dynamic so how to set the rules? Next thing in this plugin how does the error message is set and how is set to appear? Thank you.


    <html>
    <head>
    <script src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
    <script src="jquery.validate.js"></script>
    <script>
    $(document).ready(function() {
    var id = 0;

    // Add button functionality
    $("table.dynatable button.add").click(function() {
    id++;
    var master = $(this).parents("table.dynatable");

    // Get a new row based on the prototype row
    //var prot = master.find(".prototype").clone();
    var prot = master.find("tbody tr:first").clone();
    prot.attr("class", "")
    prot.find("input").attr("value", '');
    prot.find(".id").attr("value", id);

    master.find("tbody").append(prot);
    return false;
    });

    // Remove button functionality
    $("table.dynatable button.remove").live("click", function() {
    if ($('.dynatable tbody tr').length > 1) {
    $(this).parents("tr").remove();
    }

    });

    jQuery('.dOnly').live('keyup', function ()
    {
    this.value = this.value.replace(/[^0-9\.]/g,'');
    });

    $("#form1").validate();
    });
    </script>
    <style>
    .dynatable {
    border: solid 1px #000;
    border-collapse: collapse;
    }
    .dynatable th,
    .dynatable td {
    background-color:#ccc;
    font-size:14px;
    font-color:#ffffff;
    font-family:Calibri;
    }
    .dynatable .prototype {

    }
    </style>
    </head>
    <body>
    <form action="<?=$_SERVER['PHP_SELF']?>" method="post" name="form1" enctype="multipart/form-data" id=form1 >
    <table class="dynatable">
    <thead>
    <tr>
    <th>ID</th>
    <th>Name</th>
    <th>Col 3</th>
    <th>Col 4</th>
    <th><button class="add">Add</button></th>
    </tr>
    </thead>
    <tbody>
    <tr class="prototype">
    <td><input type="text" name="id[]" value="0" class="id" /></td>
    <td><input type="text" name="name[]" value="" /></td>
    <td><input type="text" name="col4[]" value="" class="dOnly" /></td>
    <td><input type="text" name="col3[]" value="" /></td>
    <td><button class="remove">Remove</button>
    </tr>

    </table>
    <input class="buttons" type="Submit" name="Submit" value="Submit">
    </form>
    </body>
    </html>

  15. #40
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by newtomysql View Post
    the input text names are dynamic
    That's not a problem

    Quote Originally Posted by newtomysql View Post
    so how to set the rules?
    There are two different ways to set them, as are demonstrated on the validation demo page.

    If your validation requirements can be achieved with just the built-in validation rules, you can use them as metadata on the form field itself. Those will be cloned when you add your new rows.

    Code javascript:
    <input id="cname" name="name" class="required" minlength="2">

    You can also set the rules by scripting, as you can see in the source code of the validation demo page.

    Quote Originally Posted by newtomysql View Post
    Next thing in this plugin how does the error message is set and how is set to appear? Thank you.
    The built-in rules all have their own default error messages. Here is where they are defined in the validate plugin:

    Code javascript:
    messages: {
    	required: "This field is required.",
    	remote: "Please fix this field.",
    	email: "Please enter a valid email address.",
    	url: "Please enter a valid URL.",
    	date: "Please enter a valid date.",
    	dateISO: "Please enter a valid date (ISO).",
    	number: "Please enter a valid number.",
    	digits: "Please enter only digits.",
    	creditcard: "Please enter a valid credit card number.",
    	equalTo: "Please enter the same value again.",
    	accept: "Please enter a value with a valid extension.",
    	maxlength: $.validator.format("Please enter no more than {0} characters."),
    	minlength: $.validator.format("Please enter at least {0} characters."),
    	rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),
    	range: $.validator.format("Please enter a value between {0} and {1}."),
    	max: $.validator.format("Please enter a value less than or equal to {0}."),
    	min: $.validator.format("Please enter a value greater than or equal to {0}.")
    },

    You can also set the error messages to whatever you like, which can also be easily see in the validation demo page source code.

    The error messages appear in a label with a class name of "error", that is placed immediately after the input field. As you can see on the the validation demo page, the error message can be set to appear under the input field, or to the right of the input field. It just depends on how you choose to style your page.

    All in all, I've found the validation demo page to be very useful in demonstrating how it all works.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  16. #41
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    874
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Paul,
    You can visit my link but it will give you error of saying that $("#form1").validate is not a function $("#form1").validate();. In addition I have added the classes accordingly <td><input type="text" name="name[]" value="" class="required" /></td>
    and <td><input type="text" name="col4[]" value="" class="number" /></td>? What is my mistakes ?


    <html>
    <head>
    <script src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
    <script src="jquery.validate.js"></script>
    <script>
    $(document).ready(function() {
    var id = 0;

    // Add button functionality
    $("table.dynatable button.add").click(function() {
    id++;
    var master = $(this).parents("table.dynatable");

    // Get a new row based on the prototype row
    //var prot = master.find(".prototype").clone();
    var prot = master.find("tbody tr:first").clone();
    prot.attr("class", "")
    prot.find("input").attr("value", '');
    prot.find(".id").attr("value", id);

    master.find("tbody").append(prot);
    return false;
    });

    // Remove button functionality
    $("table.dynatable button.remove").live("click", function() {
    if ($('.dynatable tbody tr').length > 1) {
    $(this).parents("tr").remove();
    }

    });

    jQuery('.dOnly').live('keyup', function ()
    {
    this.value = this.value.replace(/[^0-9\.]/g,'');
    });

    $("#form1").validate();
    });
    </script>
    <style>
    .dynatable {
    border: solid 1px #000;
    border-collapse: collapse;
    }
    .dynatable th,
    .dynatable td {
    background-color:#ccc;
    font-size:14px;
    font-color:#ffffff;
    font-family:Calibri;
    }
    .dynatable .prototype {

    }
    </style>
    </head>
    <body>
    <form action="<?=$_SERVER['PHP_SELF']?>" method="post" name="form1" enctype="multipart/form-data" id=form1 >
    <table class="dynatable">
    <thead>
    <tr>
    <th>ID</th>
    <th>Name</th>
    <th>Col 3</th>
    <th>Col 4</th>
    <th><button class="add">Add</button></th>
    </tr>
    </thead>
    <tbody>
    <tr class="prototype">
    <td><input type="text" name="id[]" value="0" class="id" /></td>
    <td><input type="text" name="name[]" value="" class="required" /></td>
    <td><input type="text" name="col4[]" value="" class="number" /></td>
    <td><input type="text" name="col3[]" value="" /></td>
    <td><button class="remove">Remove</button>
    </tr>

    </table>
    <input class="buttons" type="Submit" name="Submit" value="Submit">
    </form>
    </body>
    </html>

  17. #42
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Do you have jquery.validate.js on your server in the right location, for it to be loaded?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  18. #43
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    874
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Paul,
    Yes I have check it now it is in right location and works. The problem can you have a look my link. What I would like is that the the error message to appear below the grid and I want to show which row and column the error is? Is that possible?

  19. #44
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by newtomysql View Post
    Dear Paul,
    Yes I have check it now it is in right location and works. The problem can you have a look my link. What I would like is that the the error message to appear below the grid and I want to show which row and column the error is? Is that possible?
    That might be possible with some complicated scripting, but in the mean time, a partial solution is to work with the default error placement, and use CSS to make it look better.

    Code css:
    label.error { display: inline; }
    td { vertical-align: top; }

    Along with this in the row clone section:

    Code javascript:
    prot.find('input.error').removeClass('error');
    prot.find('label.error').remove();
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  20. #45
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    That might be possible with some complicated scripting, but in the mean time, a partial solution is to work with the default error placement, and use CSS to make it look better.

    Code css:
    label.error { display: inline; }
    td { vertical-align: top; }

    Along with this in the row clone section:

    Code javascript:
    prot.find('input.error').removeClass('error');
    prot.find('label.error').remove();
    It's becoming more and more tempting now to save off a prototype row when the page loads, and copy from that for new rows.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  21. #46
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    874
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Paul,
    I have added the new codes but not changes to it. What do you mean by saving off a prototype row? Thank you.

  22. #47
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by newtomysql View Post
    I have added the new codes but not changes to it.
    What was I thinking. It should be display block, not display inline.

    Code css:
    label.error { display: block; }

    Quote Originally Posted by newtomysql View Post
    What do you mean by saving off a prototype row? Thank you.
    Look at what is now happening when you add a row.

    1. A row is cloned
    2. The class attribute is emptied on the tr element
    3. Then we find the input fields and empty those
    4. Set the id number
    5. Remove any errors that may be attached
    6. And finally add it to the table

    Code:
    var prot = master.find("tbody tr:first").clone();
    prot.attr("class", "");
    prot.find("input").attr("value", '');
    prot.find(".id").attr("value", id);
    prot.find('label.error').remove();
    master.find("tbody").append(prot);
    It would be much easier if we saved that prototype when the page loads.

    That way, when we add we only need to:

    1. Retrieve that prototype
    2. Update the id
    3. Add it to the table

    at the start of the document.ready function
    Code javascript:
    var prot = $('tr.prototype').clone().removeClass('prototype');
    $('table.dynatable').data('prototype', prototype);

    in the add function
    Code javascript:
    var prot = master.data('prototype');
    prot.find(".id").attr("value", id);
    master.find("tbody").append(prot);
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  23. #48
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    874
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Paul,
    I have added the block and also the relevant change but it cant find the 'prototype' and this gives me error.

  24. #49
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    $('table.dynatable').data('prototype', prototype);

    should be

    $('table.dynatable').data('prototype', prot);

    It's now approaching 2:30am where I am, so I should stop now since it's clear that the lateness of the hour is having a detrimental effect.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  25. #50
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    874
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Paul,
    Thank you where you are from actually. Sorry to hold you back till late nite. Do you have your email id? Never mind will catch up tomorrow. Anyway I have implemented the new codes it works but can just add one row and nothing beyond that ready. Then I notice also it only normally validate the first row and not the second one. Thank you very much I feel more better now with jquery.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •