[Resolved] I need a little JS View Help

[Author]

Posts

[Brandon]

I am trying to: Create a View the Loops and generates a Bootstrap Modal Button, with pop up.

I am using the following code:

<h3 class="text-center">[wpv-post-link]</h3>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal-[wpv-post-id]">
Book An Appointment Online
</button>

<!-- Modal -->
<div class="modal fade" id="myModal-[wpv-post-id]" tabindex="-1" role="dialog" aria-labelledby="myModalLabel-[wpv-post-id]">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Appointment Request</h4>
      </div>
      <div class="modal-body">
      <script type="text/javascript">
      d3cp_bid = '[types field='demandforcebusinessid'][/types]'; // Business ID in DemandforceD3
      d3cp_appt_source = 'VFC Website';  //Optional. See Instructions.
      d3cp_appt_returnpage = '/appointment-request-complete'; //Optional. See Instructions.
      </script>
      <script src="//local.demandforce.com/b/[types field='demandforcescriptslug'][/types]/scheduler.widget" type="text/javascript"></script>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
      </div>
    </div>
  </div>
</div>

This works in terms of creating a button and modal pop up, however only the first pop up contain the correct content.

The sequential pop up result in a 404.

Also, the code above generates multiple JQuery Migrates in my console.

I believe the Javascript should be moved to the JS section of the View Loop, but I have been unsuccessful in making that work as well.

Thoughts?

Thanks!

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Brandon,

Thank you for contacting our support forum.

Could you explain a bit what this code is trying to do ? so I can assist better

Also shortcodes don't work inside Javascript since Javascript is process on the frontend. Shortcodes are processed by PHP which occurs on the server side.

Thanks,
Shane

[Brandon]

I am simply running through a loop, populating a Modal window with data from my custom field type.

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Brandon,

I'm not sure why you would need javascript to do this since bootstrap already provides the modal output.

All you need to do is add the shortcode to the modal within the <div class="modal-body"> tag.

Your content should show up normally like this.

Here is an example.

<h3 class="text-center">[wpv-post-link]</h3>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal-[wpv-post-id]">
Book An Appointment Online
</button>
 
<!-- Modal -->
<div class="modal fade" id="myModal-[wpv-post-id]" tabindex="-1" role="dialog" aria-labelledby="myModalLabel-[wpv-post-id]">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Appointment Request</h4>
      </div>
      <div class="modal-body">
      [types field='demandforcebusinessid'][/types]
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
      </div>
    </div>
  </div>
</div>

Please let me know if this helps.
Thanks,
Shane

[Brandon]

OK, so creating the Modal is not the issue, but the unique Javascript that I need to load inside of each Modal seems to be the issue.

Here is what needs to go into the Modal body:

<div class="modal-body">
      <script type="text/javascript">
      d3cp_bid = '[types field='demandforcebusinessid'][/types]'; // Business ID in DemandforceD3
      d3cp_appt_source = 'VFC Website';  //Optional. See Instructions.
      d3cp_appt_returnpage = '/appointment-request-complete'; //Optional. See Instructions.
      </script>
      <script src="//local.demandforce.com/b/[types field='demandforcescriptslug'][/types]/scheduler.widget" type="text/javascript"></script>
      </div>

Thoughts?

[Christian Cox]

Hi, Shane is out today so I'll take over this ticket. I hope that's okay with you. I think I see what you're trying to do here, but I'm not quite clear. Should the script tags for each modal element be in the source code of your page on page load, or should they be inserted into the DOM dynamically when each modal is opened?

It appears to me that you're trying to trigger some tracking code when someone opens a modal, but instead all the code is included directly in the page. This will result in your tracking events all firing on page load, instead of waiting until the modal is opened. Can you explain in a bit more detail for me?