15 Replies Latest reply: Feb 18, 2014 10:08 AM by jst20 RSS

    Replacing Image insteading of Adding Image

    jst20

      I have a page with two Radio Buttons on it...When you click the MALE button a Male image comes up and when you click the FEMALE button a female image comes up... I would like to have the male image already there when the page loads and when you click a button the image changes to either male or female...

       

      I tried adding

      <div id=&quot;image&quot;><img src=&quot;maleHF.jpg&quot;></div>

      which works but when you click a button a second additional picture comes up...

      I just a beginner in Jquery...

       

       

      Page:

      http://vmt2014.businesscatalyst.com/Gender%20test.html

       

       

       

      The Code:

       

      <!DOCTYPE html>

      <html>

      <head>

      <title>jQuery Mobile Web App</title>

      <link href=&quot;http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/>

      <script src=&quot;http://code.jquery.com/jquery-1.8.3.min.js&quot; type=&quot;text/javascript&quot;></script>

      <script src=&quot;http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js&quot; type=&quot;text/javascript&quot;></script>

      <div data-role=&quot;page&quot; id=&quot;page&quot;>

      <div data-role=&quot;header&quot; data-theme=&quot;b&quot;>

      <h1>VMT</h1>

       

      </div>

      <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot;>

      <title></title>

      <div data-role=&quot;content&quot; data-theme=&quot;a&quot;>

      </script><script>

      $(function(){

      $('#image').hide();

      $('#male').click(function(){

      $(&quot;#male&quot;).attr('checked', true);

      $(&quot;#female&quot;).attr('checked', false);

      $('#image' ).html('<img src=&quot;MaleHF.jpg&quot;>');

      $('#image').show();

      });

      $('#female').click(function(){

      $(&quot;#female&quot;).attr('checked', true);

      $(&quot;#male&quot;).attr('checked', false);

      $('#image' ).html('<img src=&quot;FemaleHF.jpg&quot;>');

      $('#image').show();

      });

      });

      </script>

      <div data-role=&quot;fieldcontain&quot;>

      <fieldset data-role=&quot;controlgroup&quot; data-type=&quot;horizontal&quot;>

      <form>

      <div id=&quot;image&quot;></div>

      </form>

      <label>

      <input name=&quot;male&quot; type=&quot;radio&quot; id=&quot;male&quot; value=&quot;male&quot; data-theme=&quot;b&quot;>

      Male</label>

      <label>

      <input name=&quot;female&quot; type=&quot;radio&quot; id=&quot;female&quot; value=&quot;female&quot; data-theme=&quot;b&quot;>

      Female</label>

      </body>

      </html>

        • 1. Re: Replacing Image insteading of Adding Image
          Jon Fritz II CommunityMVP

          You could add the checked attribute to the male radio button's html...

           

          <input name="male" type="radio" id="male" value="male" data-theme="b" checked="checked">

          • 2. Re: Replacing Image insteading of Adding Image
            jst20 Community Member

            Still creates a second image...2 male images or two female images when you click the male or female button...

            • 3. Re: Replacing Image insteading of Adding Image
              MurraySummers CommunityMVP

              The code is badly formed. THere is no </head> and no <body>!

              • 4. Re: Replacing Image insteading of Adding Image
                jst20 Community Member

                Like I said, I'm just a beginner... so are you saying that the post above by Jon would work if the code was formed better?

                I added the <body> tag but didn't change anything...

                • 5. Re: Replacing Image insteading of Adding Image
                  Nancy O. CommunityMVP

                  Review basic HTML5 document structure.

                   

                   

                    <!DOCTYPE html>
                  <html>
                  <head>
                  <meta charset="UTF-8">
                  <title>Title of the document</title>
                  </head>

                  <body>
                  Content of the document......
                  </body>

                  </html> 

                   

                   

                   

                  Nancy O.

                  • 6. Re: Replacing Image insteading of Adding Image
                    jst20 Community Member

                    Does this look right?

                     

                     

                     

                     

                    <!DOCTYPE html>
                    <html>

                     

                    <head>
                    <title>VMT TEST</title>

                    <link href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" rel="stylesheet" type="text/css"/>

                    <script src="http://code.jquery.com/jquery-1.8.3.min.js" type="text/javascript">

                    </script><script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>

                    <div data-role="page" id="page">
                    <div data-role="header" data-theme="b">
                    </head>


                    <body>
                      <h1>VMT</h1>
                       
                    </div>
                    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
                    <title></title>
                    <div data-role="content" data-theme="a">

                    </script><script>
                    $(function(){
                    $('#image').hide();
                    $('#male').click(function(){
                    $("#male").attr('checked', true);
                    $("#female").attr('checked', false);
                    $('#image' ).html('<img src="MaleHF.jpg">');
                    $('#image').show();
                    });
                    $('#female').click(function(){
                    $("#female").attr('checked', true);
                    $("#male").attr('checked', false);
                    $('#image' ).html('<img src="FemaleHF.jpg">');
                    $('#image').show();
                    });
                    });
                    </script>

                    </script>
                    <div data-role="fieldcontain">
                    <fieldset data-role="controlgroup" data-type="horizontal">
                    <form>
                      <div id="image"></div>
                    </form>
                    <label>
                      <input name="male" type="radio" id="male" value="male" data-theme="b">
                      Male</label>
                    <label>
                      <input name="female" type="radio" id="female" value="female" data-theme="b">
                      Female</label>
                    </script>

                    </body>
                    </html>

                    • 7. Re: Replacing Image insteading of Adding Image
                      Nancy O. CommunityMVP

                      Nope.  jQuery Mobile apps are an advanced project for experienced coders.  This is NOT good starter project.

                       

                      <!doctype html>
                      <html lang="en">
                      <head>
                      <meta charset="utf-8">
                      <title>VMT TEST</title>
                      <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
                      <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
                      <link href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" rel="stylesheet" type="text/css"/>
                      </head>
                      
                      <body>
                      <div data-role="page" id="page">
                      <div data-role="header" data-theme="b">
                      <!--end header--></div>
                      
                      <div data-role="content">
                      
                      <form>
                      <label><input name="male" type="radio" id="male" value="male">
                      Male</label>
                      <label><input name="female" type="radio" id="female" value="female">
                      Female</label>
                      </form>
                      
                      <!--end content--></div>
                      
                      <!--end page--></div>
                      
                      <script>
                      $(function(){
                           $('#image').hide();
                           $('#male').click(function(){
                           $("#male").attr('checked', true);
                           $("#female").attr('checked', false);
                           $('#image' ).html('<img src="MaleHF.jpg">');
                           $('#image').show();
                           });
                           $('#female').click(function(){
                           $("#female").attr('checked', true);
                           $("#male").attr('checked', false);
                           $('#image' ).html('<img src="FemaleHF.jpg">');
                           $('#image').show();
                           });
                      });
                      </script>
                      </body>
                      </html>
                      

                       

                       

                       

                      Nancy O.

                      • 8. Re: Replacing Image insteading of Adding Image
                        jst20 Community Member

                        Well, so far I have 3 other pieces that I am working on and once I get this piece done it will do what I need it to do...

                        This piece seems to work fine except for not replacing the image... I've been doing this bit by bit and considering I've never programmed anything in jquery or html I feel I've done ok for only working on it for 2 weeks....so no help with this?

                        • 9. Re: Replacing Image insteading of Adding Image
                          Nancy O. CommunityMVP

                          so no help with this?

                          X-Cuse ME!!! 

                           

                          I just cleaned up your basic HTML which is malformed.

                           

                          Is there no "thank you" for this?

                           

                          N

                          • 10. Re: Replacing Image insteading of Adding Image
                            MurraySummers CommunityMVP

                            It doesn't make sense to trouble shoot code that is invalid. Fix your code first as Nancy has shown.

                            • 11. Re: Replacing Image insteading of Adding Image
                              jst20 Community Member

                              Sorry, I was looking at the response on my phone, it didn't show the code... Thank you it is much appreciated!

                              Sorry, I've posted here and elsewhere and it seems that unless you are experienced no one really wants to bother... and when they do it is with attitude and with little to no real help at all... but to those who remember what its like to be a beginner and have helped, Thank you! And thank you again Nancy!

                              • 12. Re: Replacing Image insteading of Adding Image
                                MurraySummers CommunityMVP

                                Sorry, I've posted here and elsewhere and it seems that unless you are experienced no one really wants to bother...

                                 

                                I really take issue with that comment, since most of the posts here are from users at about the same experience level as you. But that's a topic for a different thread. And I don't see how you could say that in light of the help that Nancy has given you.

                                 

                                Let us know how the valid code works for you please.

                                • 13. Re: Replacing Image insteading of Adding Image
                                  jst20 Community Member

                                  I changed the code as Nacy posted and now it doesn't work at all...

                                  It now has 2 long buttons that don't do anything when clicked...

                                  No Header/Title Bar and show no swatch formatting...

                                   

                                  http://vmt2014.businesscatalyst.com/Gender%20test.html

                                   

                                  Murray I wasn't talking about Nancy, that was a misunderstanding... it is mostly the attutudes that I get, I feel like I'm being talked to like a child.

                                  • 14. Re: Replacing Image insteading of Adding Image
                                    Nancy O. CommunityMVP

                                    OK, I see what happened now.  Try this revised code.

                                     

                                     

                                    <!doctype html>
                                    <html lang="en">
                                    <head>
                                    <meta charset="utf-8">
                                    <title>VMT TEST</title>
                                    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
                                    <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
                                    <link href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" rel="stylesheet" type="text/css"/>
                                    </head>
                                    
                                    <body>
                                    <div data-role="page" id="page">
                                    
                                    <div data-role="header" data-theme="b">
                                    <h1>VMT TEST</h1>
                                    <!--end header--></div>
                                    
                                    <div data-role="fieldcontain">
                                    
                                    <form>
                                    <fieldset data-role="controlgroup" data-type="horizontal">
                                    
                                    <div id="image">Default Image goes here</div>
                                    
                                    <label><input name="male" type="radio" id="male" value="male" data-theme="b">
                                      Male</label>
                                    
                                    <label><input name="female" type="radio" id="female" value="female" data-theme="b">
                                      Female</label>
                                    
                                    </fieldset>
                                    
                                    </form>
                                    <!--end content--></div>
                                    <!--end page--></div>
                                    
                                    <script>
                                    $(function(){
                                         $('#male').click(function(){
                                         $("#male").attr('checked', true);
                                         $("#female").attr('checked', false);
                                         $('#image' ).html('<img src="MaleHF.jpg">');
                                         $('#image').show();
                                         });
                                         $('#female').click(function(){
                                         $("#female").attr('checked', true);
                                         $("#male").attr('checked', false);
                                         $('#image' ).html('<img src="FemaleHF.jpg">');
                                         $('#image').show();
                                         });
                                    });
                                    </script>
                                    </body>
                                    </html>
                                    

                                     

                                     

                                    PS. Don't be too sensitive.  You learn from your mistakes as we all do.  I just think jQuery Mobile is too advanced for a first project because the code has to be very, very precise.  

                                     

                                    Use the W3C code validation tools to check your work during development. 

                                    http://validator.w3.org/

                                     

                                     

                                    Nancy O.

                                    • 15. Re: Replacing Image insteading of Adding Image
                                      jst20 Community Member

                                      Thanks Nancy! That works!