jQWidgets Forums

jQuery UI Widgets Forums Editors Button, RepeatButton, ToggleButton, LinkButton cannot even get demo buttons to work on iOS devices

Tagged: 

This topic contains 4 replies, has 2 voices, and was last updated by  stevewp 11 years, 5 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author

  • stevewp
    Participant

    I have been working with the widgets for some time on full sized websites. I am not trying to get the mobile widgets to work as well.

    I can get input text field to appear properly on the simulator and on my iOS 7 device. I cannot get the buttons to work either. I went back to jsxwidgets.com and selected Mobile Demos, jqxButtons, default Functionality. When I click on Login, the button does not respond. I have not been able to pickup the click on the button in the examples I have tried to use using the simulator using Safari. Is there something that I am missing? The demos are not even working for me.

    Steven


    Peter Stoev
    Keymaster

    Hi Steven,

    The Buttons in the demo work correctly according to us and as they’re designed. If you have a Click event handler, the event would be raised as expected. Note, that for buttons we use the standard browser Buttons so they will always work. We just style them with CSS. The same is valid for the HTML Input tags. The Login Button does nothing in the demo. I do not know how you expect it to respond.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com/


    stevewp
    Participant

    Here is my code that I am working with based on the examples in the mobile demos section. The login button should be destroyed after they click on it. It stays there. What am I doing wrong?

    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
        <meta name="msapplication-tap-highlight" content="no" />
        <title id='Description'>JavaScript Input - Mobile Example</title>
        <link rel="stylesheet" href="demo.css" type="text/css" />
        <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
        <link rel="stylesheet" href="../jqwidgets/styles/jqx.windowsphone.css" type="text/css" />
        <link rel="stylesheet" href="../qwidgets/styles/jqx.blackberry.css" type="text/css" />
        <link rel="stylesheet" href="../jqwidgets/styles/jqx.android.css" type="text/css" />
        <link rel="stylesheet" href="../jqwidgets/styles/jqx.mobile.css" type="text/css" />
        <script type="text/javascript" src="../jqscripts/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="simulator.js"></script>
        <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../jqwidgets/jqxinput.js"></script>
        <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var theme = prepareSimulator("input");
                var countries = new Array("Afghanistan", "Albania", "Algeria", "Andorra", "Angola", "Antarctica", "Antigua and Barbuda", "Argentina", "Armenia", "Australia", "Austria", "Azerbaijan", "Bahamas", "Bahrain", "Bangladesh", "Barbados", "Belarus", "Belgium", "Belize", "Benin", "Bermuda", "Bhutan", "Bolivia", "Bosnia and Herzegovina", "Botswana", "Brazil", "Brunei", "Bulgaria", "Burkina Faso", "Burma", "Burundi", "Cambodia", "Cameroon", "Canada", "Cape Verde", "Central African Republic", "Chad", "Chile", "China", "Colombia", "Comoros", "Congo, Democratic Republic", "Congo, Republic of the", "Costa Rica", "Cote d'Ivoire", "Croatia", "Cuba", "Cyprus", "Czech Republic", "Denmark", "Djibouti", "Dominica", "Dominican Republic", "East Timor", "Ecuador", "Egypt", "El Salvador", "Equatorial Guinea", "Eritrea", "Estonia", "Ethiopia", "Fiji", "Finland", "France", "Gabon", "Gambia", "Georgia", "Germany", "Ghana", "Greece", "Greenland", "Grenada", "Guatemala", "Guinea", "Guinea-Bissau", "Guyana", "Haiti", "Honduras", "Hong Kong", "Hungary", "Iceland", "India", "Indonesia", "Iran", "Iraq", "Ireland", "Israel", "Italy", "Jamaica", "Japan", "Jordan", "Kazakhstan", "Kenya", "Kiribati", "Korea, North", "Korea, South", "Kuwait", "Kyrgyzstan", "Laos", "Latvia", "Lebanon", "Lesotho", "Liberia", "Libya", "Liechtenstein", "Lithuania", "Luxembourg", "Macedonia", "Madagascar", "Malawi", "Malaysia", "Maldives", "Mali", "Malta", "Marshall Islands", "Mauritania", "Mauritius", "Mexico", "Micronesia", "Moldova", "Mongolia", "Morocco", "Monaco", "Mozambique", "Namibia", "Nauru", "Nepal", "Netherlands", "New Zealand", "Nicaragua", "Niger", "Nigeria", "Norway", "Oman", "Pakistan", "Panama", "Papua New Guinea", "Paraguay", "Peru", "Philippines", "Poland", "Portugal", "Qatar", "Romania", "Russia", "Rwanda", "Samoa", "San Marino", " Sao Tome", "Saudi Arabia", "Senegal", "Serbia and Montenegro", "Seychelles", "Sierra Leone", "Singapore", "Slovakia", "Slovenia", "Solomon Islands", "Somalia", "South Africa", "Spain", "Sri Lanka", "Sudan", "Suriname", "Swaziland", "Sweden", "Switzerland", "Syria", "Taiwan", "Tajikistan", "Tanzania", "Thailand", "Togo", "Tonga", "Trinidad and Tobago", "Tunisia", "Turkey", "Turkmenistan", "Uganda", "Ukraine", "United Arab Emirates", "United Kingdom", "United States", "Uruguay", "Uzbekistan", "Vanuatu", "Venezuela", "Vietnam", "Yemen", "Zambia", "Zimbabwe");
                $("#input").jqxInput({ theme: theme, placeHolder: "Enter a Country", height: 35, width: '80%', minLength: 1, source: countries });
    			$('#input').jqxInput('val', 'Hip Hop');
    			
                $("#loginButton").jqxButton({ enableHover: false, theme: theme, width: '80%' });
    
                initSimulator("input");
    			//$('#loginButton').jqxButton('destroy'); 
    
    	$('#loginButton').on('click', function () 
    	{
    		$('#loginButton').jqxButton('destroy'); 
    	 }); 
    
            });
            
    
        </script>
    </head>
    <body class='default'>
        <div id="demoContainer" class="device-mobile">
            <div id="container" class="device-mobile-container">
                <div style='margin-left: 10%; margin-top: 100px;'>
                    Type your country into the field:
                </div>
                 <input style='margin-left: 10%; margin-top: 10px;' type="text" id="input"/>
                <div>
                	<button style="margin-top: 30px; margin-left: 10%;" id="loginButton">Login</button>
                </div>
       
            </div>
        </div>
    </body>
    </html>
    

    Peter Stoev
    Keymaster

    Hi stevewp,

    On my side(tested with IPhone and IPad running iOS 7.0.4 and also with the Chrome’s Emulator, the button is removed after ‘click’. That is a standard HTML Button. However, check whether the path to all references it correct, because if it not, the initialization of the widgets will fail so your ‘click’ handler would not be executed. Example: http://jsfiddle.net/ZX73f/1/embedded/result/

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com


    stevewp
    Participant

    That one worked for me. I will have to compare to determine where the difference is.

    Steven

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.