LIghtBox2 data-title description link with JavaScript

Question

the latest version of LightBox2 (v2.8.2) now allows a link to appear in the text under an image. This works fine usually. But my link needs to call some javascript code.

The code below for example works fine when you click on Click Here.

<a class="example-image-link" 
   href="http://lokeshdhakar.com/projects/lightbox2/images/image-3.jpg" 
   data-title="<a href='http://localhost/'>Click Here</a> ">

   <img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-3.jpg" alt=""/>
</a>

For my code, I need the href within data-title to call some javascript code. These are the ones I've tried.

    data-title="  <a href='javascript:submitFormFunction();'  >caption </a> ">  
    data-title="  <a href='#' onclick='submitFormFunction();' >caption </a> ">  
    data-title="  <a href='#' class='submitCreateFromPreview' >caption </a> ">

None of these work, the javascript code never gets called. It appears that if the href is not a normally structured URL (http://www.google.com or http://localhost) it simply does nothing.

This is my javascript code

    $(".submitCreateFromPreview").click(function(){
        submitFormFunction();
    });         


    function submitFormFunction() {
        form=document.getElementById('mainform_id');                
        form.target='_self';
        form.action='http://localhost/create.do';
        form.submit();
    }

I basically need all the fields in my form to be submitted when they click on the href. This code works in other places in my webapp but it does not want to work with the LightBox description href.

Any ideas what I'm doing wrong? Or anyone else have other options that perhaps I haven't tried?

Any help would be appreciated.

Thanks

Nitin Sinha Nitin Sinha · Accepted Answer · 2016-01-04T15:22:02

We can use jQuery '.on()' event handlers for adding events. These have the advantage that they can process events from descendant elements that are added to the document at a later time.

In above case we can have the code like below:

$(document).ready(function(){   
   $(".lightbox").on("click",'.submitCreateFromPreview', function (e) {
      submitFormFunction();
   });
  });

Even if the function is accessed directly, it executes. So, either of the two options can be implemented to execute "submitFormFunction()" function.

<!DOCTYPE html>
<html lang="en-us">
<head>
  <meta charset="utf-8">
  <title>Lightbox Example</title>
  <link rel="stylesheet" href="../dist/css/lightbox.min.css">
</head>
<body>

  <section>
    <h3>Two Individual Images</h3>
    <div>
      <a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-1.jpg" data-lightbox="example-1" data-title="Optional <a href='#' class='submitCreateFromPreview'>caption</a>."><img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-1.jpg" alt="image-1" /></a>
      <a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-2.jpg" data-lightbox="example-2" data-title="Optional <a href='javascript:submitFormFunction()'>caption</a>."><img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-2.jpg" alt="image-1"/></a>
    </div>

  </section>

  <script src="../dist/js/lightbox-plus-jquery.min.js"></script>
  <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

  <script type="text/javascript">

  function submitFormFunction(){
    alert("Submit Form Function executed :: ")
    console.log("Submit Form Function executed :: ");
  }

  $(document).ready(function(){   
   $(".lightbox").on("click",'.submitCreateFromPreview', function (e) {
      submitFormFunction();
   });
  });

  </script>

</body>
</html>

Functional repository using LightBox2 (v2.8.2) can be accessed here

https://github.com/nitinsinha/Debugs.git

LIghtBox2 data-title description link with JavaScript

1 Answers