Where to find "opener" object ant its attributes? about lightcase

[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 [email protected] 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]

Should still be the same.
lightcase.origin points to the initially invoked link, but you'll ever need a hook function for this.
For accessing lightcase DOM objects you can use the new getter method like this:

lightcase.get('case');

It has changed because lightcase is in a private scope now basically.

[sashabeep]

Sorry, i cant understand

$('.buildform').lightcase({

        onInit: {
            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')};
            }
        },

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

TypeError: lightcase.settings is undefined

[sashabeep]

$('.buildform').lightcase({
        showSequenceInfo : false,
        type: 'ajax',
        ajax : {
            width : 'auto',
            height : 'auto',
            type : 'post',
            dataType : 'html',
            data:{index: $(lightcase.origin).data('index'), idform: $(lightcase.origin).data('idform'), token: $(lightcase.origin).data('token'), formzag: $(lightcase.origin).data('formzag'), formbut: $(lightcase.origin).data('formbut'), addtext: $(lightcase.origin).data('addtext')}
        }
    });

no post parameters in request...

[cbopp-art]

Hi Sasha

Well, actually this is not possible to access it this way because where you set the arguments (settings), $(this) doesn't point to your form nor is lightcase already initialized, neither. What you can do is to use a variable before and use this for passing to lightcase.

var form = $('.buildform');
then use:
form.data('formzag')

or simply:
$('.buildform').data('formzag')

What also is possible is to use a lightcase hook and set formData after lightcase was initialized.
Then, lightcase.origin would be set.

On 17.11.2015, at 16:00, Sasha Beep [email protected] wrote:

$('.buildform').lightcase({
showSequenceInfo : false,
type: 'ajax',
ajax : {
width : 'auto',
height : 'auto',
type : 'post',
dataType : 'html',
data:{index: $(lightcase.origin).data('index'), idform: $(lightcase.origin).data('idform'), token: $(lightcase.origin).data('token'), formzag: $(lightcase.origin).data('formzag'), formbut: $(lightcase.origin).data('formbut'), addtext: $(lightcase.origin).data('addtext')}
}
});
no post parameters in request...

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

[sashabeep]

i have dozens of this buttons on the page with many random data-attributes and same class, again i can't find out how to control all of this. old code provided bu you doesn't work with new release, so i dunno what to say

why, why it's so difficult to get origin object inside all of instances, functions and other...

[cbopp-art]

Use onStart(), it is bit later called than onInit() where lightcase.origin is not yet set at this time.

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

[sashabeep]

Just spinner, no requests
How to "manually" open lightcase and write something to it?

[cbopp-art]

ah sorry, there is missed the href. Or declare data-lc-href in your form.

Also possible:
lightcase.settings.href: $(lightcase.origin').attr('action')

[sashabeep]

but href exists on the element

[cbopp-art]

what is the value there? what shows console log?

[sashabeep]

oops, forgot to look
lightcase.settings is not defined

[cbopp-art]

Let me think about. Use this approach and call lightcase "on the fly" until I get back in touch with you. ok?
Keep issue open please.

$('.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]

with

$('.buildform').on('click', function (event) {
        event.preventDefault();
        var options = {
            // Put all your settings here
                ajax: {
                    width : 'auto',
                    height : 'auto',
                    type : 'post',
                    dataType : 'html',
                    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'),}
                }
            };
            $(this).lightcase('start', options);
    });

still not sending post parameters

[cbopp-art]

you have an error in your syntax.
after last item (addtext) there should not be a comma.

[sashabeep]

That's doesn't matter, still not sending parameters

http://ok.rfw.su/start/
Orange button in header is form with just one submit button (works like needed, but i use form only because i can't sent data parameters)

And link in section number 1 - not work
code http://ok.rfw.su/js/main.js line 71

What about open blank lightcase window and write some html to? I think it will be simpler in my case, and i don't need lightcase hooks/api

[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 [email protected] 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 [email protected] 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 [email protected] 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.