JQuery function to load DIV from a list of multiple .js scripts

2 Views

I could use some help with writing a JQuery function that will work in WordPress. I’m trying to have an un ordered list of links that loads different forms from an external site into a single Div. I have it working to just load HTML content but I can’t seem to get the forms to load. Unfortunately I know very little about JQuery and Javascript.

You can see what I’m working on below and at the jsfiddle.com link below.

Read More

http://jsfiddle.net/3ct4etnj/

If possible I also would like for when the page loads for the first link to already be populated in the div, and I would also be love to be able to add a class=”current-form” to the Link who’s form is currently populating the DIV so I can style is differently as a visual indicator of which form is currently loaded. 

$(".link").click(function(e) {
      e.preventDefault();
      $('.content-container div').fadeOut('slow');
      $('#' + $(this).data('rel')).fadeIn('slow');
});
.content-container {
    position: relative;
    width: 400px;
    height: 400px;
}
.content-container div {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<a class="link" href="#" data-rel="content1">Link 1</a>
<a class="link" href="#" data-rel="content2">Link 2</a>
<a class="link" href="#" data-rel="content3">Link 3</a>
<a class="link" href="#" data-rel="content4">Link 4</a>
<a class="link" href="#" data-rel="content5">Link 5</a>

<div class="content-container">
    <div id="content1">This is the test content for Load form 1. <script src="https://widgets.abilafundraisingonline.com/widgets/form.js?channel=care14/carefundinitiative"></script></div>
    <div id="content2">This is the test content for Load form 2. <script src="https://widgets.abilafundraisingonline.com/widgets/form.js?channel=care14/carefundinitiative"></script></div>
    <div id="content3">This is the test content for Load form 3. <script src="https://widgets.abilafundraisingonline.com/widgets/form.js?channel=care14/carefundinitiative"></script></div>
    <div id="content4">This is the test content for Load form 4. <script src="https://widgets.abilafundraisingonline.com/widgets/form.js?channel=care14/carefundinitiative"></script>  </div>
    <div id="content5">This is the test content for Load form 5. <script src="https://widgets.abilafundraisingonline.com/widgets/form.js?channel=care14/carefundinitiative"></script></div>
</div>

Any assistance you can provide would be greatly appreciated. My first post on stackoverflow, so let me know if there is anything I can do to improve the provided information.

Thanks in advance!

Post Views: 2

Related posts

2 comments

  1. I don’t know how this widget works so I don’t know if it’s the good way to add your forms like this but if you wanna do what you want you need to change few things.

    First, you can’t see your forms because you hide all the divs in your content container 

    .content-container div {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

    And on click event

    $('.content-container div').fadeOut('slow');

    You have to be more specific if you wanna hide only your content divs 

    .content-container > div {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

$('.content-container > div').fadeOut('slow');

    Then to show your first form, you just need to add a CSS property to the first content : 

    .content-container > div:first-child {
  display: block;
}

    Finally, to add a class to the active link, you can update your click function to remove the current active class link and add it to the new one :

    $(".link").removeClass("current-form");
$(this).addClass("current-form");

    And add a new CSS rule :

    a.current-form {
  color: red;
}

    This is the final code : 

    $(document).ready(function() {

  $(".link").click(function(e) {
        e.preventDefault();
        $(".link").removeClass("current-form");
        $(this).addClass("current-form");
        $('.content-container > div').fadeOut('slow');
        $('#' + $(this).data('rel')).fadeIn('slow');
  });
  
});
    .content-container {
    position: relative;
    width: 400px;
    height: 400px;
}
.content-container > div {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.content-container > div:first-child {
  display: block;
}

a.current-form {
  color: red;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a class="link current-form" href="#" data-rel="content1">Link 1</a>
<a class="link" href="#" data-rel="content2">Link 2</a>
<a class="link" href="#" data-rel="content3">Link 3</a>
<a class="link" href="#" data-rel="content4">Link 4</a>
<a class="link" href="#" data-rel="content5">Link 5</a>

<div class="content-container">
    <div id="content1">This is the test content for Load form 1. <script src="https://widgets.abilafundraisingonline.com/widgets/form.js?channel=care14/carefundinitiative"></script></div>
    <div id="content2">This is the test content for Load form 2. <script src="https://widgets.abilafundraisingonline.com/widgets/form.js?channel=care14/carefundinitiative"></script></div>
    <div id="content3">This is the test content for Load form 3. <script src="https://widgets.abilafundraisingonline.com/widgets/form.js?channel=care14/carefundinitiative"></script></div>
    <div id="content4">This is the test content for Load form 4. <script src="https://widgets.abilafundraisingonline.com/widgets/form.js?channel=care14/carefundinitiative"></script>  </div>
    <div id="content5">This is the test content for Load form 5. <script src="https://widgets.abilafundraisingonline.com/widgets/form.js?channel=care14/carefundinitiative"></script></div>
</div>

  2. You have to fix the issue with your HTML markup first. Instead of using script inside of each div, you should use iframe:

    <div id="content1">This is the test content for Load form 1. 
       <iframe src="https://widgets.abilafundraisingonline.com/widgets/form.js?channel=care14/carefundinitiative"></iframe>
</div>

    This way, you would be able to load external webpages inside of your application. Check out working example in JSFIDDLE

Comments are closed.