Question

I have jQuery function that adds a dynamicly, and when i want to use this element as modal i can’t, nothing happens.

When i add the same element using php everything is working fine.

My guess is that jQuery.modal don’t see this element, is there way to fix this?

My function look like this:

$.each(respJSON, function(){
                    $('#poll-questions').append(
                        $('<li>').append(
                            $('<a>').attr('href', prefix + this.id).attr('class', 'modal')
                            .attr('rel', '{handler: "iframe", size:{x:600, y:500}}')
                                .append($('<span>').append(this.question)
                    )));
                });

Answer 1

Ensure you only have 1 jQuery library being imported. If you have more than 1, use the following code to check if there is already a library being imported. If there is, don’t include your own, if there isn’t, include your own:

<?php
  // load jQuery, if not loaded before
  if(!JFactory::getApplication()->get('jquery')){
     JFactory::getApplication()->set('jquery',true);
     $document = JFactory::getDocument();
     $document->addScript(JURI::root() . "templates/template_name/js/jquery-1.8.3.js");
  }
?>

Obviously change the path so whatever suits your needs.

If this doesn’t help, ensure you have added you code the view.html.php file correctly like so:

$doc = JFactory::getDocument(); //remove this line if it's already in the file
$js = '$.each(respJSON, function(){
          $("#poll-questions").append(
             $('<li>').append(
                $("<a>").attr("href", prefix + this.id).attr("class", "modal")
                   .attr("rel", "{handler: "iframe", size:{x:600, y:500}}")
                   .append($("<span>").append(this.question)
          ));
       });'
$doc->addScriptDeclaration($js);