0

Me and my teammates have an issue we haven't been able to solve and hope someone can help us.

We have 4 images on the top and we want to change the content of another div when we click on them.

This is the code of the JavaScript function which puts the 4 upper images and works well. The problem appears when we try to pass parameters from the onClick() function to our modificarDetailed(). (Scroll to the right to see the most important part of img)

function insertRecommended(parent,events) {
    var hola = events[0].author;
    parent.append('<div class="row">\
            ...
        <div class="col-md-3 col-sm-6">\
                <img class="img-responsive img-portfolio img-hover" src="'+ events[1].image+'" alt="" onclick="modificarDetailed('+events[1].nameEvent+','+events[1].category+','+events[1].author+','+events[1].dateInit+','+events[1].image+');">\
        </div>\
        ...
    </div>')
}

This is the function which adds the HTML code of a DetailedEvent. As you can see, we try to make it dynamic and change the content of the inputs

function insertDetailedEvent(parent,event) {

    parent.append('<!-- Features Section -->\
        <div class="row" > \
            <form id="' + "detailedform" + '">\
            <div class="col-lg-12">\
                <h2 class="page-header"><input type="text" name="eventname" value="'+event.eventName+'"/></h2>\
            </div>\
           <div class="col-md-6">\
                <ul>\
                    <li><strong>Categoría: </strong><input type="text" name="category" value="'+event.category+'"/></li>\
                    <li><strong>Creador: </strong><input type="text" name="author" value="'+event.author+'"/></li>\
                    <li><strong>Fecha de Inicio: </strong><input type="text" name="dateInit" value="'+event.dateInit+'"/></li>\
                </ul>\
                <p>'+event.description+'</p>\
                </form>\
            </div>\
            <div class="col-md-4 .col-md-offset-4">\
                <img name="eventImage" class="img-responsive" src="'+event.image+'" alt="">\
            </div>\
        </div>\
        <!-- /.row -->')

}

After that, we have this to update the content of DetailedEvent

function init(parent){

    listEvent("logon",function(events){

        insertRecommended(parent,events);
        insertDetailedEvent(parent,events[0]);

    },function(){},function(){});
}

function modificarDetailed(eventName,category,author,dateInit,image){
    var documento= $("#detailedform");
    documento.find('input[name="eventname"]').val(eventName);
    documento.find('input[name="category"]').val(category);
    documento.find('input[name="author"]').val(author);
    documento.find('input[name="dateInit"]').val(dateInit);
    //documento.find('img[name="eventImage"]').src(image);

}

And this is how we call the init in the html main document

<script type="text/javascript">
        $(document).ready(function() {
            init($('#Content'));

        });
</script>

Thanks in advance.

3
  • Are you creating multiple elements with id="detailedForm"? IDs have to be unique.
    – Barmar
    Apr 13, 2015 at 20:26
  • I think it's the event thing: function insertDetailedEvent(parent,event). It is reserved.
    – yaakov
    Apr 13, 2015 at 20:26
  • @Barmar technically we are overwritting it. But thank you both for your responses! We finally found the solution, I'm going to post it now. Apr 14, 2015 at 8:56

1 Answer 1

0

Finally we found the solution. We saw it yesterday searching on the net but we did it wrong so it didn't work at first.

It is necessary to use '\', so this is how it was:

<img class="img-responsive img-portfolio img-hover" src="'+ events[1].image+'" alt="" onclick="modificarDetailed('+events[1].nameEvent+','+events[1].category+','+events[1].author+','+events[1].dateInit+','+events[1].image+');">\

And this is how it must be done:

<img class="img-responsive img-portfolio img-hover" src="'+ events[1].image+'" alt="" onclick="modificarDetailed(\''+events[1].nameEvent+'\',\''+events[1].category+'\',\''+events[1].author+'\',\''+events[1].dateInit+'\',\''+events[1].image+'\',\''+events[1].description+'\');">

Thanks anyway to @Barmar and @yak613 for their try.

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.