Click here to Skip to main content
15,887,683 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
hi there I am working on this issue
where I have a bellow cord
JavaScript
<script type="text/javascript">
    $(document).ready(function () {
        $("#main").load('@Model.PayjaxUrl', function () {
            $("#main").ready(function () {
var block = "<table class=\"inputMessage\"><tr><td id=\"-validation-message\"></td></tr></table>";
    block += "<div class=\"fldFlag\"></div>";
    block += "<div class=\"messageArrow\"></div>";
    var amountvalidation = document.getElementById('input-group-placeholder');
    amountvalidation.insertAdjacentHTML('beforeend', block);

where I am trying to add a html string to a div which is crated by loading the content in the url path PayjaxUrl

once the payjaxUrl is loaded I can see the bellow div
HTML
<div class="input-group-placeholder">
                            <input type="text" class="form-control" id="CardHolderName" name="CardHolderName" value="Mr">
                            <span class="input-group-addon form-control-feedback-error">
                                <span class="glyphicon glyphicon-remove"></span>
                            </span>
                            <span class="input-group-addon form-control-feedback-success">
                                <span class="glyphicon glyphicon-ok"></span>
                            </span>
                        </div>


but my JavaScript through bellow error
Uncaught TypeError: Cannot read property 'insertAdjacentHTML' of null

appreciate if some one could point me out what I am doing wrong
thanks
Posted

1 solution

Your call to:

var amountvalidation = document.getElementById('input-group-placeholder');


is where you're going wrong. You're trying to get the element by it's ID attribute, yet the element you're looking for doesn't even have an ID attribute, let alone one sporting that value.

Try this:

XML
<div id="amountValidationElement" class="input-group-placeholder">
    <input type="text" class="form-control" id="CardHolderName" name="CardHolderName" value="Mr">
    <span class="input-group-addon form-control-feedback-error">
        <span class="glyphicon glyphicon-remove"></span>
    </span>
    <span class="input-group-addon form-control-feedback-success">
        <span class="glyphicon glyphicon-ok"></span>
    </span>
</div>


With the following call to getElementById:

var amountvalidation = document.getElementById('amountValidationElement');
 
Share this answer
 
Comments
rushdy20 11-Jun-14 4:09am    
thanks for that correction now I have changed
it to
var amountvalidation = document.getElementsByClassName('input-group-placeholder');
but now I get a different error is says
uncaughtTypeError: Undefined is not a function on the bellow line
amountvalidation.insertAdjacentHTML('BEFOREND',block);

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900