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

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

    Re: html elements and wl

    ‏2012-10-04T13:19:45Z  
    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

    Re: html elements and wl

    ‏2012-10-04T17:14:03Z  
    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

    Re: html elements and wl

    ‏2012-10-04T20:05:49Z  
    thanx for reply but now try to include jquerymobile.css and js then try to run this code and upate thanx

    Regards,
    Brock--
    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

    Re: html elements and wl

    ‏2012-10-04T20:07:12Z  
    Um, try this...

    inside the header:
    <pre class="jive-pre"> <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> </pre>

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

    <pre class="jive-pre"> <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> </pre>
    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

    Re: html elements and wl

    ‏2012-10-05T10:43:07Z  
    hi cnandreu ,

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

    regards,
    Brock--
  • SystemAdmin
    SystemAdmin
    2327 Posts

    Re: html elements and wl

    ‏2012-10-05T14:57:37Z  
    hi cnandreu ,

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

    regards,
    Brock--
    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.