0

I've got a page that on $(document).ready, calls a javascript function that creates some input controls dynamically based on context of page request via a ajax call to the server.

I need to set one of the dynamically created controls (input checkbox) to be checked by default.

I've tried setting it via $(#id).prop('checked', true); after the call to the server but it does not work. My guess is that the field does not exist yet...

How can I modify a html control dynamically created from an ajax call?

James Wierzba
  • 16,176
  • 14
  • 79
  • 120

3 Answers3

5

Instead of using prop to have it checked initially, set checked in the HTML.

<input type="checkbox" id="#" value="sample" checked>

This can be done static or dynamically. Simply add checked as part of your dynamic generation. Then you bring in prop to suit your needs.

Aaron
  • 1,208
  • 1
  • 9
  • 21
  • This solution came to mind but unfortunately the HTML generation is abstracted in a separate library that I can't modify for this single case – James Wierzba Aug 29 '16 at 17:33
  • @JamesWierzba Even if it came from a library, you can still access the element after it has loaded in, then change your settings there. – Aaron Aug 29 '16 at 17:35
0

You can use attr and removeAttr methods to check/uncheck a checkbox/radio input.

// to check a checkbox or radio button
$(selector).attr("checked","checked");

// to uncheck a checkbox (radio button will be cleared on another check)
$(selector).removeAttr("checked");

and if you're creating the input from AJAX, you can put this on the AJAX success or complete function after the DOM is updated. But @Aaron is right, setting the value on generation on the server side is more effective.

Taha Paksu
  • 15,371
  • 2
  • 44
  • 78
0

The answers provided are good and could work but not with my problem. This is because the javascript that generates these html elements is a abstracted file that generates html input controls for many different applications. I can't modify that file to specifically check a checkbox for one case.

What I did was, inside of this generic javascript file, call a setDefaults() method IF IT EXISTS in the current context. So the callers of this script can choose to implement a setDefaults() that will be called by the generic script, after the html has been generated.

function initReport(reportID) {
    //request the data needed to create the dynamic html from the server:
    $.ajax({
        type: "GET",
        url: "/report.aspx/GetReportDetails?reportID=" + reportID,
        contentType: "application/json; charset=utf-8",
        dataType: "json"
    }).done(function (result) {
        reportFormData = JSON.parse(result.d);
        //request our generic html template:
        $.ajax({
            type: "GET",
            url: "/assets/modules/report/Templates/Form.html"
        }).done(function (result) {
            $("#Form").html(result);
            //generate html from server data:
            buildViewModel(reportFormData);
            buildPage(reportFormData);
            kendo.bind($("#Form"), viewModel);
            //call "setDefaults" function only if it has been defined (in the current report template)
            if (typeof setDefaults === "function")
            {
                setDefaults();
            }
        });
    }).fail(function (jqXHR, textStatus, err) {
        console.log("An error has occurred: " + err);
    });
...
}
James Wierzba
  • 16,176
  • 14
  • 79
  • 120
  • @JamesWizerzba I still don't understand. At the end of the day the forms and inputs are present in the DOM. You can manipulate it. – Aaron Aug 30 '16 at 18:07
  • I am struggling to explain but essentially, we have javascript files for each of the implementations of the a generic "report". It is in this file that I have to put the DOM manipulation, because it is specific only to that report instance. However, the form inputs have not yet been generated at the time the report instance script is executed. Hence the need to make a call back from the generic report script, to the instance script (only if the function exists, so as not to break other instances that do not have the `setDefaults` function) – James Wierzba Aug 30 '16 at 18:12
  • If that's the case, why the attempt for `$(#id).prop('checked', true);`? – Aaron Aug 30 '16 at 18:14
  • @Aaron I don't understand the question. That is what I want to do, change the property of that checkbox checked to true. The checkbox doesn't exist in the DOM at the time I select it. Hence my solution to define a function, that checks the checkbox, then call the function later in the generic script, after the checkbox is added to the DOM. It is confusing for sure, but this is the framework that is deeply embedded in our application and this is the only work around I can see. – James Wierzba Aug 30 '16 at 18:19
  • `then call the function later in the generic script` You can set it to checked at this point. There isn't a framework in the world that can be written where you can't manipulate a DOM after it has loaded in. Looks like you weren't asking the right questions. The problem is that you can manipulate it, but you don't want to since it is part of a generic script in the framework that may break existing code/don't want to change the infrastructure. – Aaron Aug 30 '16 at 18:20
  • @Aaron that is correct, I can set it checked. But this script generates a different set of HTML input controls based on the context (a `reportID` argument). The checkbox in this question only exists for `reportID == 1`, not for any other of the reports, which call this same generic script. So it would break when the other reports call this script. – James Wierzba Aug 30 '16 at 18:24
  • Then your problem really isn't `setting checked via jquery (selector).prop() function not working for dynamic html` – Aaron Aug 30 '16 at 18:24