asked on

coldfusion jquery toggle

Hello, I am trying to populate a select box using the below. Onclick of the link, the selectbox should populate with more values based on toggleval and the text should toggle. It works fine on the first click, but the toggleval does not change on the next click. Any idea what is wrong with below.

Jquery:

function toggleme(toggleval){
	var o=$("#selectbox"),el=$("#toggleval");
        var selectIDs=(o.val()||[]).join();  
       
        o.empty().append('<option value="-1" disabled="disabled"><i>Loading...</i></option>');
        if(toggleval){toggleval = 1;}
        else
        {toggleval = 0;}
        $.ajax('cfcs/new.cfc?method=testcfc',{
            method: 'POST',
            data: {selectbox:selectIDs,toggleval:toggleval},
            success: function (retData) {
                o.empty().append(retData);
                $("#toggletext").html(toggleval?"hide":"show");
            }
        });
	}

Coldfusion in side a form:
<cfargument name="toggleval" default="false" />
<input type="hidden" name="toggleval" id="toggleval" value="#arguments.toggleval#" />
(<a href="javascript:void(0);" 
                onclick="Toggleme(<cfif arguments.toggleval>0<cfelse>1</cfif>)">
               <span id="toggletext"><cfif arguments.toggleval>hide<cfelse>show</cfif></span> Data</a>)</p>

<select class="form-control" name="selectbox" id="selectbox" >
                        #getdata(arguments.selectbox,toggleval)#
</select>

Open in new window

leakim971

your click probably reload the page
try the following to see if it open some doors :

<script>
    jQuery(function($) {

        var toggleval = 0;

        var updateToggleText = function() {
            $("#toggletext").html(toggleval?"hide":"show");
        };

        var toggleme = function(evt) {

            evt.preventDefault(); // https://api.jquery.com/event.preventdefault/

            var o = $("#selectbox");
            var el = $("#toggleval");

            alert("toggleval value is : " + toggleval); // for testing purpose, remove this line when you're done

            var selectIDs = (o.val()||[]).join();  

            o.empty().append('<option value="-1" disabled="disabled"><i>Loading...</i></option>');

            toggleval = !toggleval;

            $.post('cfcs/new.cfc?method=testcfc', { selectbox:selectIDs, toggleval:toggleval * 1 }, function (retData) {
                o.empty().append(retData);
                updateToggleText();
            });
        };

        updateToggleText();
        $("#myToggleLink").click(toggleme);
    });

</script>

(<a href="javascript:void(0);" id="myToggleLink"><span id="toggletext"></span> Data</a>)</p>
<select class="form-control" name="selectbox" id="selectbox" >
#getdata(arguments.selectbox,toggleval)#
</select>

Open in new window

leakim971

Could you add some feedback ? Or maybe you resolved your issue so close the question.

This question needs an answer!

Become an EE member today

7 DAY FREE TRIAL

Members can start a 7-Day Free trial then enjoy unlimited access to the platform.

View membership options

Learn why we charge membership fees

We get it - no one likes a content blocker. Take one extra minute and find out why we block content.