Where to find "opener" object ant its attributes?

[sashabeep]

<a class="myopener" data-mydata="mydata">open lightcase modal</a>
<a class="myopener" data-mydata="myotherdata">open other lightcase modal</a>

.....

$('.myopener').lightcase({
      //.....how to get a.myopener here?

        onInit : {
            foo: function() {
                console.log($(this).data("mydata")); //fails, of course
            }
        },

});

I can't store, for example, data-attributes to array using onclick event, because lightcase unbind this

$('.myopener').on("click",function(){
        var arr={
            mydata:$(this).data("mydata")
                        .....
        }       
});

[cbopp-art]

@sashabeep
Thanks, this is an issue actually! Could you change to this instead of for just now? Then it should work (yet untested).
$(this).unbind('click.lightcase').bind('click.lightcase', function (event) {

I will going to do implement this change asap.

[sashabeep]

$('.buildform').unbind('click.lightcase').bind('click', function (event) {
        event.preventDefault();
        var arr={
            index:$(this).data("index")
        }

    });
....

$('.buildform').lightcase({
        onInit : {
            foo: function() {
                console.log(arr['index']);
            }
        },

no glue

ReferenceError: arr is not defined

[cbopp-art]

Sorry Sascha, wrote it in the wrong way. Following binding would be correct:
$('.buildform').unbind('click.lightcase').bind(‘click.lightcase', function (event) {

On 01 Oct 2015, at 22:52, Sasha Beep notifications@github.com wrote:

$('.buildform').unbind('click.lightcase').bind('click', function (event) {

[cbopp-art]

But anyway, you wouldn't be able to access the variable arr because you're going to define it in a local scope.
But why are you not going to use $(this).data("index")directly within the onInit function call?

[sashabeep]

Yep, still no effect
i'm displaying various forms using my own form builder script, it accept post-parameters like id of template, headline, text above the form, text on the submit button and other, and return html code of form

$('.buildform').lightcase({
showSequenceInfo : false,
        type: 'ajax',
        ajax : {
            width : 'auto',
            height : 'auto',
            type : 'post',
            dataType : 'html',

                        //in this case only first link data-attributes will be translated to builder and i get one form in all cases

            data:{index:$('.buildform').data("index"), idform:$('.buildform').data("idform"), token:$('.buildform').data("token"), formzag:$('.buildform').data("formzag"), formbut:$('.buildform').data("formbut"), addtext:$('.buildform').data("addtext")}
        },

and then i init this form...

onFinish : {
            initializeForm : function () {

of course, if i change it to GET it will be ok but i need to urlencode non-latin characters

Colorbox implementation was

$(".buildform").on("click",function(event){
        event.preventDefault();

        var index = $(this).data("index");
        var idform = $(this).data("idform");
        var token = $(this).data("token");
        var formzag = $(this).data("formzag");
        var formbut = $(this).data("formbut");
        var addtext = $(this).data("addtext");

        $.colorbox({
            open: true,
            scrolling: false,
            innerWidth:'500',
            href:"form.php",
            data:{index:index,idform:idform,token:token,formzag:formzag,formbut:formbut,addtext:addtext},
            onClosed:function(){
                //Do something on close.
            },

[cbopp-art]

You can use:
lightcase.objectData.$link to access your origin link object.

But probably would get to lightcase.objectData.origin soon with a newer major version.

[sashabeep]

TypeError: lightcase.objectData is undefined

[cbopp-art]

Hmm, of course!
Need to implement something additional for this.
Could you try with the adjusted version used in lightcase demo and logging to console:

console.log(lightcase.objectData);

[sashabeep]

still undefined with http://cornel.bopp-art.com/lightcase/lightcase/lightcase.js

[cbopp-art]

hmm, but then if you use just this now you will get the right object, true?

[sashabeep]

I'm not sure i understand... Nothing changed, when i tried this in init. so i comment this
Could you please look at my js http://cake52.ru/js/main.js around line 70, what i should add.
Really tired today and i need to go bed before i fall to sleep on laptop

[cbopp-art]

this should be accessible now within your called hook functions with this change and will return the origin link object on which you have initialized lightcase: 62d465f

[sashabeep]

No. still TypeError: lightcase.objectData is undefined

ajax : {....
data:{index:$(this).data("index"), idform:$(this).data("idform"), token:$(this).data("token"),...

[sashabeep]

onInit : {
            foo: function() {
                console.dir($(this));
            }
        },

Uncaught TypeError: Cannot read property 'origin' of undefined

[cbopp-art]

Reason was that onInit hook was called before origin was set. You can use lightcase.origin now instead of lightcase.objectData.origin.

[sashabeep]

TypeError: lightcase.origin is undefined

[sashabeep]

showSequenceInfo : false,
        type: 'ajax',
        ajax : {...
data:{index:lightcase.origin.data("index").......

TypeError: lightcase.origin is undefined

[cbopp-art]

I have set lightcase.origin at the very begin now.

[sashabeep]

Nothing changed, still undefined
For now i just copy the function for other class, because i have just two of this buttons showing different forms, but as you understand, this is not a clean solution and access to origin is needed to be built-in, leave it for next version to find out how to do it works as it should be

[sashabeep]

You can see how it works on http://cake52.ru/ - last two links in the footer at the end of page with envelope and question sign icons

[cbopp-art]

Hmm, you are out of the plugin context where you want to access this data. This is basically not possible. With this previous changes, you should be able now to access object data from within a hook.

onInit: {
    setAjaxRequestData: function () {
        lightcase.settings.ajax.data = {index: $(this).data('index')};
    }
},
...

[cbopp-art]

Or alternatively, you are going to do it the same way as while using colorbox and creating your own click event handler around and calling 'start' instead of 'init'. This would work because you are in your form elements context then.
For example:

$('.buildform').on('click', function (event) {
    event.preventDefault();
    var options = {
        // Put all your settings here
        ajax: {
            ...,
            data: {index: $(this).data('index'),...}
        }
    };
    $(this).lightcase('start', options);
});

[sashabeep]

I think populating of those variables with onInit will be more readable, now it works as expected (imho). You should describe this case in help section. Performing POST request to modal window using link or button is not so frequently case, but, who knows, maybe someone will do similar trick. Thank you very much for help

[cbopp-art]

I will optimize this change a bit and will document
as soon as it is available within a next release.
Thank you, too!

[sashabeep]

How to implement all of this in the current release?

[cbopp-art]

Thanks for sharing the link. Much better to analize now.
Opening blank lightcase is possible, yes. But have you also tried on form Submit instead of on Click?

[cbopp-art]

Opening a blank window:

<a href="#" data-rel="lightcase">Blank popup</a>

or without a DOM element

lightcase.start({'href':'#', 'more': 'options', 'come': 'here'});

After fill in with content, you would need to reset lightcase dimensions like this:

lightcase.resize();

[cbopp-art]

Should do the trick now even when using $(this):

$('.buildform').lightcase({
        onStart: {
            setAjaxRequestData: function () {
                lightcase.settings.ajax.data = {
                    index: $(this).data('index'),
                    idform: $(this).data('idform'),
                    token: $(this).data('token'),
                    formzag: $(this).data('formzag'),
                    formbut: $(this).data('formbut'),
                    addtext: $(this).data('addtext')
                };
            }
        }
});

[sashabeep]

Maybe, i miss something. lightcase.settings.ajax.data filled but no parameters sent.

$('.buildform').lightcase({
                onStart: {
                    setAjaxRequestData: function () {
                        lightcase.settings.ajax.data = {
                            index: $(this).data('index'),
                            idform: $(this).data('idform'),
                            token: $(this).data('token'),
                            formzag: $(this).data('formzag'),
                            formbut: $(this).data('formbut'),
                            addtext: $(this).data('addtext')};
                            console.dir(lightcase.settings.ajax.data);
                        }
                    },

                showSequenceInfo : false,
                type: 'ajax',
                ajax : {
                width : 'auto',
                height : 'auto',
                type : 'post',
                dataType : 'html'}
        });

check on link in section 1 http://ok.rfw.su/start/

[cbopp-art]

You can't do this you are in an object declaration:

console.dir(lightcase.settings.ajax.data);

do this call outside, but still within the setAjaxRequestData() function.

[sashabeep]

Never feel myself so stupid, i can't understand
How to do simple ajax and fill lightcase window with result?
something like

myfunction(){

    lightcase...?.open();

    $.ajax({
        type: "POST",
        url: '/order.html',
        data: ({mydata:...}),
        dataType: "html",
        success: function(data) {

            fill_Ligthcase_With(data);

        }
    });

    lightcase.resize();
}

[cbopp-art]

lightcase.get('contentInner').html(myContent);
lightcase.resize();

[sashabeep]

Tried with

$('.buildform').on('click', function (event) {
        event.preventDefault();
        var index = $(this).data("index");
        var idform = $(this).data("idform");
        var token = $(this).data("token");
        var formzag = $(this).data("formzag");
        var formbut = $(this).data("formbut");
        var addtext = $(this).data("addtext");

        lightcase.start({'href':'#'});

        $.ajax({
            type: "POST",
            url: '/form.php',
            data: ({index:index,idform:idform,token:token,formzag:formzag,formbut:formbut,addtext:addtext}),
            dataType: "html",
            success: function(data) {

                lightcase.get('contentInner').html(data);
                //lightcase.resize();

            }
        });

    });

Magic!
post-parameters was sent successfully but lightcase window is blank. Only paddings and white bg
And i commented resize because console throws error
TypeError: $object is undefined lightcase.js:590:5

[sashabeep]

Seen response in console - it's corect html structure with all needed elements to display in lightcase window

[sashabeep]

You can try to click this link

on the http://ok.rfw.su/start/
don't click on the link in the first section of content - now it's just form and submit button mimic to link style

[cbopp-art]

and does this work?

$(‘#lightcase-contentInner’).html(…);

On 18 Nov 2015, at 10:41, Sasha Beep notifications@github.com wrote:

You can try to click this link
https://camo.githubusercontent.com/18806fc3c6b523aa43e822fd82f79c7dc8ce0ca7/687474703a2f2f692e696d6775722e636f6d2f63506c4e534e462e706e67 on the
http://ok.rfw.su/start/ http://ok.rfw.su/start/
don't click on the link in the first section of content - now it's just form and submit button mimic to link style

—
Reply to this email directly or view it on GitHub #32 (comment).

[sashabeep]

Strange that i can remove this layer, but can't update
$('.lightcase-contentInner').remove(); - works
$('.lightcase-contentInner').html("something"); - not

[sashabeep]

same with
$('.lightcase-inlineWrap').html("something");

[cbopp-art]

are you in the right hook?
because onStart() is bit too early then. probably you rather would need onFinish() for this.

On 18 Nov 2015, at 11:01, Sasha Beep notifications@github.com wrote:

same with
$('.lightcase-inlineWrap').html("something");

—
Reply to this email directly or view it on GitHub #32 (comment).

[sashabeep]

$('.buildform').on('click', function (event) {
        event.preventDefault();
        var index = $(this).data("index");
        var idform = $(this).data("idform");
        var token = $(this).data("token");
        var formzag = $(this).data("formzag");
        var formbut = $(this).data("formbut");
        var addtext = $(this).data("addtext");

        lightcase.start({

            href:'#',
            width:550,

            onFinish : {
                baz: function() {
                    $.ajax({
                        type: "POST",
                        url: '/form.php',
                        data: ({index:index,idform:idform,token:token,formzag:formzag,formbut:formbut,addtext:addtext}),
                        dataType: "html",
                        success: function(data) {

                            $('.lightcase-contentInner').html(data);
                            //lightcase.resize();

                        }
                    });
                }
            }              

        });

    });

resize cause lightcase to be blank
width not set
inner paddings is somewhere - strange
but form displaying correctly
and also some errors "blank string cannot be argument of method getElementById()"

check it on the same page

[cbopp-art]

try: lightcase.get('contentInner').children().append($(data));

[sashabeep]

Looks like padding is back but content is cropped, resize not working - all the block is white

[sashabeep]

.lightcase-contentInner opacity 0 after lightcase.resize();

[sashabeep]

lightcase.resize();
$('.lightcase-contentInner').css({"opacity":"1"});

and many many many many errors "blank string cannot be argument of method getElementById()" when opening. Only for this window

[cbopp-art]

Sorry, but i have no problems getting it working.

lightcase.start({
    'href': '#',
    onFinish: {
        fillLightcaseWithContent: function () {
             lightcase.get('contentInner').children().html('<div>abc</div>');
             lightcase.resize();
        }
    }
});

[sashabeep]

Tried to writie response to hidden layer and then display - errors gone

$('.buildform').on('click', function (event) {
        event.preventDefault();
        var index = $(this).data("index");
        var idform = $(this).data("idform");
        var token = $(this).data("token");
        var formzag = $(this).data("formzag");
        var formbut = $(this).data("formbut");
        var addtext = $(this).data("addtext");

        $.ajax({
            type: "POST",
            url: '/form.php',
            data: ({index:index,idform:idform,token:token,formzag:formzag,formbut:formbut,addtext:addtext}),
            dataType: "html",
            success: function(data) {
                    var response = data;
                    $('body').append('<div id="response" style="display:none">');
                    $("#response").html(data);

            }
        });

        lightcase.start({

            href:'#response',
            width:550,
            height:'auto',

            onFinish : {
                baz: function() {
                    lightcase.resize();
                }
            }              

        });

    });

only width is not set but it doesn't matter

[cbopp-art]

well, it also should work without a such layer. what browser?

width and height are no settings.
use maxWidth or maxHeight.

On 18.11.2015, at 12:21, Sasha Beep notifications@github.com wrote:

Tried to writie response to hidden layer and then display - errors gone

$('.buildform').on('click', function (event) {
event.preventDefault();
var index = $(this).data("index");
var idform = $(this).data("idform");
var token = $(this).data("token");
var formzag = $(this).data("formzag");
var formbut = $(this).data("formbut");
var addtext = $(this).data("addtext");

    $.ajax({
        type: "POST",
        url: '/form.php',
        data: ({index:index,idform:idform,token:token,formzag:formzag,formbut:formbut,addtext:addtext}),
        dataType: "html",
        success: function(data) {
                var response = data;
                $('body').append('<div id="response" style="display:none">');
                $("#response").html(data);

        }
    });

    lightcase.start({

        href:'#response',
        width:550,
        height:'auto',

        onFinish : {
            baz: function() {
                lightcase.resize();
            }
        }              

    });

});

only width is not set but it doesn't matter

—
Reply to this email directly or view it on GitHub.

[sashabeep]

firefox
maxHeight is ok, thanks
resize is not needed at all but i will keep onFinish for some other things like masked input init

[cbopp-art]

Can I close this issue? I also have tested to open a blank popup and works with two different approaches: on the fly, or with a DOM helper object.
It is documented as well at section hooks

[sashabeep]

OK, sure, but, i think, without examples this section of help is useless

[cbopp-art]

Ok, true! I added an example.