How To Pass Variable Value To Lightbox Parameter From Class Element

I need to setup the lightbox variation in a gallery based page (that loads dynamic content) where each link below an item for purchase must fill in one field in the form with an item code. The field entry needs to be part of the links that target the form. And one more thing....

Using the standard lightbox embed with exposed code to set a variable also broke dropdown menu functions throughout the whole site. Something in that code is not adequately sandboxed.

For the curious, the link to the gallery is listed below. Ignore all the PayPal buttons and stuff. They don't work because of a 5 year bug PayPal still hasn't fixed... and probably never will.  This is why I need a JotForm solution and as soon as possible before I lose more business.

All notions are welcome.

Thanks, JC

Hi,

I'm not sure if I understood the first part of your concern regarding dynamic links. Could you provide us more details? Also, I noticed you are setting up the purchase of your products using plain plain fields? If I may suggest, you could setup a purchase order form for Paypal Payments under our Payment Tools section.

I'm not sure what the Paypal bug in your end is, but you could try this method and see if this works for you. You can check this guide that we have: Setting Up Your First Order Form 

Regarding the Lighbox, have you placed the <script> tag in your website anywhere? I'm not sure I was able to find it? Or is it because you have a lot of scripts that I missed the part where it is?

You can get the lightbox embed code by navigating to "Embed Form"->"Lightbox"

Copy then the embed code here.

I would suggest that you placed the script tag at the button of the page or at the beginning. In my case I usually add it at the end when something is in conflict.

I also noticed that there's some conflict with your javascripts related to bootstrap in my Chrome browser console. You might also need to explore on that to see what's causing the conflict.

I hope this helps. Let us know if you need more assistance on this.

Thank you.

Hi Charlie,

Thank you for the feedback. Indeed there are script conflicts I have not been able to work out because of the complexities of the particular template in use. That template may have to change but I do not have time for that level of work at present.

NOTE: My site is not the only one that has problems in Chrome. In visiting here in Chromium (with all defenses turned off, which I do not like) I have often had a post never get posted and vanish into the ether. I am trying again in Chromium, but now must always copy the post before hand just in case (and then switch to Firefox, which I should not have to do).

I have already used most of the steps you suggested. The tutorial you recommend is not suitable for my situation or many others that have products continuously being added and or rotated.  Such is the case with a gallery of premade covers for selfpublishers. And there are items / services sold on other pages as well. 

I used the basic PayPal when setting up my form instead of "express"; changing that will likely not solve the problem, since it is not about successfully processing an order at PP but doing so on site through a JotForm before submitting. I need it to occur dynamicly through a link and not have to re-edit the form repeatedly over here.

JotForms are able to interact with PayPal correctly, so that is a plus and not the problem. I tried it because native PP buttons have started failing (again). This has been reported (in 1000s of posts) on their support forum over 5+ years. It is often called the "bookmark error" for the erroneous error message given when a sale passed to PP fails

"You have requested an outdated version of PayPal. This error often results from the use of bookmarks."

And I will still need a way for a link to pass one field entry to a master JotForm for the covers gallery. If have you have suggestions for that, then please share. 

Best, J.C.

Hi,

Thank you for your feedback. So regarding your main concern, what you would like to do is pre-populate the main Form which is the lightbox "Order Your Premade Cover". In your gallery, you have a lot of covers that you are selling, do you want to have a custom link under the items and when they click it lightbox will show up with a prepopulated field in the "Cover ID", is that correct?

If this is the case, we can do that by adding a iframParameters value inside the script of lightbox. Here's mine:

var JFL_50084531742955 = new JotformFeedback({

formId:'50084531742955',

base:'http://support.jotform.com/',

windowTitle:'Clone of Order Your Premade Cover',

background:'#FFA500',

fontColor:'#FFFFFF',

type:false,

height:500,

width:700,

openOnLoad:false,

iframeParameters: {

'coverId':coverId,

}

});

I've be assigned a value on a variable named coverId, but not sure how to pass the value. I was thinking this kind of approach:

<a class="lightbox-50084531742955" style="cursor:pointer;color:blue;text-decoration:underline;" onDISABLEDclick="getValue('123');" >Order Cover with ID 123</a><br>

<a class="lightbox-50084531742955" style="cursor:pointer;color:blue;text-decoration:underline;" onDISABLEDclick="getValue(456)" >Order Cover with ID 456</a><br>

I'll have multiple anchor tags on each cover item that users what to purchase, when they click the item or the link to it, it will open the lightbox which will prepopulate the Cover ID field. But I can't seem to get the value properly. I'm having a "undefined" value on the field. You can check my demo here: https://shots.jotform.com/charlie/Lightbox_Order.php

I'm not sure if I understood your concern full now. But please do enlighten me if I got it incorrectly.

Thank you.

Hey Charlie,

Yes, the link to click is what I was after. And I have had no more success than you have. One form embedded and link below each cover to open the form and pre-fill the "Cover ID" field for the order. I have had the same problems you have encountered and not come up with a solution.

The other problem still exists in that embedding the lightbox code in the gallery page still cripples site level menus when someone is browsing the gallery. But I will leave that until later after I see if this link trick can be made to work.

JC

Hi JC,

It seems though, I'm also getting a hard time on how to pass the values dynamically, not sure if there's a conflict or I'm doing it in a wrong order as I'm getting an "underfined" value. Although, we can set a value specific but that would mean we'll have repeated variables, and not really a good thing to do.

Please give me some time to try other solutions and I'll update you immediately if I have a working one. Regarding the other issue related to the menus, I believe it's still a conflict with the javascripts.

Kind regards.

Thanks for the assistance, Charlie.  This solution is important to me, as all direct PayPal purchase links are still returning that false error. JotForm may be my only way around this and is certainly easier to manage... aside from this tricky part.

And by the way, PP's approach to customer service has slipped even further in the new corporate paradigm of simply dumping users on top of each other in a forum to work out their own problems.  

Jot is one of the few places I have seen where forums are still regularly monitored and managed by active staff members. All of you have been / are great in this!

Best, J.C.

In behalf of Charlie and the rest of the Jotform team, you're welcome and thank you for your feedback. We're hoping to have the working solution soon. We'll update you here.

Thanks

Thanks for reporting this, this new issue will be addressed on a separate thread here to assist you better.

Fair enough, David. Hopefully the solution is just a simple setting to change when implementing an order form linked to PayPal... or other purchase system.

Honestly, for as on top things as Jot usually is, I wish you had your own native merchant system. I would certainly try it out to get away from PayPal.

Best, JC

We'll take a look at it and report it to our developers if needed. I'm sure there's a solution to every problem ;)

Unfortunately, we don't have our own payment gateway, you can only choose the available integrations we have. You can try the others aside from Paypal.

Thanks

Welvin,

I looked at a few of the other services with which Jot connects. Unfortunately, our operation does not move enough volume in sales for some. And others are too costly... at least right now.  And still others have requirements we cannot meet at this time.  But thanks for the suggestion, and we will revisit it in the future (as well as looking into more advanced versions of Jot when our needs grow).

You guys are great!

Best, J.C.

Hi,

Apologies for the delay in response. I'm not sure if you have found a solution in your end regarding dynamic links. But, I've managed to have a working script now. Please check this web page that I've setup: https://shots.jotform.com/charlie/Lightbox_Order.php 

You can check the Javascript by right clicking on the page and choosing "View Page Source".

You can also check the code here: http://pastebin.com/9QM07Gxe 

Important things that I did.

1. Add Jquery src link.

2. Use Jquery to get value of specific classes with values on them.

3. Inside the original Lightbox code, I modify it by wrapping a click function on it.

4. I changed the openOnLoad to true.

Let us know if this works for you and if you need more assistance on this.

Thank you.

Hi Charlie,

Well, it was a nice try but did not work out. I even added your JQuery library version site wide to replace the generic version call I have been using. The link still did not execute the form at all. 

I left the one link I tired live in gallery, so if you want to take a peek you can see it. I do not know if that would help, but maybe you have a setup in your browser that can track live code execution.

1. Go to "www.ndauthorservices.com

2. Go to "Covers: Premade"

3. Select "Literary" in the gallery submenu.

4. Look for "NKS7926".

It seems more than likely that some script in the site is conflicting with this execution. I simply do not know enough to track it down.

Best, JC

Hi JC,

Upon checking that page you have, I believe you are using an outdated Jquery library.

You can see here when on that page that there's an error stating that you need jQuery 1.9.1 or higher. 

I then check the source code of that page and looked for the jQuery link. I'm not sure if that's an outdated version. But please do use this script link instead:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> <script>

Add them inside your <head> </head>. 

You'll see that the version is at least the most table jQuery version supported which is 1.11.1.

Please try again and let us know if this works.

Thank you. 

Hi Charlie,

I tried what you suggested, and it did not work. I replaced the library injection you referenced with our previous one, which is rigged to pull the latest "1.xx.xx" version of the library. Yes, there are some arguments against doing that, but it has always worked before.

As a test, I have re-inserted the jquery call you recommended so you can have another look and see for yourself.

NOTE: your jquery library call has an error in it. You forgot to include the "/" in closing tag.

And I do appreciate all of your effort. If after this next look, you feel you have gone as far as you can, that is okay.

ADDENDUM / WARNING: Please note that in switching to your indicated jquery library, the order form no longer pops up (click "Order Your Cover" in the gallery submenu). Purchasing is now crippled entirely (again), but I will try to leave it this way as long as possible for you to see it. I tried switching back briefly to the previous library, but the form is still crippled. Something else has gone wrong.

Best, JC

Hi,

Thanks for pointing that out. I'm still getting the error "Bootstrap requires jQuery 1.9.1 or higher".

I've researched and you can get that error in Bootstrap when order of src links and css stylesheets are incorrect. To solve this, always remember to place all the CSS files before the jQuery scripts.

Which means you need to paste the jQuery src link just after the Bootstrap CSS href links that you have inside the head.

No worries, I'm glad that I can help. I do apologize that this is quite getting long. But do please with us in solving your problems.

Kind regards.

Okay, I took a look in the code. There is only one "bootstrap" css reference that I could find.

"maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"

If I missed some other reference, please point it out, but moving this one did not solve the problem.

ADDENDUM: I also moved all linked CSS files that I could find to a position above the jquery library call... just in case. No effect.

JC

Hi,

It seems that we do have a lot of conflicting codes and functions. Probably a combination of outdated sources and order of references, with undefined functions and variables. For now, you could revert back all the changes you made for the other submenu drop down to work and for your live website to still have proper navigation. Then, what I can suggest is to review your codes holistically and fix other problems.

We did, however, learn that passing variable values to Lightbox is possible. I'll try to review this thread again and see if I can suggest anything, but please do try locally in your end to fix the problem and see if there's anything conflicting.

Kind regards.

Hi Charlie,

Sadly, you are likely very correct in your assessment. We are even now looking at other possible templates for the site, as the one we used had a lot of encrypted js in it that took time to crack open. Even then, well, it was rather messy.

Thank for trying so hard!!!  I may drop back to this topic later once we figure out how to get some of that other code cleaned up or removed.

Best, JC

Hi Charlie,

Sadly, you are likely very correct in your assessment. We are even now looking at other possible templates for the site, as the one we used had a lot of encrypted js in it that took time to crack open. Even then, well, it was rather messy.

Thank for trying so hard!!!  I may drop back to this topic later once we figure out how to get some of that other code cleaned up or removed.

Best, JC

Hi Charlie,

Sadly, you are likely very correct in your assessment. We are even now looking at other possible templates for the site, as the one we used had a lot of encrypted js in it that took time to crack open. Even then, well, it was rather messy.

Thank for trying so hard!!!  I may drop back to this topic later once we figure out how to get some of that other code cleaned up or removed.

Best, JC

On behalf of my colleague, you are welcome, you will be notified via this thread of any suggestion or updates on this topic.

UPDATE:

I setup a test version of my original site on a separate "Blogger" location with the gallery included. Go to...

http://jctestbed.blogspot.com/p/gallery.html

To look at the issues on this new site...

1. Select "Covers : Premade" in the main menu

2. Select "SF" in the gallery submenu

3. When you see one cover, click its ID code link, though nothing happens.

I am still seeing crippling of the main menu "dropdowns" when using a jotform in the gallery, but that is a separate issue for now.  The jotform lightbox still does not pop up - with or without passing a parameter to it.  You can search it out in source view by searching for "lightbox-50084531742955".

I started using FireFox for easier access to an error console, but some errors make no sense to me.

   "SyntaxError: missing } after property list feedback2.js [line 13]"

NOTE: This indicates an error in the script being loaded from JotForm by the lightbox code in the gallery.

   "Error: Bootstrap's JavaScript requires jQuery version 1.9.1 or higher bootstrap.min.js [line 6]"

The version of jquery being loaded is 1.11.1 as directed by Charlie, so this error makes no sense.  There is no indication of a jquery load in the line referenced. Is it possible that somehow another version of jquery is being loaded without my knowledge? I did not see any indication of this.

   "TypeError: $(...).bloggerTabber1 is not a function gallery.html [line 1099]"

This makes partial sense. It references some "tab" widget code I installed for the right-hand sidebar. This error did not occur before I install the jot orderform and everything worked on the site. I removed the tabber custom code and the error has vanished but it had no effect on the gallery problem.

   "Use of getPreventDefault() is deprecated.  Use defaultPrevented instead."

This is another reference to code in that "feedback2.js" delivered from JotForm.

There are two errors being report here that are coming from JotForm and not the code in my site. As to the problem with jquery library versions, I have no idea why that is happening.  And so, any assistance in my "bug hunt" would be appreciated. Hopefully someone will catch this new addition to this discussion.

Best, JC

Hi JC,

The lightbox don't work on your page(s) and it breaks some of your website functions, clearly this is a conflict between the lightbox script and your existing website scripts.

Maybe, we can implement something like jQuery noConflict method to your website: http://www.w3schools.com/jquery/jquery_noconflict.asp. I've tried it by copying the source codes of the given webpage, but I have no luck so far. Will try for more.

Thanks

For the sake of an experiment, I have gone in and removed scripting related to the adaptive / responsive template itself in the testbed site mentioned in my last message.

Other javascript remains as needed for some other functions. You might have another look. Later today to I will continue pulling out more JS code as possible to see what happens.

Best, JC

Hi

Thank you for the update. We will await a response from you with your results after the adjustments mentioned above.


Cheers!
Sean

All attempts at clearing javascript / jquery conflicts have failed, even after stripping out all non-JotForm injections. This approach did cripple most of the test site's other functions.   I am at a loss now, so I called it quits.

Please take note, for as hinted before by console errors reported, some of what was going wrong may be in the Jot code injections.  There seem to be more than one.  Using the lightbox form still cripples dropdown menus on the site, and I have been unable to determine why. I have yet to find a fix for that.

Those menus are purely CSS3 which actions dictacted by bootstrap code. That cannot be altered, and the whole site functions fine until the jotform code is loaded into a page. 

I was able to re-implement the lightbox setup on the main site at ndauthorservices.com (see "Covers: Premade"), but customers will have to note a cover ID from the gallery. And then execute the order form manually from the submenu. And then enter the code manually.

Not a good choice in this age of automatic purchase / gratification, but that's that.

Still, thanks to all for so much assistance and effort around here.

Best, JC