If there is no element of the DOM, which creates it (JQuery / Javascript)

Question

If there is no element of the DOM, which creates it (JQuery / Javascript)

Navigation

#1 by (1 votes)
#2 by (-1 votes)

0

I check if there is an element with jQuery or not by its id, but it throws me an error. This check is made in a callback within the instance of an element. I need to do that check there, since it is the point at which it collects the data and must save it in a hidden input. but if that input already exists, I do not need it to be created.

This process is repeated because there is a rise of several images, but the data I only want to save once.

This is my code:

var capturaCam = new Camera(
        document.getElementById("camera-capt"),
        function (dataUrl) {

            var blob = dataURLToBlob(dataUrl);
            var fileInfo = getFileInfoFromBlob(blob);
            camsFiles.push(blob);
            processImage(fileInfo);

            var img_width = Camera.imagen.imgWidth;

            if ( $("#img_width").length == 0 ) { //Si no existe
                //crea el input hidden
                jQuery("#form-hidden").append("<input type='hidden' id='img_width' name='jform[img_width]' value='"+ img_width +"' data-hj-masked />");
            }
        }
    );

The error that shows is:

Uncaught TypeError: Cannot read property 'length' of null
at Camera.verifiedPhoto (cameraconst.js:427)
at Camera.onAccept (cameraconst.js:436)
at HTMLButtonElement.<anonymous> (Camera.js:676)
at HTMLButtonElement.dispatch (jquery.min.js:4)
at HTMLButtonElement.r.handle (jquery.min.js:4)

I imagine it has to do with some conflict with other methods to do this within the instance. Is there any other way to check if the input hidden exists or correct this error?

javascript jquery

asked by Norak 27.02.2018 в 17:30

source

2 answers

-1

According to the official documentation, the check is about the property and not about the value of it,

Review Documentation

EDITED: The important thing is that you know how to check if the element exists, which is explained in the attached documentation. Then you should define the corresponding logic

answered by 27.02.2018 в 17:58

Syntax error in SQLite with Rails ActiveRecord :: StatementInvalid How can I get system information by emulating / proc / net?

score 1 · Accepted Answer

The function that Jquery selector by id will do is return a Jquery object that contains an empty list of elements (when it does not find any element that matches that id) or a DOM element if it finds it. For this reason it is one of the solutions to use the length property to know if it is null or not. For this case I tried with an example that the function reads it correctly and also uses an extension to make the function exists more reliable and does not give me any problem. Considering that, it is most likely that you are not loading your Jquery reference or you have a conflict of names of other javascript references in your project (some file uses $ as variable and $ is an alias for Jquery, that's why it returns you null reference), try to review that and if so use jQuery.noConflict () to correct it by following the steps Here of the same documentation.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://jqueryvalidation.org/files/demo/site-demos.css">
 
</head>
<body>
<form id="form-hidden">
<label>Nombre </label>
<input id="nombre" name="">
<br>
</form>
<button onclick="ValidaImg()">Valida Imagen</button>
<script>
$.fn.exists = function () {
    return this.length !== 0;
}
function ValidaImg(){
debugger;
var img_width ="value";
if(!$("#img_width").exists()) 
   $("#form-hidden").append("<input type='text' id='img_width' name='jform[img_width]' value='"+ img_width +"' data-hj-masked />");


}
</script>
</body>
</html>