Convert a static javascript function to dynamic

Question

In a c# MVC project, I was given a view by a front-end designer that contains this little script:

 <script>
    $('#PhaseDD').change(function () {
        var chosenValue = $(this).val();
        $('.ProcessDD').hide();
        if (chosenValue == "")
            $('#DefaultProcess').show();
        if (chosenValue == "Planning")
            $('#PlanningProcess').show();
        if (chosenValue == "Procurement")
            $('#ProcurementProcess').show();
        if (chosenValue == "Installation")
            $('#InstallationProcess').show();
        if (chosenValue == "Closure")
            $('#ClosureProcess').show();
    });
</script>

I would like to replace all the hard-coded options with a list that comes from the model. Something like this...

<script>
    $('#PhaseDD').change(function () {
        var chosenValue = $(this).val();
        $('.ProcessDD').hide();
        if (chosenValue == "")
            $('#DefaultProcess').show();

        // loop over a list from the model here

        if (chosenValue == " loop-item-name ")
            $('# loop-item-name + Process').show();

       //  end loop

    });
</script>

Is this possible? If so, how? And am I even going about this the right way? I was thinking I could use razor syntax, but that isn't working.

What about this: $('#' + chosenValue + 'Process').show()? You won't need a list for this. — diiN__________
– diiN__________, Commented Nov 4, 2016 at 14:03
why are you using if else then? add Process directly to the variable — Vivek Nuna
– Vivek Nuna, Commented Nov 4, 2016 at 14:03

Georg Patscheider · Accepted Answer · 2016-11-04 14:14:39Z

1

You can not compare a C# variable to a JS variable. But you can use razor to create a JS variable from a C# variable.

Here is how to fill a JS array with the values of a C# array:

@{ 
   // fetch this from ViewModel if it needs to be dynamic
   var cSharpNames = new [] { "Planning", "Procurement"}; 
 }

<script>
    var jsNames = []; // this is a JS array

    @foreach(var name in cSharpNames) {
         <text>jsNames.push(@name);</text>
    }

</script>

Then use the indexOf() method to search in the jsNames array as has been shown by Jeremy.

answered Nov 4, 2016 at 14:14

Georg Patscheider

9,4911 gold badge28 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jeremy Jackson · Accepted Answer · 2016-11-04 14:05:07Z

0

I'd just make an array, check to see if the value exists within it, and if it does show it. Something like this:

<script>
    $('#PhaseDD').change(function () {
        var chosenValue = $(this).val();
        var processes = ['Planning', 'Procurement'];
        $('.ProcessDD').hide();
        if (chosenValue == "")
            $('#DefaultProcess').show();

        if (processes.indexOf(chosenValue) > -1)
            $('#' + chosenValue + 'Process').show();

    });
</script>

answered Nov 4, 2016 at 14:05

Jeremy Jackson

2,25718 silver badges24 bronze badges

2 Comments

Casey Crookston Over a year ago

ok ok... I see what you are thinking, and this is a much better way. The syntax you have isn't working, but it might be enough to get me there.

Casey Crookston Over a year ago

But also, I can't have Planning, Procurment, etc, hard coded. needs to be dynamic.

Casey Crookston · Accepted Answer · 2016-11-04 14:14:03Z

0

I was overthinking this.

    $('#PhaseDD').change(function () {
        var chosenValue = $(this).val();
        $('.ProcessDD').hide();
        if (chosenValue == "")
        {
            $('#DefaultProcess').show();
        }
        else
        {
            $('#' + chosenValue + 'Process').show();
        }
    });

answered Nov 4, 2016 at 14:14

Casey Crookston

14.1k31 gold badges125 silver badges214 bronze badges

Collectives™ on Stack Overflow

Convert a static javascript function to dynamic

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related