Forum | Appery.io

Hi,

I have a button in my footer that I am using as a 'toggle style button' when the user taps it the button text is validated and then some code is run and the button text changed to another value.

Instead of this is it possible to change the button to a true toggle button as the page loads using jquery?

Regards,
Joe

Joe,
This is what I've done in the past...

Put a toggle onto the body of the page and then run this code on page load.

var toggleName = Appery('toggle');
var footer = Appery('footer');

toggle.appendTo(footer);

Hi, thanks for the reply I will give it a go and let you know how I get on.

Good One Kapow !!
Gave u ur first star for that..

Hi Kapow,

I have tried the code supplied but get the following error. Do you have any suggestions?

Regards
Joe

Uncaught TypeError: Object function toggle(id, src, value) {
var elem;
var tag;
if (src != "html") {
elem = $(document).find('[id=' + id + ']');
if (elem) {
if (elem.attr("apperytype") == "marker") {
//hide marker on the map
elem.attr("rendered", value);
if (elem.find("[reRender]").size() == 1) {
parentMap = Appery(elem.find("[reRender]").attr("reRender"));
if (parentMap != undefined && parentMap.refresh != undefined) {
parentMap.refresh();
}
}
return;
}
switch (elem.prop("tagName")) {
case "INPUT":
if (elem.attr("type") == "radio" elem.attr("type") == "checkbox") {
elem = elem.parent().parent();
} else {
elem = elem.closest("div[data-role='fieldcontain']");
}
break;
case "SELECT":
case "TEXTAREA":
elem = elem.closest("div[data-role='fieldcontain']");
break;
case "A":
if (elem.hasClass('ui-link-inherit')) {
elem = elem.closest('li');
}
break;
}
}
} else {
elem = $(document).find('[id=' + id + '_comp]');
if (elem.size() == 0) {
elem = $(document).find('[id=' + id + ']');
tag = elem.prop("tagName").toLowerCase();
if (tag == "div" && elem.prop("class").indexOf("tabpanel") != -1
&& elem.prop("class").indexOf("tabs-top") == -1) {
var elem_title = elem.parent().find('[href=#' + id + ']');
if (value == undefined "" == value) {
elem_title.toggle();
} else {
elem_title.toggle(str2Bool(value));
}
if (elem.css('display') == 'block' && !str2Bool(value)) {
if (elem.prop("class").indexOf("ui-tabs-hide") == -1) {
var elem_tab_panel = elem.parent();
var sel_idx = elem_tab_panel.tabs("option", "selected");
sel_idx++;
sel_idx = (sel_idx == elem_tab_panel.tabs("length")) ? 0 : sel_idx;
elem_tab_panel.tabs("select", sel_idx);
}
}
}
}
}
if (!elem) return;

 if (value == undefined || "" == value) { 
     elem.toggle(); 
 } else { 
     if (elem.is("a") && elem.attr("data-role") == "button") { 
         // mobilebutton 
         if (elem.hasClass("ui-btn-inline")) { 
             elem.css("display", str2Bool(value) ? "inline-block" : "none"); 
         } else { 
             elem.css("display", str2Bool(value) ? "block" : "none"); 
         } 
     } else { 
         // default 
         elem.toggle(str2Bool(value)); 
     } 
 } 

} has no method 'appendTo'

Hi Kapow,

Thanks for the code which I have partially got to work, the toggle renders like a drop down list rather than a toggle I have attempted to add the toggle class to the toggleName element but this doesn't work can you show me how to maintain the class structure of the toggle?

Regards,
Joe
Code including attempted add class:
var toggleName = Appery('opttgl');
var footer = Appery('mobilefooter');

toggleName.appendTo(footer);
toggleName.addClass('ui-slider-label ui-slider-label-b ui-btn-down-e ui-btn-corner-all');
toggleName.show();

Try putting it into a grid with one cell and append the grid to the footer.

Thanks Neil

Hi Kapow,

That's fixed it thanks for your help.

Best Regards,
Joe