What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Using a lightbox on my page prevents other scripts on the page to operate

    Asked by lastfrontierheli on May 11, 2013 at 11:23 AM

    When I use a lightbox for my form it causes other scripts not to work on my page. I have an accordian than uses Java to operate and I think the lightbox is causing a conflict in the libraries, specifically prototype.js.

    I've commented out the form for the time being on that page in question, here is a link to the page to see the accordian: http://www.lastfrontierheli.com/weather.php

    Is there a work around to avoid the library conflict?

    Thanks!

    scripts lightbox conflict
  • Profile Image
    JotForm Support

    Answered by Welvin on May 11, 2013 at 01:46 PM

    Hi,

    Please try to use jQuery no conflict codes. http://api.jquery.com/jQuery.noConflict/.

    Also try to remove the 2 from

    http://cdn.jotfor.ms/static/feedbacks.js?3.1.318 so it becomes:

    http://cdn.jotfor.ms/static/feedback.js?3.1.318

    See if either of this two will work.

    Thanks

  • Profile Image

    Answered by lastfrontierheli on May 11, 2013 at 02:45 PM

    Hi Welvin,

    Thanks for your reply, you continue to be very helpful!

    I've read through the jquery no conflict but I'm still a little unclear how to implement it to my page? I understand the concept of making a different alias for "$" I'm just unsure how/where to add the coad to my page?

    If you could steer me in the right direction it would be greatly appreciated!

    Thank-you

  • Profile Image
    JotForm Support

    Answered by jonathan on May 11, 2013 at 04:22 PM

    Hi,

    I could see that you have temporarily commented out the lightbox form script in your web page, so, we could not really see how it is at the moment. Will you be able to re-enable it again? Or try to create a duplicate test page where we make a test.

    From what I know, removing 2 in  http://cdn.jotfor.ms/static/feedback.js?3.1.318 should do the trick already.

    I made a test page here https://shots.jotform.com/jonathan/webtest/lastfrontierheli_lightbox_jquery_script_conflict.php

    I used your web page source and I re-enabled the form (it is the red Sign Up Now button). It seems to work. But I can never simulate it fully like on your end.

    Hope this help.

    Thanks.

  • Profile Image

    Answered by lastfrontierheli on May 12, 2013 at 11:33 AM

    Hi,

    Thanks for your reply and all your work!

    In your test there is still the script conflict, if you scroll down you will see bars that have text like "2013 week 16: (apr 13 - apr 19) when you click those bars they are supposed to open like an accordian revealing the weather info from that week. When the lightbox script is not on the page this works fine.

    I'm sorry but I cannot enable the form on this page for tested (it is a high traffic page and I need the weather working properly)

    Using the jquery no conflict script looks like a viable solution I am just unclear where/how to implement it on my page?

    Thanks again! This is easily the most helpful forum I've used.

  • Profile Image

    Answered by jeanettebmz on May 12, 2013 at 05:07 PM
    You must insert the noconflict function right before your lightbox form

    <script type="text/javascript">
    $.noConflict();
    </script>

    <script type="text/javascript"> JOTFORM LIGHTBOX CODE
    </script>
  • Profile Image

    Answered by lastfrontierheli on May 13, 2013 at 11:08 AM

    Thanks for the replay Jeanette,

    Where/what do I declare the noConflict script? I"m assuming in the head of the document but that is the part I'm unsure of the syntax?

    Thanks!

  • Profile Image

    Answered by sidharth_kch on May 13, 2013 at 12:41 PM

    @lastfrontierheli

    You should add the noConflict code just below your jquery reference or before your lightbox code.

    Let us know if you continue to have this issue.

    Thanks,

    Sidharth

  • Profile Image

    Answered by lastfrontierheli on May 13, 2013 at 01:15 PM

    Hi,

    So all I need to do is put:

    <script type="text/javascript">
    $.noConflict();
    </script>

    Before my lightbox? I don't understand how that is supposed to work, how would the browser know what the noConflict function is without declaring it first? (I tried simply adding that code and it didn't work)

    Thank-you

  • Profile Image

    Answered by sidharth_kch on May 13, 2013 at 03:32 PM

    @lastfrontierheli

    Is it possible for you to create a new page (replication of your current page where yu want to add lightbox) on your website and then add Lightbox code? We will then have a check and try to resolve your issue.

    Thanks,

    Sihdarth

  • Profile Image

    Answered by lastfrontierheli on May 13, 2013 at 11:21 PM

    HI,

    I have made a duplicate of the page with the Lightbox in place. The page can be ofund at:

    www.lastfrontierheli.com/weather_temp.php

    Any help woulod be greatly appreciated!

    Thanks

  • Profile Image
    JotForm Support

    Answered by EltonCris on May 14, 2013 at 05:17 AM

    @lastfrontierheli

    We will check possible solution and get back to you today.

    Please stay tuned! Thank you!

  • Profile Image
    JotForm Support

    Answered by EltonCris on May 15, 2013 at 05:49 PM

    @lastfrontierheli

    We are truly sorry for the delay. I am a bit having trouble figuring out a solution and I think this one will work. Here's what I did,

    1. On your lightbox embed code, transfer the <script> part above your jQuery reference. Use the following code.

    <script src="//cdn.jotfor.ms/static/feedback2.js?3.1.318" type="text/javascript">new JotformFeedback({formId:'31194822551957',base:'http://jotformpro.com/',windowTitle:'Monthly Specials',background:'#A1A1A1',fontColor:'#FFFFFF',type:1,height:600,width:500});</script>

    Notice the bolded "2" after feedback, you need that since prototype codes wont work on your page.

    2. You don't need noConlfict codes anymore, please removed them.

    3. Checkout this demo: https://shots.jotform.com/elton/jquery_conflict_216112.html

    Hope this helps. Thank you!

  • Profile Image

    Answered by lastfrontierheli on May 15, 2013 at 06:25 PM

    Genuis! Works prefect, thank-you!

    I can honestly say Jotform offers the best support/forum I've experienced in almost a decade develping for web.

  • Profile Image
    JotForm Support

    Answered by EltonCris on May 15, 2013 at 09:35 PM

    @lastfrontierheli

    Glad to hear it works for you and thanks for your positive remarks!

    If you come across any issues again, feel free to contact us here.

    Cheers!