CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Catfish
Catfish

Reputation: 19284

Img tag works when hard coded but not when dynamically inserted via javascript

If I dynamically generate the img tags they don't show up when they should, but if I hard code the values in there the images show up. Anyone know why this is?

According to my jQuery there should be 2 image tags inserted after each input with the class .inputBox

HTML:

<form action="" method="post" id="myform">
   <label for="FirstName">First Name</label>
      <input type="text" class="inputBox" name="FirstName" id="firstName" />


      <label for="LastName">Last Name</label>
      <input type="password" class="inputBox" name="LastName" id="lastName" />

</form>

CSS:

.thumb {
 visibility:hidden;
 height:0;
 width:0;
}
.thumbV {
 visibility:visible;
 height:30px;
 width:30px;
 float:right;
 padding:0 15px 0 0;
}
.borderGreen {
 border:solid 2px #24F706;
}
.borderRed {
 border:solid 2px #FD0F0F;
}

jQuery:

$(document).ready(function() {


 //calls the addImages function which is below
 addImages();

 //when the input focus is blurred
 $("#firstName").blur(function() {

  //when the focus is blurred, the sendValue function is called 
  //with the value that is in the input box
  sendValue($(this).val(), "name.php", "#up1", "#down1", "#firstName");
 });
 //when the input focus is blurred
 $("#firstName").focus(function() {

  //when the input gains focus, the sendValue function is called 
  //with the value that is in the input box
  sendValue($(this).val(), "name.php", "#up1", "#down1", "#firstName");
 });

 $("#lastName").blur(function() {
  sendValue($(this).val(), "name.php", "#up2", "#down2", "#lastName");
 });

 $("#lastName").focus(function() {
  sendValue($(this).val(), "name.php", "#up2", "#down2", "#lastName");
 });


 //function to determine the number of input fields and append a number to the id of each
 //in order to display the correct thumb when a field is blurred

 function addImages() {   

  var numInputs = $("div").length;

  for(var i = 1;i<=numInputs;i++) {

   //insert the thumbs images after form elements. 
   $("<img src=\"Images/thumbs_up_48.png\" class=\"thumb\" id=\""+"up"+i+"\" />").appendTo(".inputBox:nth-child("+i+")");
   $("<img src=\"Images/thumbs_down_48.png\" class=\"thumb\" id=\""+"down"+i+"\" />").appendTo(".inputBox:nth-child("+i+")");
  } 
 }

 //function that sends the input box value to the php script.
 //the php script checks if the input box value is in the correct format
 //and sends a variable of either true or false back to this function. 
 //this function takes that variable and either adds classes or removes classes to 
 //give the border a different color and the correct icon. 
 function sendValue(str, file, up, down, field) {

  //calls the ajax.php file using the post method and passes the variable str
  $.post(file, {sendValue: str}, 

  //when the php script sends a variable back, this function compares the returned
  //variable and makes certain <img> available and adds certain classes.
  function(data) {
   if(data.returnValue === true) {
    $(down).removeClass('thumbV').addClass('thumb');
    $(up).removeClass('thumb').addClass('thumbV');
    $(field).removeClass('borderRed').addClass('borderGreen');
   }
   else if(data.returnValue === false) {
    $(up).removeClass('thumbV').addClass('thumb');
    $(down).removeClass('thumb').addClass('thumbV');
    $(field).removeClass('borderGreen').addClass('borderRed');
   }
   else {
    $(up).removeClass('thumbV').addClass('thumb');
    $(down).removeClass('thumbV').addClass('thumb');
    $(field).removeClass('borderRed'); 
   }
  }, "json"); 
 }
});

This is the output i'm trying to achieve. When a user types something in the input, it is set to a PHP script to validate. I've used firebug to make sure that the PHP script is working and it is. If it validates correctly, one of the 's class should change to thumbV and the input box should also get either the class .borderRed or .borderGreen, which it does. 

<body>

<div id="container">
    <div id="outer">
        <div id="inner">    

            <div id="loginForm">
                <h2>Login</h2>
                <div class="tooltip"></div>
                <form action="" method="post" id="myform">
                    <label for="FirstName">First Name</label>
                    <input type="text" class="inputBox" name="FirstName" title="First Name Here" id="firstName" />
                    <img src="Images/thumbs_up_48.png" id="up1" class="thumb" />
                    <img src="Images/thumbs_down_48.png" id="down1" class="thumb" />

                    <label for="LastName">Last Name</label>
                    <input type="password" class="inputBox" name="LastName" title="Must be at least 8 characters and contain letters and numbers" id="lastName" />

                    <img src="Images/thumbs_up_48.png" id="up2" class="thumb" />
                    <img src="Images/thumbs_down_48.png" id="down2" class="thumb" />

                    <label for="Username">Username</label>
                    <input type="text" class="inputBox" name="Username" title="Must be at least 8 characters long" id="username" />

                    <img src="Images/thumbs_up_48.png" id="up3" class="thumb" />
                    <img src="Images/thumbs_down_48.png" id="down3" class="thumb" />

                    <label for="Password">Password</label>
                    <input type="password" class="inputBox" name="Password" title="Must be at least 8 characters and contain letters and numbers" id="password" />

                    <img src="Images/thumbs_up_48.png" id="up4" class="thumb" />
                    <img src="Images/thumbs_down_48.png" id="down4" class="thumb" />

                    <label for="Email">Email Address</label>
                    <input type="text" class="inputBox" name="Email" title="Email Address Here" id="email" />

                    <img src="Images/thumbs_up_48.png" id="up5" class="thumb" />
                    <img src="Images/thumbs_down_48.png" id="down5" class="thumb" />

                    <button type="submit" name="Submit" id="submitButton">Submit</button>
                    <input type="hidden" name="Hidden" id="hidden" />

                </form>

            </div>

        </div>
    </div>
</div>

</body>

Upvotes: 3

Views: 827

Answers (2)

Khanzor
Khanzor

Reputation: 5000

This is possibly more idiomatic:

$('.inputBox').each(function(i) { 
  var fixedIndex = i + 1;
  $('<img></img>').addClass('thumb')
      .attr('id', 'up'+fixedIndex)
      .attr('src', 'Images/thumbs_up_48.png')
      .after(this);

  $('<img></img>').addClass('thumb')
      .attr('id', 'down'+fixedIndex)
      .attr('src', 'Images/thumbs_down_48.png')
      .after(this);
}

It avoids using the nth child psuedo-selector, so should be more performant. I also think it reads a little better, but that's just personal taste...

Upvotes: 2

user113716
user113716

Reputation: 322462

As <input /> isn't really a container like a div, I somehow doubt that javascript can be used to insert anything inside of it. This is just a guess, but perhaps when it is hard coded, the browser is making a correction for you and placing the image after the <input />.

Correction:

I previously said to append to input's parent, but the inputs share the same parent. Instead use after() to place images after each input.

$('inputBox').after('my html with image');

Upvotes: 2

Related Questions