Open fancybox after submission or update

[DesiLogi]

Hi,

I have a Details (or single record update, haven't decided yet) form that, when updated, I need to open a fancybox that brings up another web page. The Details/Single-Rec-Update form would ideally be set to 'Same Form' for destination but I think I need to use Message in order to put code in. 

The below code is taken from what I'd been using with a button to open the fancybox but with the data-href put in (whereas the button would put that in before). Does anyone know what mods need to be done to this code for it to work (open a fancy box with a new web page after submission/update)? 

<script>

 var width = 450;
var v_data-href="../shortcuts/universal-item-search";
var v_href= $(el).attr('href');
if (v_href=="#")
{
v_href=$(el).attr('v_data-href');
}
if($(el).attr('data-width')){
width = $(el).attr('data-width');
}
$(el).fancybox({
closeBtn:false,
openEffect : 'none',
closeEffect : 'none',
modal:true,
type:'iframe',
autoSize:true,
width:width,
//href:$(el).attr('href')
href:v_href
});


</script>

 

[DesiLogi]

Actually, I have a button that runs a version of the above code to open the fancybox. All I need to do now is make the form submit/update after the the fancybox is initiated (or before but I think that'll end the code running so the fancybox won't initiate). Does anyone know how/where to put code into this to submit the form? 

<script>

$('.cbpop').each(function(index, el){
var width = 450;
var v_href= $(el).attr('href');
var v_keyword= document.getElementsByName("EditRecordKeyword")[0].value;
var v_key= "?key=";
var v_urlend = v_key + v_keyword;

if (v_href=="#")
{
v_href=$(el).attr('data-href');
}
if($(el).attr('data-width')){
width = $(el).attr('data-width');
}

$(el).fancybox({
closeBtn:false,
openEffect : 'none',
closeEffect : 'none',
modal:true,
type:'iframe',
autoSize:true,
width:width,
//href:$(el).attr('href')
href:v_href + v_urlend

});

});

</script>

 

[DesiLogi]

I figured this out, if anyone else needs it. Basically, I have a button that uses the class to call the fancybox code but also an onclick that calls the submit code separately. This way both of the functions work in sequence. 

Here's the button:

<button class="cbpop btaction" href="#" data-width="1100" data-href="../shortcuts/universal-item-search" onclick="myFunction()"><i class="fa fa-search fa-lg"></i></button>

And here's the script in the datapage footer. I have the Destination set to 'Same Form.' Note that the code opens the fancybox in the parent as this datapage is embedded in an iframe. 

<script>

$('.cbpop').each(function(index, el){
var width = 450;
var v_href= $(el).attr('href');

if (v_href=="#")
{
v_href=$(el).attr('data-href');
}
if($(el).attr('data-width')){
width = $(el).attr('data-width');
}

parent.$(el).fancybox({
closeBtn:false,
openEffect : 'none',
closeEffect : 'none',
modal:true,
type:'iframe',
autoSize:true,
width:width,
//href:$(el).attr('href')
href:v_href

});

});

</script>


<script>

function myFunction(){

setTimeout('document.forms["caspioform"].submit()',1000);

}

</script>

 

[SinJunYoung]

Woah this helped and I might use it! Thank you, @DesiLogi