0

Newbie to javascript and bootstrap and using v3.3.7. I have a form that loads, runs some javascript (jquery loads as expected), and then an ajax part page refresh fires which adds content to the DOM.

What I then observe is that despite the bootstrap-slider css and js resources loading ok and in correct order ie jquery then bootstrap then bootstrap-slider, my input fields tagged to become sliders do not change to sliders as hoped. They remain text fields. Performing a $('.slider').slider() action after form reloads does not help either.

The console shows no runtime errors. I am wondering if I were to 'fire' the slider init process after DOM has settled, maybe this would help ? Any suggestions where to look next would be most appreciated.

CloudHugger
  • 1,749
  • 1
  • 13
  • 24

1 Answers1

0

Three common problems in JavaScript in Visualforce:

  • Id values are prefixed with the actual (or generated Id) of the surrounding element so while in the Visualforce page you might have id="cause" in the emitted HTML you might have id="p:f:j_id647:j_id648:cause". Can be simpler to match on class or use the Attribute Ends With Selector.
  • Make sure you wait for the DOM to be complete - use the ready mechanism.
  • Re-rendering replaces parts of the DOM jQuery listeners have to be re-applied via a function specified in oncomplete. (Best if possible not to mix re-rendering and custom JavaScript logic.)

Expect to have to do some debuging too.

Community
  • 1
Keith C
  • 135,775
  • 26
  • 201
  • 437
  • Thanks Keith, i can confirm a) yes is vf page, 2) am using a plain div with its own id and only referencing by class anyway as suggested, and 3) given my flow is load, then call for ajax refresh after initial load complete I dont know if .ready() would fire after the ajax refresh is complete ? I tried using oncomplete='run a script' to apply sliders, but still no joy. It didnt even work with an element sitting outside of the refresh area so remains a mystery. Certainly appreciate your input! – CloudHugger Aug 03 '16 at 08:40
  • @CloudHugger Sounds like you do need the oncomplete. Its worth adding console.log($('.yourId').length)to see that jQuery is finding your element. Posting your page in the question might allow someone to spot an answer. Otherwise you could get into setting breakpoints in the Bootstrap code to track down the problem. – Keith C Aug 03 '16 at 09:09
  • Thanks Keith - not sure in the end what sorted things out but it finally got going! Appreciate the help you've provided. I accept the answer on the basis that it outlines pitfalls for newcomers to the joys of VF – CloudHugger Aug 03 '16 at 11:47
  • @CloudHugger Thanks. I just added the 3rd point about re-rendering because that is also a common cause of problems. – Keith C Aug 03 '16 at 12:26