i always get the same html

Question

i need some help with this, i'm trying to generate some html with javascript, but always get the same, this is my javascript code

var datePickerHTML = function(id){
    var html = "<div id='"+id+"' class='ui-datepicker'>";
    html += "Hello World, my ID is "+id;
    html += "</div>";
    return html;
}

var UhmaCalendar = function(config){
    var dpID = 'dp'+config.inputField;
    this.dpID = dpID;
    jQuery('#'+config.inputField).after(function(){
      return datePickerHTML(dpID);
});
    jQuery('#'+config.btn).click(function(){
          jQuery('#'+dpID).toggle('slow');
    }
}

now, in my html i write

UhmaCalendar({
    btn : 'countday_pick',
    inputField : 'countday'
});
UhmaCalendar({
    btn : 'sartday_pick',
    inputField : 'startday'
});

this is for 2 diferent input and buttons, but they always show the same div with the same text, and id i check the html withthe firebug, only one div is created, ad i want 2 div with diferent ids i also try with

new UhmaCalendar({
    btn : 'sartday_pick',
    inputField : 'startday'
});

but is the same, what am i doing wrong here thanks

Answer 1

You have forgotten to return html; in the function datePickerHTML.

With the newest edit, I was unable to reproduce the error. See http://jsbin.com/ucage4 for a demo which works correctly.

Answer 2

Hard to tell what's wrong, the code as quoted is unparseable. Some notes that may be of use:

var datePickerHTML = function(id){
    var html = "<div id='"+id+"' class='ui-datepicker'>";
    html += "Hello World, my ID is "+id;
    html += "</div>";
    // Should probably have `return html;` here
}

var UhmaCalendar = function(config){
    this.dpID = 'dp'+config.inputField;
    jQuery('#'+config.inputField).after(function(){
      return datePickerHTML(dpID);
                         // ^-- This symbol is undefined, and != `this.dbID`
    });
    jQuery('#'+config.btn).click(function(){
          jQuery('#'dpID).toggle('slow');
                 // ^-- syntax error (and `dbID` is undefined here too)
    } // <-- Missing `);` here
}

If I had to guess at the intent:

var datePickerHTML = function(id){
    var html = "<div id='"+id+"' class='ui-datepicker'>";
    html += "Hello World, my ID is "+id;
    html += "</div>";
    return html; // tjc
}

var UhmaCalendar = function(config){
    var dpID = 'dp'+config.inputField; // tjc
    this.dpID = dpID; // tjc
    jQuery('#'+config.inputField).after(function(){
      return datePickerHTML(dpID);
    });
    jQuery('#'+config.btn).click(function(){
          jQuery('#'+dpID).toggle('slow'); // tjc
    }); // tjc
}

My suspicion is that the dpID thing(s) are the main error. I've fixed it above by creating a variable within the function which the enclosed functions inherit access to (because they're closures).

HTH