CODEWITHSUNDEEP
jqueryfancybox
stianj
stianj

Reputation: 23

How to get data into a fancybox?

I'm totally virgin to jQuery in general. PHP is my cup of tea, and due to general programming knowledge I more or less understand javascript in general. I'm doing some volunteer work for a music festival, and was handed a complete design, where I "just" had to implement the php for it to work.

Most things work, but there are one (or actually to, but the other one will be for later) big issue that my google-foo can't seem to overcome...

I have some data from a database listed. At the end of each row, there is a delete button. That delete button opens now a fancybox with a confirmation if I really want to delete (not made by me). I can't for the life of me seem to understand how to do with fancybox...

This is the delete button at the end of each row (also a lot of fancy css making this look good..):

<a class="fadein dialog" href="#delete" title="Delete"></a>';

I have this javascript (among others, this should be the relevant part):

$(".dialog").fancybox({
            width           : 400,
            height          : 160,
            fitToView       : false,
            autoSize        : false,
            modal           : true,
            closeClick      : false
            });

And this html again:

<div id="delete" style="display:none; width:400px; overflow:hidden;">
<div class="alertwrap">
<h2><img src="images/shiftdelete.png" width="32" height="32" class="icon" alt="Delete" />Confirm deletion</h2>
<div class="content">
<span>Are you sure you want to delete?</span>
<a href="javascript:$.fancybox.close();" class="confirm">YES</a>
<a href="javascript:$.fancybox.close();" class="decline">No</a>
</div>

It's easy to put the id of the row as the id of the that opens the fancybox. But I can't find a way to retrieve it in the fancybox so that I can use it for something...

The actions of the buttons are obviously bogus, I have just left them there while trying to understand what to do here. The no button is ok, but the yes-button should be able to call another php-file with post-data with at least the an id that it gets from the original ...

My other issue is similar, I guess it might be solved the same way... I have also an edit button on each row, which opens a form the same way as this confirmation dialog. I need to populate that form with data from that row. Which I really can't seem to understand how to...

Any advice? Pretty please with sugar on top :)

Upvotes: 2

Views: 2036

Answers (1)

komelgman
komelgman

Reputation: 6989

See example here

example code:

$('a.btn-delete-row').click(function(){

    $('#delete').data('context', $(this));

    $.fancybox({
        width           : 400,
        height          : 160,
        fitToView       : false,
        autoSize        : false,
        modal           : true,
        closeClick      : false,
        href            : '#delete'     
    });    
});

$('a.confirm').click(function(){
    var $context = $('#delete').data('context')

    alert($context.attr('data-rowID'));    

    $.fancybox.close();   
    return false;
});

$('a.decline').click(function(){
    $.fancybox.close();    
    return false;
});

exsample html:

<a class="fadein btn-delete-row" href="javascript:void(0);" title="Delete" data-rowID="1">delete in row 1</a><br/>
<a class="fadein btn-delete-row" href="javascript:void(0);" title="Delete" data-rowID="2">delete in row 2</a>



<div style="display:none;">
    <div id="delete" style="width:400px; overflow:hidden;">
        <div class="alertwrap">
            <h2><img src="images/shiftdelete.png" width="32" height="32" class="icon" alt="Delete"/>Confirm deletion</h2>

            <div class="content">
                <span>Are you sure you want to delete?</span>
                <a href="javascript:void(0);" class="confirm">YES</a>
                <a href="javascript:void(0);" class="decline">No</a>
            </div>
        </div>
    </div>    
</div>

Upvotes: 3

Related Questions