Topic
6 replies Latest Post - ‏2012-10-05T14:57:37Z by SystemAdmin
brock_smith
brock_smith
42 Posts
ACCEPTED ANSWER

Pinned topic html elements and wl

‏2012-10-04T13:04:48Z |
i have to change the button value in worklight?

this code is working fine in jquery normal editor
$('#showhide').click(function(){
var vcatption=$(this).attr('value');
if (vcatption == 'Hide Parameters') {
$('#showhide').attr('value','Show Parameters');
} else {
$('#showhide').attr('value','Hide Parameters');
}

});

note i have also tried $('#showhide').html('button value');but this is not working worklight? is there any solution?
  • SystemAdmin
    SystemAdmin
    2327 Posts
    ACCEPTED ANSWER

    Re: html elements and wl

    ‏2012-10-04T13:19:45Z  in response to brock_smith
    I tried:

    
    <script> WLJQ(
    'input#showhide').live(
    'click', function () 
    { var vcatption = WLJQ(
    
    this).attr(
    'value'); 
    
    if (vcatption == 
    'Hide Parameters') 
    { WLJQ(
    '#showhide').attr(
    'value',
    'Show Parameters'); 
    } 
    
    else 
    { WLJQ(
    '#showhide').attr(
    'value',
    'Hide Parameters'); 
    } 
    }); </script>
    


    
    <input type=
    "button" id=
    "showhide" value=
    "Hide Parameters"></input>
    


    and it worked.
  • brock_smith
    brock_smith
    42 Posts
    ACCEPTED ANSWER

    Re: html elements and wl

    ‏2012-10-04T17:14:03Z  in response to brock_smith
    thanx for reply but now try to include jquerymobile.css and js then try to run this code and upate thanx

    Regards,
    Brock--
    • SystemAdmin
      SystemAdmin
      2327 Posts
      ACCEPTED ANSWER

      Re: html elements and wl

      ‏2012-10-04T20:05:49Z  in response to brock_smith
      Um, try this...

      inside the header:
      
      <script src=
      "http://code.jquery.com/jquery-1.8.2.min.js"></script> <script src=
      "http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
      


      inside the body:
      
      <a data-role=
      "button" href=
      "#" id=
      "showhide">Show Parameters</a>
      


      
      <script> WLJQ(
      '#showhide').live(
      'click', function (evt) 
      {   evt.stopImmediatePropagation();   var vcatption =  WLJQ(
      "#showhide .ui-btn-text").text(); 
      
      if (vcatption == 
      'Hide Parameters') 
      { WLJQ(
      "#showhide .ui-btn-text").text(
      'Show Parameters'); 
      } 
      
      else 
      { WLJQ(
      "#showhide .ui-btn-text").text(
      'Hide Parameters'); 
      }   
      }); </script>
      
      • SystemAdmin
        SystemAdmin
        2327 Posts
        ACCEPTED ANSWER

        Re: html elements and wl

        ‏2012-10-04T20:07:12Z  in response to SystemAdmin
        Fixed formatting a bit for the JS code:

        
        <script>   WLJQ(
        '#showhide').live(
        'click', function (evt) 
        {   evt.stopImmediatePropagation();   var vcatption =  WLJQ(
        "#showhide .ui-btn-text").text();   
        
        if (vcatption == 
        'Hide Parameters') 
        {   WLJQ(
        "#showhide .ui-btn-text").text(
        'Show Parameters'); 
        } 
        
        else 
        {   WLJQ(
        "#showhide .ui-btn-text").text(
        'Hide Parameters'); 
        }   
        }); </script>
        
  • brock_smith
    brock_smith
    42 Posts
    ACCEPTED ANSWER

    Re: html elements and wl

    ‏2012-10-05T10:43:07Z  in response to brock_smith
    hi cnandreu ,

    Thanx for reply i tried but still i did not get any result.

    regards,
    Brock--
    • SystemAdmin
      SystemAdmin
      2327 Posts
      ACCEPTED ANSWER

      Re: html elements and wl

      ‏2012-10-05T14:57:37Z  in response to brock_smith
      Make a new Worklight Application and copy this over the html file http://app-name.html:

      
      <!DOCTYPE html> <html> <head> <link rel=
      "stylesheet" href=
      "http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> <script src=
      "http://code.jquery.com/jquery-1.8.2.min.js"></script> <script src=
      "http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> </head> <body id=
      "content" style=
      "display: none"> <!-- application UI goes here --> <div data-role=
      "page">   <div data-role=
      "header"> <h1>Page Title</h1> </div><!-- /header --> <div data-role=
      "content"> <p>Page content goes here.</p> <a data-role=
      "button" href=
      "#" id=
      "showhide">Show Parameters</a> </div><!-- /content --> </div> <script> var wlInitOptions = 
      { connectOnStartup : 
      
      true 
      };   WLJSX.bind(window, 
      "load", function() 
      { WL.Client.init(wlInitOptions); 
      }); </script> <script> function wlCommonInit()
      { 
      // Common initialization code goes here 
      } </script> <script> WLJQ(
      '#showhide').live(
      'click', function (evt) 
      { evt.stopImmediatePropagation(); var vcatption =  WLJQ(
      "#showhide .ui-btn-text").text(); 
      
      if (vcatption == 
      'Hide Parameters') 
      { WLJQ(
      "#showhide .ui-btn-text").text(
      'Show Parameters'); 
      } 
      
      else 
      { WLJQ(
      "#showhide .ui-btn-text").text(
      'Hide Parameters'); 
      } 
      }); </script> </body> </html>
      


      Hope that works.