Vfrdtyky

I am working on a jQuery Mobile app, using jQuery Mobile version 1.4.5. My app can allow users to be members of many different campaigns. I am using ColdFusion as the server side scripting language, and jQuery and JavaScript for client side.

On my index.cfm page I have a few jQuery Mobile pages, part of a multi-page template. One of my pages is called is called pageEntries:

<cfloop index="i" from="1" to="#ArrayLen(session.arrActiveUserCampaigns)#">

<cfoutput>

<cfif i GT 1>

    <div id="id#reReplace(session.arrActiveUserCampaigns[i][4], '[[:space:]]', '', 'ALL')#" style="visibility:hidden;"><h4>#session.arrActiveUserCampaigns[i][4]#</h4></div>

<cfelse>

    <div id="id#reReplace(session.arrActiveUserCampaigns[i][4], '[[:space:]]', '', 'ALL')#" style="visibility:visible;"><h4>#session.arrActiveUserCampaigns[i][4]#</h4></div>

</cfif>

</cfoutput>

I also have a jQuery Mobile panel that is positioned to the right of the screen:

<div data=role="panel" id="entriesPanel" data-position="right" data-display="push">

<cfloop index="i" from="1" to="#ArrayLen(session.arrActiveUserCampaigns)#">

<cfif #i# EQ 1>

    <cfset campaignButton = "<button onclick='campaignButton(this.id)' id='btn#reReplace(session.arrActiveUserCampaigns[i][4], "[[:space:]]", "", "ALL")#' class='ui-btn ui-corner-all ui-icon-check ui-btn-icon-right ui-alt-icon'>#session.arrActiveUserCampaigns[i][4]#</button>" />

<cfelse>

    <cfset campaignButton = campaignButton & "<button onclick='campaignButton(this.id)' id='btn#reReplace(session.arrActiveUserCampaigns[i][4], "[[:space:]]", "", "ALL")#' class='ui-btn ui-corner-all'>#session.arrActiveUserCampaigns[i][4]#</button>" />

</cfif></cfloop><cfoutput>#campaignButton#</cfoutput></div>

On the entriesPanel panel page, I would like to be able to click a button in order to make that campaign the one that is displayed on the index.cfm page within the pageEntries data-role page. I have the following JavaScript code that I have tried using to accomplish this, but so far nothing happens to the content on the page. The goal is to change the style attribute for those div elements, making all hidden except for the one that should be visible:

function campaignButton(campaignBtnID){

//event.stopPropogation();/* prevents bubbling of click event to Parent element*/

//event.stopImmediatePropogation();/* prevents bubbling of click event to Children elements*/

var parentID = document.getElementById(campaignBtnID).parentNode.id;

var childrenNodes = document.getElementById(parentID).children;

var childNodeLength = childrenNodes.length;

var btnWithCheck = "ui-btn ui-corner-all ui-icon-check ui-btn-icon-right ui-alt-icon";

var btnWithoutCheck = "ui-btn ui-corner-all";

var constructorName = "";

var pageCampaignID = "";

var arrPageCampaignID = ;

for(i=0; i < childNodeLength; i++){

    constructorName = childrenNodes[i].constructor.name.toString();

    if(constructorName == "HTMLButtonElement"){

        var childID = childrenNodes[i].id;

        pageCampaignID = childID.replace('btn', 'id');

        arrPageCampaignID.push(pageCampaignID);

        if(childID == campaignBtnID){

            if(document.getElementById(childID).className.match( /(?:^|s)ui-btn ui-corner-all ui-icon-check ui-btn-icon-right ui-alt-icon(?!S)/ ) != null){



                document.getElementById(childID).className = document.getElementById(childID).className.replace( /(?:^|s)ui-btn ui-corner-all ui-icon-check ui-btn-icon-right ui-alt-icon(?!S)/ , 'ui-btn ui-corner-all' );



            }

        } else {

            //constructorName's id value does not match campaignBtnID, update class to include

            //constant btnWithoutCheck value

            if(document.getElementById(childID).className.match( /(?:^|s)ui-btn ui-corner-all(?!S)/ ) != null ){

                document.getElementById(childID).className = document.getElementById(childID).className.replace( /(?:^|s)ui-btn ui-corner-all(?!S)/ , 'ui-btn ui-corner-all ui-icon-check ui-btn-icon-right ui-alt-icon' );

            }

        }

    }

    $( "#"+childID ).button("refresh");

}

var adjustedCampaignBtnID = campaignBtnID.replace('btn', 'id');

alert(adjustedCampaignBtnID);

//Loop through the array of pageCampaignID values in arrPageCampaignID

var myArrLength = arrPageCampaignID.length;

for(i=0; i<myArrLength; i++){

    if(adjustedCampaignBtnID == arrPageCampaignID[i]){

        document.getElementById(arrPageCampaignID[i]).style.visibility = "hidden";

    } else {

        document.getElementById(arrPageCampaignID[i]).style.visibility = "visible";

    }

}

}

Back to the entriesPanel page, the first button widget will always correspond with the first div element on the pageEntries page. I am using the check icon within this first button.

What I am trying to do is the following:

1) When any button is clicked, other than the current button with the check icon, I want that button to have the check icon and remove the check icon from the one that originally had it.

2) Change the style on the div elements in the pageEntries page so that the correct one is now visible and the rest are hidden.

I have most of my logic working. I was at the point where I could see in the web console that those elements were updating correctly, but the changes were not being applied to the page itself. What must I do in order to get these changes written to the page?