Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Aug 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    .load() function challenge

    Here is the situation: On my Home page, I have a square 350 x 350px <div> that has a paragraph, and then a "Go" button at the bottom.

    When a visitor presses "Go", I used the load() function to instantly load a question with a multiple choice radio button (4 choices) answer. This is all on a <div> located on a separate html page. This is the code I used to do that:

    [CODE]
    <script>
    $(document).ready(function() {
    $('#mainButton').click(function() {
    $('#callToAction').load("devetto_form.html #stepOne");
    });
    });
    </script>
    [CODE]

    Keep in mind this script is located on the main html page, not the external one that the .load function loads.

    So here is what I want to have happen, after a visitor has clicked the "Go" button and it loads up the radio button form, I want the act of clicking on a radio button to load a new <div>, which will contain a new question with a new set of radio button answers.

    Here is why I haven't been able to do it:

    1. I'm not sure if I write this second script on the main html page, or the external one. If I write it on the main one, it doesn't seem to work because selector that will be effected by the .click() function for the second script is actually located on the external html page (the selector being the input element/radio button).

    2. If I put the script on the external html page (thus solving the above problem), now it creates a new problem: the <div> that I want new html loaded onto (in the above code: #callToAction) is now located on the primary html page, as where in this case I would be writing the script on the external html page. So the page doesn't recognize that ID because it doesn't exist on the current page.

    Needless to say, I am stumped.

    I hope I was able to articulate the problem clearly. If there is any confusion, just ask and I will do my best to clarify.

    Keep in mind, I am still very novice at all this coding stuff, especially JavaScript, AJAX, and jQuery.

    Thank you.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,105
    Thanks
    23
    Thanked 594 Times in 593 Posts
    Don't put the checkboxes on the external page, leave them on your main page
    Load some like this
    Q. Who is buried in Grants tomb>?
    a) Lincoln
    b) Adams
    c) No one
    d) Grant

    and on the main page
    Code:
    Choose One:<br />
    <input type="checkbox" id="A"/>A<br />
    <input type="checkbox" id="B"/>B<br />
    <input type="checkbox" id="C"/>C<br />
    <input type="checkbox" id="D"/>D<br />
    Of course you need a new JS script(on the main page) and that needs to know the question number and the answer.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    New to the CF scene
    Join Date
    Aug 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Keep in mind, on the original <div> (where the questions appear after the Go button is clicked), there is already html.

    So in that case, how do I make sure the original html is displayed instead of the checkboxes before the button is clicked if they are on the same html file?

    Would I use some sort of code that included the .hidden() function?

    Just to see if I can make this clear: there is a div box with a header and a Go button. Once the Go button is clicked, the html within that div box is replaced with the question and multiple choice.

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,105
    Thanks
    23
    Thanked 594 Times in 593 Posts
    CSS display:none; will hide a div until JS changes it to display:block;

    Code:
    <script>
    $(document).ready(function() {
    $('#mainButton').click(function() {
    
    PUT the display code here
    $("#checkboxArea").css("display", "block");
    
    $('#callToAction').load("devetto_form.html #stepOne");
    });
    });
    </script>
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #5
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    Quote Originally Posted by chrispb7 View Post
    Here is the situation: On my Home page, I have a square 350 x 350px <div> that has a paragraph, and then a "Go" button at the bottom.

    When a visitor presses "Go", I used the load() function to instantly load a question with a multiple choice radio button (4 choices) answer. This is all on a <div> located on a separate html page. This is the code I used to do that:

    [CODE]
    <script>
    $(document).ready(function() {
    $('#mainButton').click(function() {
    $('#callToAction').load("devetto_form.html #stepOne");
    });
    });
    </script>
    [CODE]

    Keep in mind this script is located on the main html page, not the external one that the .load function loads.

    So here is what I want to have happen, after a visitor has clicked the "Go" button and it loads up the radio button form, I want the act of clicking on a radio button to load a new <div>, which will contain a new question with a new set of radio button answers.

    Here is why I haven't been able to do it:

    1. I'm not sure if I write this second script on the main html page, or the external one. If I write it on the main one, it doesn't seem to work because selector that will be effected by the .click() function for the second script is actually located on the external html page (the selector being the input element/radio button).

    2. If I put the script on the external html page (thus solving the above problem), now it creates a new problem: the <div> that I want new html loaded onto (in the above code: #callToAction) is now located on the primary html page, as where in this case I would be writing the script on the external html page. So the page doesn't recognize that ID because it doesn't exist on the current page.

    Needless to say, I am stumped.

    I hope I was able to articulate the problem clearly. If there is any confusion, just ask and I will do my best to clarify.

    Keep in mind, I am still very novice at all this coding stuff, especially JavaScript, AJAX, and jQuery.

    Thank you.

    You can have the script on your original page. since you are using checkboxes or radios, you will want to use the change method to react to those choices, but you must use .on() to assign those events since they are not on the page on load. so somethign like $('.myradios').on('change',function (){ do something}); or bind those desired events, after you use the .load method

  • #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,043
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Quote Originally Posted by DanInMa View Post
    but you must use .on() to assign those events since they are not on the page on load. so somethign like $('.myradios').on('change',function (){ do something});
    But the radio buttons will only be available after the ajax call is complete and the response is rendered. So assigning the event that way will not work.

    What you need is to delegate the event.
    Code:
    $(document).on('click', '.myradios', function(e) {
         //...
    });


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •