Sign In Register

How can we help you today?

Start a new topic

What is the best way to pass updated input data to JavaScript quadrant (Dynamic Forms)

Lately I have been making admin panel for our game skills with dynamic forms. I have been having problems passing updated input data to Javascript quadrant. I'm trying to modify this experienceNeeded field which is in levels array.

First i tried to implement it by getting its updated value from form in JavaScript, but it returned the default value (value which is placed on that input when user come to this screen) and not the one user have been updated. The fact that experienceNeeded is in that array made it pretty hard to handle. Can i even get form data somehow if it is iterated from array?

Now I have been trying to implement it by passing updated experienceNeeded as a parameter in submit, but it returns default value again. I guess it is because it gives those submit parameters at the start?

What would be the best way to implement this?

This is my Handlebars quadrant:
<gs-form snippet="skill_details_levels?action=update&skillId={{skill.skillId}}" target="details_levels__{{skill.skillId}}">
<gs-title-block title="Skill Details" padding="10">
    {{#each skill.skillData.levels}}
    <gs-row>
        <gs-title-block title="Level {{level}}">
            <gs-row>
                <gs-col width="1" align="left">
                    Experience needed
                </gs-col>
                <gs-col width="2" align="left">
                    <input value="{{experienceNeeded}}" type="text" required name="experienceNeeded"/>
                </gs-col>
                <gs-col width="2">
                    <gs-submit snippet="skill_details_levels?action=update&modifyLevel={{level}}&modifyLevelExperienceNeeded={{experienceNeeded}}&skillId={{../skill.skillId}}" 
                             target="details_levels__{{skill.skillId}}">
                        Save Changes
                    </gs-submit>
                </gs-col>
            </gs-row>
            <gs-row>
                <gs-title-block title="Stats" padding="10">
                    {{#each stats}}
                        <gs-row>
                            <gs-col width="1" align="left">
                                Short name
                            </gs-col>
                            <gs-col width="2" align="left">
                                <input value="{{shortName}}" type="text" required name="shortName"/>
                            </gs-col>
                            <gs-col width="1" align="left">
                                Long name
                            </gs-col>
                            <gs-col width="2" align="left">
                                <input value="{{longName}}" type="text" required name="longName"/>
                            </gs-col>
                            <gs-col width="1" align="left">
                                Amount
                            </gs-col>
                            <gs-col width="1" align="left">
                                <input value="{{amount}}" type="text" required name="amount"/>
                            </gs-col>
                            <gs-col width="1" align="left">
                                Unit
                            </gs-col>
                            <gs-col width="2" align="left">
                                <input value="{{unit}}" type="text" required name="unit"/>
                            </gs-col>
                        </gs-row>
                    {{/each}}
                </gs-title-block>
            </gs-row>
        </gs-title-block>
    </gs-row>
    {{/each}}
</gs-title-block>
</gs-form>

 

 This is my JavaScript quadrant:

Spark.setScriptData("skill", SnippetProcessor(Spark.getData().scriptData))

function SnippetProcessor(data){

var form = {};

var skillId = data.skillId;
var skillData = Spark.runtimeCollection("skills").findOne({"_id" : {"$oid" : data.skillId}});

switch(data.action){
    case "view":
        return view(data);
    case "update":
        update(data);
        return view(data);
}

function view(data){
    skillId = data.skillId;
    skillData = Spark.runtimeCollection("skills").findOne({"_id" : {"$oid" : data.skillId}});
    
    form.skillId = skillId;
    form.skillData = skillData;
    
    return form;
}

function update(data){
    var success = false;
    
    if(data.modifyLevel != null) {
        
        Spark.getLog().debug("newExprienceNeeded: " + data.modifyLevelExperienceNeeded + " modifyLevel: " + data.modifyLevel);
        
        if(data.modifyLevelExperienceNeeded != null) {
            success = Spark.runtimeCollection("skills").update({
            "_id" : {"$oid" : data.skillId}, "levels" : {"$elemMatch" : {"level" : Number(data.modifyLevel)}}
            }, 
            {
                "$set": {"levels.$.experienceNeeded": Number(data.modifyLevelExperienceNeeded)}
            },
            true,
            false
            );
        }
    }

    form.updated = true;   
}
}

 

Thanks!

 


Hi Tomi,


Sorry about the late reply, I'll try my best here to help you through your issue.


1. First off why does your <gs-submit> tag contain snippet and target attributes? These should only go on the parent <gs-form> tag as you can see from the documentation here 

2. Why does your target attribute in both <gs-submit> (discussed above) and <gs-form> here contain a handlebar variable? From what I can tell you will always want to return to the same snippet to process the data.

3. Since you are doing this within an array (for each level) you are going to have to give each experienceNeeded a unique name to reference from the javascript side e.g. experienceNeeded_1, experienceNeeded_2, otherwise the value is going to be overwritten by the last element of that name.


Hopefully these point you further in the right direction.

Kind regards,

 - Steve

Thanks for help.

I fixed my things and got it now working if input field look like this:
<input value="{{experienceNeeded}}" type="text" required name="experienceNeeded_{{level}}"/>

 and i use it in javascript like this:

Spark.getLog().debug("newExperienceNeeded: " + data.experienceNeeded_1);

 


I would still like to know if I can somehow put those input fields in array so they could be used like this in javascript:

var level = 1;
Spark.getLog().debug("newExperienceNeeded: " + data.experienceNeeded[level]);

 

I tried doing that by setting my input field like this:

<input value="{{experienceNeeded}}" type="text" required name="experienceNeeded[{{level}}]"/>

 But that didnt work :)

 

Thanks!

Hi Tomi,


Glad we could help you with your issues. Unfortunately I don't think it is possible to have a group of input fields from a form come through as an array, it would be possible to parse them into an array first of all before further processing though. Your original method in your last post would be our recommended way to achieving this.


Kind regards,

 - Steve

Alright. I will do it that way then :)

Thanks for your help Steve!


 

Login to post a comment