Modifying Selectize Ajax data in real-time

How can the student_id be changed each time the modal is opened?

This is the code:

$('#relationshipModal input[name=existing_user]').selectize({
    valueField: 'id',
    searchField: 'name',
    options: [],
    create: false,
    maxItems: 1,
    createOnBlur: true,
    render: {
        item: function(item, escape) {
            return '<div>' +
                '<span class="name">' + 
                    escape(item.first_name + " " + item.last_name) + 
                '</span>'+
            '</div>';
        },
        option: function(item, escape) {
            var label = item.first_name + " " + item.last_name;
            return '<div>' +
                (label ? '<span class="caption">' + escape(label) + '</span>' : '') +
            '</div>';
        }
    },
    load: function(query, callback) {
        if (!query.length || query.length < 2) return callback();
        $.ajax({
            url: '{{ URL::route('json/searchGuardianAndStudents') }}',
            type: 'GET',
            dataType: 'JSON',
            data: { name : query , student_id: data.student.id},
            error: function() {
                callback();
            },
            success: function(res) {
                callback(res);
                console.log(res);
            }
        });
    }
});

When the modal is first opened, the student_id is set to 422. However, when it is closed and reopened with a different ID, it still displays student_id = 422 instead of the new ID.

Answer №1

Execute the following code when the modal is loaded:

var $dropdown = $("#input_field").selectize();
var dropdownInstance = $dropdown[0].selectize;
dropdownInstance.setValue(dropdownInstance.search("Initial Value").items[0].id);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

issue with logging in, token verification failed

My current project involves creating a login system with authorization, but for some reason the token is not being transferred properly. const path = require('path'); const express = require('express'); const bodyParser = require(' ...

What is preventing jQuery from returning a string or text value?

index.html <button id="fetchGroupers">Fetch Groupers</button> <script type="text/javascript"> $(document).ready(function () { $("#fetchGroupers").click(function () { $.ajax({ type ...

What could be the reason for REQ.BODY being consistently devoid of any

I understand that there are already several solutions marked as working, but I am struggling to get it to work in my specific case. Please refrain from marking it as answered. Here is the scenario I'm facing: AJAX CLIENT-SIDE var data ={}; data.test ...

Showing nested arrays in API data using Angular

I would like to display the data from this API { "results": [ { "name": "Luke Skywalker", "height": "172", "mass": "77", & ...

Application experiencing server error when updating MongoDB data

I have encountered an issue while trying to update/modify data that has already been uploaded in a reactjs project using mongoDB as the database. Whenever I attempt to update the data, an error is displayed. How can this problem be resolved? https://i.sta ...

Terminating a function during execution in JavaScript/TypeScript

Currently, I am in the process of developing a VSCODE extension using TypeScript. Within this extension, there is a particularly large function that is frequently called, but only the final call holds significance. As a solution, I am attempting to elimina ...

Tips on passing methods to form provider with unique name for managing nested forms

As discussed in #60277873, when creating nested forms, it is necessary to rename the methods of the nested form as follows: const { register, formState: { errors }, handleSubmit, } = useForm({ mode: "onBlur", }); This code sh ...

Integrating Asp.Net Core for server-side functionality with React for client-side interactions

I have started a simple Asp.Net default project in Visual Studio 2015 using the template: ASP.NET Core Web Application (.NET Core) / Web Application, No Authentication. Following that, I created a package.json file to load all the necessary packages for R ...

Transform basic text into nested JSON structure with JavaScript

There is a plain string in my possession which contains various conditions. const optionString = '{2109} AND ({2370} OR {1701} OR {2702}) AND {1234} AND ({2245} OR {2339})'; The goal is to transform this string into an object structured as foll ...

What is preventing me from accessing the php page using the AJAX request?

I am encountering an issue with my HTML and PHP code. I am successfully able to receive the mail.value in txt, but facing a problem during the AJAX call as it doesn't even go into the error function. I need assistance in identifying and rectifying th ...

Error encountered while using Jquery's .each() method on a DOM element and attempting to

Trying to utilize the each() function on my DOM to dynamically retrieve a field, I encountered an issue with the following code: var new_entry = new Object(); $('div[name="declaration-line-entry"]').each(function () { new_entry.name = $(this ...

Issue with resetting input forms in ReactJS

I have a simple form that seems to be clearing the rest of the fields every time I try to fill it. Additionally, validation errors are being displayed below each field instead of just one. How can this issue be fixed? Here is how the form looks before any ...

VS Code sees JavaScript files as if they were Typescript

I have recently delved into the world of Typescript and have been using it for a few days now. Everything seems to be working smoothly - Emmet, linting, etc. However, I've encountered an issue when trying to open my older JavaScript projects in VS Cod ...

How can you save the output of console.log in JavaScript to a variable and then use that variable in HTML?

Here is the code snippet I've been working on. The first part consists of JavaScript code, and the second part includes HTML. $('#table').on('check.bs.table', function (e, row) { checkedRows.push({First: row.fname, Second: row ...

determining the quantity within a collection of items

Is there a way to determine the order of an element within a set when clicked? For example, if I click on the third element in a set, can I get it to display as three? Check out this jsfiddle example for reference: http://jsfiddle.net/vtt3d/ ...

Sharing Data Between Controllers in AngularJS

I am faced with a challenge involving two Angular controllers: function Ctrl1($scope) { $scope.prop1 = "First"; } function Ctrl2($scope) { $scope.prop2 = "Second"; $scope.both = Ctrl1.prop1 + $scope.prop2; //Ideally, I would like to achieve t ...

Dynamic creation of HTML/Ionic checkbox leads to ng-change not binding properly

Recently, my team and I have been actively engaged in the process of handling an XML file and dynamically constructing a settings page based on the information extracted from it. Allow me to present an illustration of how these elements are dynamically cre ...

Tips for detecting successful file downloads from the client side using Mean/AngularJS

I have developed a chat application with the capability to send files through chat windows. I am now looking to automatically delete files from the server once they have been successfully downloaded by clients. My technology stack includes MEAN. rou ...

Trigger an event upon completion of a write operation in AngularJS

I want to trigger a search after my user finishes typing (without hitting enter) in AngularJS. Here is a simplified version of my HTML: <div ng-class="input-append" ng-controller="searchControl"> <input type="text" ng-model="ajaxSearch" ng-cha ...

Vite build error: TypeError - Unable to access properties of null while trying to read 'useContext'

I used the following component imported from material-ui : import Paper from '@mui/material/Paper'; After running npm run build followed by npm run preview, I encountered an error in the console: Uncaught TypeError: Cannot read properties of n ...