Attribute "src" contains zero on the left Image

Question

I am having a little bit of trouble with the src on this code:

A event updates the src that depends on a variable collected from the form, then the those .jpg´s can't be name changed so I need to stick with that. The problem is all of their names are in numbers and also some of them start with a zero, so using attr from string is not working properly:

var newSrc = "http://charal.unacar.mx/fotos/" +credencial+ ".jpg";
$('#foto').removeAttr("src")
$('#foto').attr('src', newSrc);

This credential would work: ######

This credential would not: 0#####

Where lays my problem?

how are you assigning value to `credencial`? because if you are doing `var credencial = 0#####;`, then javascript may assume it as a numeric value and neglect first `0`. — Bharadwaj, May 14 '14 at 06:32
You may be interested in this: http://stackoverflow.com/questions/12888075/javascript-alert-number-starting-with-0 — Jon P, May 14 '14 at 06:59
well the idea is to read a magnetic card into an input and its content is exactly `credencial`+\n . so `'\n'` is pretty much managed from submit $.post but credentials like 012345 won't return image. they are stored and managed by other people and I don't have access to edit those filenames. i need `attr()` to use something like `"http://charal.unacar.mx/fotos/" +credencial+ ".jpg"`avoiding to loose leading 0's so that final src would be `http://charal.unacar.mx/fotos/012345.jpg" `. — lcarvajal, May 14 '14 at 12:10

score 0 · Answer 1 · answered May 14 '14 at 06:07

i have one example for you might it will help you. This is not the exact code but by checking this you can do what you want.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('li[id^="step"]').click(function(){
    var imagepath = jQuery(this).attr('dir');
    jQuery('#ImageDiv').find('img').attr('src',imagepath);
});
});</script>
<style>
li{ cusrsor:pointer; padding:10px; }
</style>

<li id="step1" dir="images1.jpg">Step1</li>
<li id="step2" dir="images2.jpg">Step2</li>
<li id="step3" dir="images3.jpg">Step3</li>
<li id="step4" dir="images4.jpg">Step4</li>
<li id="step5" dir="images5.jpg">Step5</li>

<div id="ImageDiv"><img src="images1.jpg"></div>

score 0 · Accepted Answer · answered May 14 '14 at 17:11

weird thing it started working by it self this morning i don't know what i did, thank you for your help , the working code is this:

$("#credencial").keyup(function(e) {
        if ($("#credencial:focus") && (e.keyCode === 13)) {
            var credencial = $("#credencial").val();
            console.log("\n credencial " + credencial);
            $(':input', '#frm')
                .not(':button, :submit, :reset, :hidden')
                .val('')
                .removeAttr('checked')
                .removeAttr('selected');
            $.post("http://localhost/Aplicaciones%20con%20bases%20de%20datos/consulta.php", {
                    credencial: credencial
                }, function(json) {
                    $('#matricula').val(json.matricula);

                    $('#des').val(json.des);
                    $('#carrera').val(json.carrera);
                    $('#nombre').text(json.nombre + " " + json.apellido);
                    //var newSrc = "background:url('http://charal.unacar.mx/fotos/"+json.matricula+".jpg'); background-size:300px;";

                    var newSrc = "http://charal.unacar.mx/fotos/" +credencial+ ".jpg";
                    $('#foto').removeAttr("src")
                    $('#foto').attr('src', newSrc);
                },
                "json");
        }
    });

Attribute "src" contains zero on the left Image

2 Answers2