AJAX change content inside lightbox

Hi Everyone,

I need to update a div in a lightbox with AJAX Button.Right now it is updating a div outside a ligtbox :(.

It means ajax update is working fine here.But it is not working as i want. :( :unsure:.

Anybody can provide me some helpful information.

Thanks in Advance.


   <!-- Start a Photo Gallery Code -->

               <?php


               if(!empty($galleryImages)){

               ?>

               <ul class="gallery clearfix"> <!-- start a code for listing of images-->

               <?php

                $i=1;

                   foreach ($galleryImages as $image):

                       //echo $i;

                    //echo $image->photo_name;

                   ?>

                    <li><a href="#inline_demo<?php echo $i;?>" rel="prettyPhoto[inline]"><?php echo CHtml::image($bUrl."/uploads/gallery/thumb/".$image->photo_name);?></a></li>

                   <?php

                   $i++;

                   endforeach;

                   ?>

                   </ul> <!-- end of Ul Li code -->


                   <!-- this loop is written for Showing a Inline Content Div For a Particuler Div -->

                    <?php

                    $j=1;

                   foreach ($galleryImages as $image):

                       //echo $image->photo_name;

                   ?>


                <div id="inline_demo<?php echo $j;?>" style="display:none;">


                <p><?php echo CHtml::image($bUrl."/uploads/gallery/full/".$image->photo_name);?></p>

             

                   <!-- Start of Comment form -->




                   <?php if(Yii::app()->user->getId()){?>

                    <div class="replyform" id="comment<?php echo $image->id;?>" style="display:">

                        <?php $form=$this->beginWidget('CActiveForm', array(

                        'id'=>'photocommentform'.$image->id,

                        'action'=>CHtml::normalizeUrl(array('/gallery/postcomment')),

                         'enableAjaxValidation'=>true,

                         'enableClientValidation'=>true,

                         'clientOptions'=> array('validateOnSubmit'=>true),

                         'stateful'=>true, 'htmlOptions'=>array('enctype' => 'multipart/form-data'),

                        )); ?>


                           <div class="replyblank" id="errordiv<?php echo $image->id;?>" style="display:none;">

                               Please post your comment.you can not submit blank form.

                           </div>


                            <div class="replycomenreply"><?php echo $form->textArea($model,'comment',array('class'=>'commentreplytext','id'=>'photocomment'.$image->id)); ?></div>

                            <div class="replypostbutton">

                                    <?php echo CHtml::activeHiddenField($model,'photo_id',array('value'=>$image->id));?>

                                    <?php echo CHtml::ajaxSubmitButton('Post',array('gallery/postcomment'), array('update'=> "#commentreplycnt".$image->id,'dataType'=> 'html'),array("class"=>"buttonbgimage"));?>

                            </div>

                         <?php $this->endWidget();?>


                   </div>


                   <?php } ?>

                                   <div id="commentreplycnt<?php echo $image->id;?>" class="photo_cmmnts">

                                        <?php

                                             $photoComment = new PhotoComment();

                                             $photoCommentData = $photoComment->photoCommentFetch($image->id);


                                       if($photoCommentData){

                                            foreach($photoCommentData as $photoCommentData){

                                        ?>

                                        <div  class="photocommentdetail">

                                            <div class="fwidth">

                                                 <div class="bpicholder">

                                                        <?php

                                                        if(!empty($photoCommentData->usetInfo->userpic)){

                                                            echo CHtml::image($bUrl.'/uploads/user_avatar/thumb/'.$photoCommentData->usetInfo->userpic,"",array("width"=>"30","height"=>"30"));

                                                        }else{

                                                            echo CHtml::image($tUrl.'/images/no_img.jpg',"",array("width"=>"30","height"=>"30"));

                                                        }?>

                                                 </div>

                                                 <div class="blog_post_name">

                                                        <span><?php echo $photoCommentData->usetInfo->first_name;?> </span>

                                                        &nbsp; <?php echo $photoCommentData->comment;?>

                                                 </div>

                                                 <div class="blog_post_name">

                                                         <span>Posted on <?php echo date('M d, Y H:i a',strtotime($photoCommentData->created));?>

                                                         &nbsp;</span>

                                                 </div>

                                            </div>

                                        </div>

                                    <?php }}?>


                        </div>





                    <!-- End of Commnet form -->

                </div>

                   <?php

                   $j++;

                   endforeach;

               }else{

                   echo "There Is No Image in this Gallery";

               }

               ?>

               <!-- End of Photo galleyry Code -->



So,What i need here is to update content which is opening Ligtbox.when ajax Button is clicked.

When i put a div(which i want to update with ajax) outside a ligtbox relational Div. then it is working fine here.But i want to update a div inside a lightbox.

I guess anybody can help me here. :(

What is the lightbox used? prettyPhoto? If that is so, have you look into its javascript documentation?




<!-- AJAX CALL TO UPDATE CONTENTS -->

<a href="/demos/prettyPhoto-jquery-lightbox-clone/xhr_response.html?ajax=true&amp;width=325&amp;height=185" rel="prettyPhoto[ajax]"><img src="/wp-content/themes/NMFE/images/thumbnails/earth-logo.jpg" alt="" width="50"></a>



If you wish to do it programatically, then you need to use its API http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/documentation/

Thanks Antonio for your quick reply.

Well I am doing pragmatically by myself.And yes i am using a Prettyphoto for this task with a " Inline content"I have check the documentation for this extension but didn’t get any useful information. :( or i can say i can’t understand the concept of it very well.

I have done almost.but the only problem i am getting here is that

comment form which is submitted with ajax button is not updating a Div id in lightbox.And also this for is not validating here.

i need to submit a comment via ajax button and want to show a list of comments just below this comment form.

Comment is posting with the help of ajax but it is not updating a Div content in the lightbox.and also a comment form is not validating. :( :(

This is what i want to do and this is what which is happening with me.

And i am pretty sure that you can help me here. :)

well to let you no more about my code.I have created a form in a Loop also.So that a everytime when i click on a new image then a corresponding comments will display and a form with a different form ID will be shown.

Kindly help me …plzzzzzzzzzzzzz :(

If you wish to do that and the form is within the lightbox, then i would do the following:

  • Use the button/link to open the lightbox and its contents rendered via ajax (prettyphoto does automatically)

  • User a ‘.on’ (jquery 1.7 old ‘.live’ on your main view file (the one that opens the lightbox) to set the click event of the submit button within the lightbox

  • That click function to be the actual ajax call, and on success update the layer that is under the form on the ajax’ed contents

If its another layer within the page that is updated, then check for IDs… make sure the id of the layer you update is the only one in your document (use firebug!)

Should work

Thanks Antonio,

its really great info for me.And yes its work perfect.

thanks again for your help.

cheers …!! :)