vendredi 17 août 2018

Checkbox only updates once

When a user clicks on a topic, they are met with a jquery dialog offering the user a few options. If the user clicks Assessment Management a method is called, which eventually brings back a boolean.

My aim is that if the boolean returns a 'Yes', the checkbox will be checked. Strangely, this works perfectly fine on the first attempt, but if you close the dialog and then reopen it, the switch will always be marked as false, even if the server returns 'Yes'.

This is my code - first, ask the user what they wish to do:

function confirmation(topic, topicPIN){

//Confirmation dialog 

 var dialog = $('<p>What would you like to do?</p>').dialog({

     "title": "Confirmation",

        buttons: {
            "Assessement Management": function(){getSelectedTopic(topic, topicPIN); dialog.dialog('close');},
            "Edit Topic Name": function() {editTopicName(topic, topicPIN); dialog.dialog('close');},
            "Edit this Topic's Questions": function() {confirmSelectTopic(topic, topicPIN); dialog.dialog('close');},
            "Delete this Topic":  function() {confirmDeleteTopic (topic, topicPIN); dialog.dialog('close');},
            "Cancel":  function() {
                dialog.dialog('close');
            }
        }
    });
}

Then get the topic details

function getSelectedTopic (topic, topicPIN){    


 var topicNameInfo = {

            "topic" : topic,
            "topicPIN" : topicPIN,
            "getSelectedTopic" : true
        };   


    $.ajax({
        url: 'questionManagement.php',
        type: 'POST',
        data: topicNameInfo,  
        success: function (data) {
          console.log(data) 

          assessementDialog(data)


        },
        error: function(data) {
        alert('error');
        }
    });  

}

After the selected topic has returned the topic details, show the new dialog with the toggle checkbox.

function assessementDialog(data){

var json = $.parseJSON(data);

//Remove duplicates
isTopicMarkedAssessment = [...new Set(json.question.assessmentQuestion.map(a => a))];
topic = [...new Set(json.question.questionTopicList.map(a => a))];
topicPIN = [...new Set(json.question.question_pin.map(a => a))];


//Confirmation dialog asking if the user wants to delete the topic or edit the topics questions
 var dialog = $('<p>If studuents are to take the topic: <b>' + topic  +',</b> as part of an assessement, please check the switch below.</p>').dialog({

     "title": "Assessment Topic",

     //Below is needed to add the checkbox to the dialog menu
      create: function (e, ui) {

        var pane = $(this).dialog("widget").find(".ui-dialog-buttonpane")
        $('<li class="list-group-item">Assessment Topic<label class="switch"><input type="checkbox" id="myCheck" class="success" onclick="updateAssessementTopic(\''+ topic + '\',\'' + topicPIN + '\')"><span class="slider round"></span></label>').prependTo(pane)

        updateCheckBox(isTopicMarkedAssessment);
        },

        buttons: {
            "Cancel":  function() {
                 $('input:checkbox').removeAttr('checked'); 
                dialog.dialog('close');
            }
        }
    }); 

}

The below function simply checks if the returned value is Yes and if so, marked the toggle checkbox as true.

function updateCheckBox(isTopicMarkedAssessment){

console.log(isTopicMarkedAssessment)

if(isTopicMarkedAssessment[0].includes("Yes")){

    document.getElementById("myCheck").checked = true;

    }else{

    document.getElementById("myCheck").checked = false;

    }
}

Just to clarify, when I load the page for the first time and click on a topic which shows the confirmation dialog, from here, everything works perfectly. If I click on Assessment Management button, the expected results from the external DB are loaded in and the checkbox is updated accordingly.

However, after closing the dialog box and clicking on the same or another topic, although the correct data is loaded in from the external DB, the toggle checkbox is never updated. Even if you toggle it back and forth, the console log always shows the checkbox as false.

I believe the issue is in the function updateCheckBox, I am assuming it isn't getting a reference to the jquery dialog, but I am not sure how to fix it.

If anyone can offer some guidance to resolve the problem, I would appreciate it.




Aucun commentaire:

Enregistrer un commentaire