locked
How to do an EditableTable via Jquery RRS feed

  • Question

  • User283528319 posted

    Hi,

    I want to edit a regular table's <td> part by changing it with another component (like input or select or <g class="gr_ gr_96 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling" id="96" data-gr-id="96">datepicker</g>).

    <g class="gr_ gr_108 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del" id="108" data-gr-id="108">I ll</g> be happy to learn how can I do this. (I know several components <g class="gr_ gr_207 gr-alert gr_gramm gr_inline_cards gr_run_anim Grammar multiReplace" id="207" data-gr-id="207">in</g> the internet to do it but none of them gives enough reliability to rely on)

    Friday, January 11, 2019 11:15 AM

Answers

  • User283528319 posted

    I really appreciate your afford. <g class="gr_ gr_16 gr-alert gr_gramm gr_inline_cards gr_run_anim Punctuation only-ins replaceWithoutSep" id="16" data-gr-id="16">However</g> I like to solve the problem as simple as possible.

    The code below solved my problem.

    <script>
    $("mytag").click(function () {
    $(this).replaceWith(" <mytag scope=\"col\"><input class=\"form-control-static\" value=\"" + $(this).text() + "\" /> </span>");
    });
    </script>

    And as a part of "KISS"* principle that I have. I'll avoid to use Angular, React or Vue until I have to. And if I have to I <g class="gr_ gr_14 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del" id="14" data-gr-id="14">ll</g> go with Vue.

    Bootstrap and Jquery gave me the magic I need till now (and I hope to go to <g class="gr_ gr_15 gr-alert gr_gramm gr_inline_cards gr_run_anim Grammar only-ins replaceWithoutSep" id="15" data-gr-id="15">end</g> with them)

    *Keep it simple stupid

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, January 12, 2019 8:23 AM

All replies

  • User475983607 posted

    I want to edit a regular table's <td> part by changing it with another component (like input or select or datepicker).

    I ll be happy to learn how can I do this. (I know several components in the internet to do it but none of them gives enough reliability to rely on)

    Try the jQuery DataTable plugin and see it fits your needs.  Keep in mind that we have no idea what "reliability" means to you or what features you are looking for.  Generally, there are two parts to editing records; a listing and an HTML form.   The record listing can have feature like paging and filtering.  The HTML form can have date pickers and validation. 

    There are also plenty of tutorials that show techniques for editing records.   IMHO, it is often easier to build your own with the features that you want.

    https://docs.microsoft.com/en-us/aspnet/core/data/ef-mvc/?view=aspnetcore-2.2

    https://www.mikesdotnetting.com/article/328/simple-paging-in-asp-net-core-razor-pages

    Friday, January 11, 2019 1:07 PM
  • User283528319 posted

    Try the jQuery DataTable plugin and see it fits your needs. Little bit pricy and I need little bit more native solution which only includes jquery and bootstrap

    it is <g class="gr_ gr_40 gr-alert gr_gramm gr_inline_cards gr_run_anim Grammar only-ins replaceWithoutSep" id="40" data-gr-id="40">little</g> bit pricy and I need <g class="gr_ gr_41 gr-alert gr_gramm gr_inline_cards gr_run_anim Grammar only-ins replaceWithoutSep" id="41" data-gr-id="41">little</g> bit more native solution which only <g class="gr_ gr_53 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="53" data-gr-id="53">icludes</g> jquery and bootstrap

    Friday, January 11, 2019 1:40 PM
  • User475983607 posted

    it is little bit pricy and I need little bit more native solution which only icludes jquery and bootstrap

    DataTable is a free Query plugin that works with Bootstrap.  Keep in mind that jQuery is a framework to query the DOM.

    What do you mean "native solution"?  You want to write the code yourself?  

    The Getting Started tutorials on this site illustrate the basics.  I recommend starting with the tutorial to get a working demo then add jQuery at a later time.

    https://docs.microsoft.com/en-us/aspnet/core/data/ef-mvc/?view=aspnetcore-2.2

    Friday, January 11, 2019 2:24 PM
  • User283528319 posted

    DataTable is a free Query plugin that works with Bootstrap.  Keep in mind that jQuery is a framework to query the DOM.

    What do you mean "native solution"?  <g class="gr_ gr_27 gr-alert gr_gramm gr_inline_cards gr_run_anim Grammar multiReplace" id="27" data-gr-id="27">You want</g> to write the code yourself?  

    The Getting Started tutorials on this site illustrate the basics.  I recommend starting with the tutorial to get a working demo then add jQuery at a later time.

    https://docs.microsoft.com/en-us/aspnet/core/data/ef-mvc/?view=aspnetcore-2.2

    DataTable's editable version is with <g class="gr_ gr_100 gr-alert gr_gramm gr_inline_cards gr_run_anim Grammar only-ins doubleReplace replaceWithoutSep" id="100" data-gr-id="100">price</g>.

    And yeah I already finished that tutorial.

    But I am not talking exactly about it.

    I just need to place input controls in the table <g class="gr_ gr_160 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="160" data-gr-id="160">dimentions</g> to edit data and then send to database

    Friday, January 11, 2019 3:52 PM
  • User475983607 posted

    You're asking the community to write a bit of code to get you started.  Below is a very simple demo that dynamically updates the DOM.  Another approach is render all the HTML needed then use buttons to toggle visibility.  Anyway, there's a bunch of approaches.

        public class Product
        {
            public int Id { get; set; }
            public string Name { get; set; }
            [DisplayFormat(DataFormatString = "{0:d}")]
            public DateTime Created { get; set; }
        }

    Actions

        public class HomeController : Controller
        {
            private List<Product> products { get; set; }
            public HomeController()
            {
                products = new List<Product>()
                {
                    new Product()
                    {
                        Id = 1,
                        Name = "Hello",
                        Created = new DateTime(2019, 1, 1)
                    },
                     new Product()
                    {
                        Id = 2,
                        Name = "World",
                        Created = new DateTime(2019, 1, 2)
                    }
                };
            }
    
            [HttpGet]
            public IActionResult Index()
            {
                return View(products);
            }
    
            [HttpPost]
            public IActionResult Index(Product product)
            {
                Product prod = products.Where(p => p.Id == product.Id).FirstOrDefault();
                prod.Name = product.Name;
                prod.Created = product.Created;
    
                return View(products);
            }

    View

    @model IEnumerable<MvcApi22.Models.Product>
    
    @{
        ViewData["Title"] = "Index";
    }
    
    <h1>Index</h1>
    
    <p>
        <a asp-action="Create">Create New</a>
    </p>
    <form method="post" style="display:block;" id="inline-form">
        <table class="table">
            <thead>
                <tr>
                    <th>
                        @Html.DisplayNameFor(model => model.Name)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.Created)
                    </th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                @foreach (var item in Model)
                {
                    <tr>
                        <td>
                            <span>@Html.DisplayFor(modelItem => item.Name)</span>
                        </td>
                        <td>
                            <span>@Html.DisplayFor(modelItem => item.Created)</span>
                        </td>
                        <td>
                            <button class="btn btn-primary edit-button" data-id="@item.Id">Edit</button>
                        </td>
                    </tr>
                    <tr></tr>
                }
            </tbody>
        </table>
    </form>
    
    @section Scripts {
        <script>
            var editing = false;
    
            //Replace the table text with inputs
            $('.edit-button').click(function (e) {
                e.preventDefault();
                if (!editing) {
                    editing = true;
                    var id = this.dataset.id;
                    //Loop over the td and update the DOM
                    $(this).closest('tr').find("td").each(function (index, value) {
                        if (index < inputNames.length) {
                            let text = $(value).text().trim();
                            let name = inputNames[index]
                            $(value).append('<input type="text" name="' + name + '" id="' + name + '" class="form-control" value="' + text + '" />')
                            $(value).find('span').remove();
                        }
                        else { //handle the last button column
                            $(value).find('button').remove()
                            $(value).append('<input type="submit" value="Save" name="Save" class="btn btn-primary" />');
                            $(value).append('<input type="hidden" name="Id" value="' + id + '" />')
                        }
                    });
                }
                else {
                    alert('Please save the edit.');
                }
            });
    
            //Uses the table columns as the input names.
            var inputNames = [];
            $('.table > thead > tr > th').each(function (index, value) {
                if ($(value).text().trim() != "") {
                    inputNames.push($(value).text().trim());
                }
    
            });
        </script>
    }

    As suggested in your other threads, we recommend using an SPA framework like React when populating HTML using JavaScript/jQuery. 

    Friday, January 11, 2019 9:16 PM
  • User283528319 posted

    I really appreciate your afford. <g class="gr_ gr_16 gr-alert gr_gramm gr_inline_cards gr_run_anim Punctuation only-ins replaceWithoutSep" id="16" data-gr-id="16">However</g> I like to solve the problem as simple as possible.

    The code below solved my problem.

    <script>
    $("mytag").click(function () {
    $(this).replaceWith(" <mytag scope=\"col\"><input class=\"form-control-static\" value=\"" + $(this).text() + "\" /> </span>");
    });
    </script>

    And as a part of "KISS"* principle that I have. I'll avoid to use Angular, React or Vue until I have to. And if I have to I <g class="gr_ gr_14 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del" id="14" data-gr-id="14">ll</g> go with Vue.

    Bootstrap and Jquery gave me the magic I need till now (and I hope to go to <g class="gr_ gr_15 gr-alert gr_gramm gr_inline_cards gr_run_anim Grammar only-ins replaceWithoutSep" id="15" data-gr-id="15">end</g> with them)

    *Keep it simple stupid

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, January 12, 2019 8:23 AM
  • User475983607 posted

    fatihbarut

    really appreciate your afford. However I like to solve the problem as simple as possible.

    The code below solved my problem.

    <script>
    $("span").click(function () {
    $(this).replaceWith(" <span scope=\"col\"><input class=\"form-control-static\" value=\"" + $(this).text() + "\" /> </span>");
    });
    </script>

    And as a part of "KISS"* principle that I have. I'll avoid to use Angular, React or Vue until I have to. And if I have to I ll go with Vue.

    Bootstrap and Jquery gave me the magic I need till now (and I hope to go to end with them)

    *Keep it simple stupid

    There are a few logical issues with the code snippet.  The input is missing the the "name" attribute.  Browsers do not submit inputs without a name attribute.  The user must click each row cell they wish to edit which is unusual but might be the requirement.

    As written the code requires AJAX to submit the input(s).  That means you have a lot more code to write to support this approach.  You'll need to write a post action to return data or HTML depending on how you want to render dynamic HTML.  You must write code to take the AJAX response and update the DOM.  IMHO this approach is more complicated.

     

    Saturday, January 12, 2019 1:34 PM
  • User283528319 posted

    There are a few logical issues with the code snippet.  The input is missing the "name" attribute.  Browsers do not submit inputs without a name attribute.  The user must click each row cell they wish to edit which is unusual but might be the requirement.

    As written the code requires AJAX to submit the input(s).  That means you have a lot more code to write to support this approach.  You'll need to write a post action to return data or HTML depending on how you want to render dynamic HTML.  You must write code to take the AJAX response and update the DOM.  IMHO this approach is more complicated.

     

    Actually, I changed the span tag with my own tag <mytag>

    and now I don't need the name of the component.

    all the components with <mytag> <g class="gr_ gr_890 gr-alert gr_gramm gr_inline_cards gr_run_anim Grammar multiReplace" id="890" data-gr-id="890">uses</g> this code and I think with the help of <g class="gr_ gr_517 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="517" data-gr-id="517">html</g> helpers (razor pages) I can manipulate each element by adding <g class="gr_ gr_850 gr-alert gr_gramm gr_inline_cards gr_run_anim Grammar multiReplace" id="850" data-gr-id="850">id's</g> and etc.

    Saturday, January 12, 2019 3:45 PM
  • User475983607 posted

    Actually, I changed the span tag with my own tag <mytag>

    and now I don't need the name of the component.

    all the components with <mytag> uses this code and I think with the help of html helpers (razor pages) I can manipulate each element by adding id's and etc.

    Your comments make little sense without the source code. 

    Razor pages run on the web server.  The result of a Razor Page is HTML which resides in the browser.  The browser only submits form inputs that have name attributes.  If you are submitting a form you need the name attributes regardless  of the custom tag.  It is possible to use IDs but it requires an XHR POST.  In other words JavaScript code. 

    Saturday, January 12, 2019 4:09 PM
  • User283528319 posted

    fatihbarut

    Actually, I changed the span tag with my own tag <mytag>

    and now I don't need the name of the component.

    all the components with <mytag> uses this code and I think with the help of html helpers (razor pages) I can manipulate each element by adding id's and etc.

    Your comments make little sense without the source code. 

    Razor pages run on the web server.  The result of a Razor Page is HTML which resides in the browser.  The browser only submits form inputs that have name attributes.  If you are submitting a form you need the name attributes <g class="gr_ gr_46 gr-alert gr_gramm gr_inline_cards gr_run_anim Style multiReplace" id="46" data-gr-id="46">regardless  of</g> the custom tag.  It is possible to use IDs but it requires an XHR POST.  In other words JavaScript code. 

    I <g class="gr_ gr_65 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="65" data-gr-id="65">dont</g> think I will use forms to submit information.

    I will probably solve all my problems using ajax and entity framework. (without rendering <g class="gr_ gr_250 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="250" data-gr-id="250">html</g> of my page), it can be called pseudo SPA maybe

    Saturday, January 12, 2019 5:41 PM