0

I have a backbone chat web app , i have a javascript array which holds names and other stuff, what i want is to look in this array if this.name() exists and if so read the element before the name wich is a image url and use that in option_h3 in the code below. hope im clear enough. thanks i.a.

var PeopleView = Backbone.View.extend({
className: 'peopleView',
initialize: function() {
  this.people = Hula.user.get("people");
  this.people.on('add', this.addPerson, this);
  this.people.on('remove', this.render, this);
  $(".nav_item").removeClass("nav_item_s");
  $("#people_nav").addClass("nav_item_s");
},
render: function(){
    this.$el.empty();
    var header = $('<div id="people_header">');
    var title = $('<div class="t34 title">');
    title.html("Friends");
    header.append(title); 
    this.$el.append(header);
    var addOption = $('<div id="people_add_option">');
    var addInput = '<div id="addp"><div id="people_add_input_h"><form id="add_person_input_form" ><input id="add_person_input" name="s" type="text" value="Enter Hularing ID..." ></input></form></div></div>';
    addOption.html(addInput);
    this.$el.append(addOption);
    var list = $('<div id="people_list" >');
    this.$el.append(list);
    this.people.each(this.addPerson, this);
    return this;
},
addPerson: function(person){
    var view = new PeopleViewPerson({model: person});
    this.$("#people_list").prepend(view.render().$el);
},
events: {
    'keypress #add_person_input': 'addNewPerson',
},
addNewPerson: function(e){
    var ID = $('#add_person_input').val();
    if(ID !=="Enter Hularing ID..."){
        if(e.which == 13) {
            if(validate(ID)){
                Hula.subscribe(ID);
                 this.$('#add_person_input').val("")
                 $("#add_person_input_form")[0].reset();
                $('#add_person_input').blur().focus();                   
                e.preventDefault();
            }
        }
    }
}
});

var PeopleViewPerson = Backbone.View.extend({
className: 'friend_holder',
initialize: function() {
    $(this.el).attr('id', jid_to_id(this.model.get("jid")));
    this.model.on('all', this.render, this);
    this.model.get('conversation').get('messages').on('add', this.onNewMessage, this);
},
render: function() {
    var img = $('<div class="friend_img_h">');
    if(this.pic() == null){
        img.html('<img src="farax/img/default.png" />');
    } else {
        var img_src = 'data:'+this.picType()+';base64,'+this.pic();
        img.html('<img src="'+img_src+'" />')
    } 
    var info_h = $('<div class="friend_info_h">');
    var person_name = $('<div class="friend_name">');
    person_name.html(this.name());
    var line2 = $('<div class="friend_line2">');
    var status = this.status();
    line2.html(status);
    var option_h = $('<div class="friend_option_h">');
    option_h.html('<div class="msg_person_icon" ></div>');
    // CONTACT INFO DIV.
    var option_h1 = $('<div class="friend_option_h1">');
    // CONTACT INFO IMAGE IN CSS FILE.
    option_h1.html('<div class="msg_person_icon1"></div>');
    // CONTACT FACEBOOK TIJDLIJN.
    var option_h2 = $('<div class="friend_option_h2">');
    // CONTACT FACEBOOK TIJDLIJN IMAGE IN CSS FILE.
    option_h2.html('<div class="msg_person_icon2"></div>');
    var option_h3 = $('<div class="friend_option_h3">');
    option_h3.html('<div class="msg_person_icon3"></div>');

    for(var t = 0; t < javaScript_array.length; t++) {
      // this one stays the same
      var naam = this.name();

      var res = javaScript_array[t];
      // ignore this it is done to get the name from the database the same as in the collection
      var naam1 = naam.replace(" ","0");
      // see if it exists
      if(naam1 === res){
              option_h3.append('<div class="msg_person_icon3"><img src="'+ javaScript_array[t-1] +'" width="35" height="35"/></div>');

      } else {
              option_h3.html('<div class="msg_person_icon3"></div>');

      }
     }
            if(this.ask()== "subscribe"){
        line2.prepend('<span class="pending_out">Request pending.</span>');
    }
    if(this.pending()){
        line2.prepend('<span class="pending_in">Pending authorisation!</span>');
    }
    info_h.append(person_name).append(line2);
    this.$el.html(img);
    this.$el.append(info_h);
    this.$el.append(option_h);      
    this.$el.append(option_h1);             
    this.$el.append(option_h2);             
    this.$el.append(option_h3);             
    return this;
},
jid:        function() { return this.model.get('jid');},
name: function() { return this.model.get('name'); },
status: function() { return this.model.get('status'); },
pic: function() { return this.model.get('picture').pic; },
picType: function() { return this.model.get('picture').picType; },
ask: function() { return this.model.get('ask'); },
subscription: function() { return this.model.get('subscription'); },
pending: function() { return this.model.get('pending'); },
online: function() { return this.model.get('online'); },
events: {
    'click .friend_img_h': 'loadPerson',
    'click .friend_info_h': 'loadPerson', 
    'click .msg_person_icon': 'messagePerson' 
},
loadPerson: function(){ 
    Hula.screen.person.render(this.model);
},
messagePerson: function(){
    Hula.screen.conversation.render(this.model);
},
onAll: function(person){
},
onNewMessage: function(message){
    $('#people_list #'+jid_to_id(this.jid())+' .friend_line2').html(message.get("message"));
},
OnStatusChange: function(change){
    $("#people_list #"+id_to_jid(this.ji())).html(this.status().toString());
}    

});

it only works on the last element in the array while there are three elements.

1
  • You have a few problems. 1) you set jsArr to the array length, so later asking for jsArr[t] will not work. You probably meant javaScript_array[t] 2) I'd venture the guess that this.name() is the same value each time you loop. Therefore if (naam1 === res) is only true for one item in the entire array. Commented Feb 24, 2014 at 18:52

1 Answer 1

1

I'm looking at your code and to be completely honest, it makes absolutely no sense to me. I can see that you have option1 option2 and option3 which I assume are the 3 elements you are referring to only, in your array at the bottom, you only ever seem to change option 3.

Sign up to request clarification or add additional context in comments.

1 Comment

yeah it seems odd but the option1 and option2 all comes together to one line with image picture of the contact, his name and 2 other images,all i want is to look if the current contactname exist in my array if yes put the image wich is before the name in the array on screen.i know it all seem to make no sense but that is because i am just trying things out.sorry for the messy code...

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.