Mixing
AJAX Data Won't Load in Multi Select Box during Search
0
I've created a search box for keywords and I want to try and use JSON/AJAX to search for keywords to be entered.
I've tried, in vain, for the past 2 hours trying to get this to work and I know I'm missing something but can't put my finger upon it. I just get a message, Results Could not be loaded (this message comes from the cdnjs for select2). When I load the keyword_search.php page, I get the results in expected format (see code below):
I've created a multi-select box
<select class="js-example-basic-multiple" multiple="multiple" name="img_keywords" style="width:100%">
<?php
$path = $_SERVER['DOCUMENT_ROOT'];
$path .= "/includes/connections/mysqli.php";
require($path);
$sql = "SELECT *
FROM tbl_photos_keywords_all
GROUP BY pa_keyword
";
$data = $link->query($sql);
$keywords = $row['img_keywords'];
$selected = explode(',', $keywords);
while($row2 = $data->fetch_assoc()) {
$isSelected = in_array($row2['pa_keywordID'], $selected) ? "selected='selected'" : "";
echo "<option {$isSelected} value='{$row2['pa_keywordID']}'>{$row2['pa_keyword']}</option>";
}
$link->close();
?>
</select>
And my javascript code is:
<script>
$(document).ready(function() {
$('.js-example-basic-multiple').select2({
tags: true,
tokenSeparators: [","],
createSearchChoice: function (term, data) {
if (term.trim().length > 0) {
if ($(data).filter(function () {
return this.text.toLowerCase().localeCompare(term.toLowerCase()) === 0;
}).length === 0) {
return {
id: term,
text: term,
isNew: true // this is necessary to check if the item is newly added or not
};
}
}
},
multiple: true,
minimumInputLength: 1,
allowClear: true,
ajax: {
url: "keyword_search.php",
dataType: 'json',
type: "GET",
quietMillis: 50,
data: function (term) {
return {
term: name
};
},
results: function (data) {
return {
results: $.map(data, function (item) {
return {
id: item.id,
text: item.name
}
})
};
}
}
}
);
});
</script>
My keyword_search.php file:
<?php
$path = $_SERVER['DOCUMENT_ROOT'];
$path .= "/includes/connections/mysqli.php";
require($path);
$sql = "SELECT *
FROM tbl_photos_keywords_all
ORDER BY pa_keyword
";
$data = $link->query($sql);
$dataPoints = array();
while($row2 = $data->fetch_assoc()) {
$point = array("id" => $row2['pa_keywordID'], "name"=> htmlspecialchars($row2['pa_keyword']));
array_push($dataPoints, $point);
}
echo json_encode($dataPoints, JSON_NUMERIC_CHECK);
$link->close();
?>
php jquery ajax jquery-select2
asked Jan 2 at 19:01
Daniël CronkDaniël Cronk
255
|
show 3 more comments
0
I've created a search box for keywords and I want to try and use JSON/AJAX to search for keywords to be entered.
I've tried, in vain, for the past 2 hours trying to get this to work and I know I'm missing something but can't put my finger upon it. I just get a message, Results Could not be loaded (this message comes from the cdnjs for select2). When I load the keyword_search.php page, I get the results in expected format (see code below):
I've created a multi-select box
<select class="js-example-basic-multiple" multiple="multiple" name="img_keywords" style="width:100%">
<?php
$path = $_SERVER['DOCUMENT_ROOT'];
$path .= "/includes/connections/mysqli.php";
require($path);
$sql = "SELECT *
FROM tbl_photos_keywords_all
GROUP BY pa_keyword
";
$data = $link->query($sql);
$keywords = $row['img_keywords'];
$selected = explode(',', $keywords);
while($row2 = $data->fetch_assoc()) {
$isSelected = in_array($row2['pa_keywordID'], $selected) ? "selected='selected'" : "";
echo "<option {$isSelected} value='{$row2['pa_keywordID']}'>{$row2['pa_keyword']}</option>";
}
$link->close();
?>
</select>
And my javascript code is:
<script>
$(document).ready(function() {
$('.js-example-basic-multiple').select2({
tags: true,
tokenSeparators: [","],
createSearchChoice: function (term, data) {
if (term.trim().length > 0) {
if ($(data).filter(function () {
return this.text.toLowerCase().localeCompare(term.toLowerCase()) === 0;
}).length === 0) {
return {
id: term,
text: term,
isNew: true // this is necessary to check if the item is newly added or not
};
}
}
},
multiple: true,
minimumInputLength: 1,
allowClear: true,
ajax: {
url: "keyword_search.php",
dataType: 'json',
type: "GET",
quietMillis: 50,
data: function (term) {
return {
term: name
};
},
results: function (data) {
return {
results: $.map(data, function (item) {
return {
id: item.id,
text: item.name
}
})
};
}
}
}
);
});
</script>
My keyword_search.php file:
<?php
$path = $_SERVER['DOCUMENT_ROOT'];
$path .= "/includes/connections/mysqli.php";
require($path);
$sql = "SELECT *
FROM tbl_photos_keywords_all
ORDER BY pa_keyword
";
$data = $link->query($sql);
$dataPoints = array();
while($row2 = $data->fetch_assoc()) {
$point = array("id" => $row2['pa_keywordID'], "name"=> htmlspecialchars($row2['pa_keyword']));
array_push($dataPoints, $point);
}
echo json_encode($dataPoints, JSON_NUMERIC_CHECK);
$link->close();
?>
php jquery ajax jquery-select2
asked Jan 2 at 19:01
Daniël CronkDaniël Cronk
255
Where is the message "Results Could not be loaded" coming from? I can't see it in your code.
– Dharman
Jan 2 at 20:04
Try to put a breakpoint in your PHP script and debug your PHP code to see what/how is executed. You can use XDebug with a proper IDE. Also have you enable error reporting and logging?
– Dharman
Jan 2 at 20:07
Hi Dharman - I am not sure where Results Could Not be loaded is coming from. I suspect it is coming from the Select2 js codes. I do have error reporting & logging enabled "globally" in the connections script. I am not throwing any errors and that are "reportable" from what I can see. My selectbox still populates with the values based off of the "select" portion of my code. I will look to see if there is something in the Select2 code that is indicating Results Could Not Be Loaded
– Daniël Cronk
Jan 2 at 20:53
the results message is coming from the CDNjs file for select2 cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.js
– Daniël Cronk
Jan 2 at 20:58
Did you mean to have the lineecho json_encode($dataPoints, JSON_NUMERIC_CHECK);after the while loop by any chance?
– Dharman
Jan 2 at 21:04
|
show 3 more comments
0
0
0
I've created a search box for keywords and I want to try and use JSON/AJAX to search for keywords to be entered.
I've tried, in vain, for the past 2 hours trying to get this to work and I know I'm missing something but can't put my finger upon it. I just get a message, Results Could not be loaded (this message comes from the cdnjs for select2). When I load the keyword_search.php page, I get the results in expected format (see code below):
I've created a multi-select box
<select class="js-example-basic-multiple" multiple="multiple" name="img_keywords" style="width:100%">
<?php
$path = $_SERVER['DOCUMENT_ROOT'];
$path .= "/includes/connections/mysqli.php";
require($path);
$sql = "SELECT *
FROM tbl_photos_keywords_all
GROUP BY pa_keyword
";
$data = $link->query($sql);
$keywords = $row['img_keywords'];
$selected = explode(',', $keywords);
while($row2 = $data->fetch_assoc()) {
$isSelected = in_array($row2['pa_keywordID'], $selected) ? "selected='selected'" : "";
echo "<option {$isSelected} value='{$row2['pa_keywordID']}'>{$row2['pa_keyword']}</option>";
}
$link->close();
?>
</select>
And my javascript code is:
<script>
$(document).ready(function() {
$('.js-example-basic-multiple').select2({
tags: true,
tokenSeparators: [","],
createSearchChoice: function (term, data) {
if (term.trim().length > 0) {
if ($(data).filter(function () {
return this.text.toLowerCase().localeCompare(term.toLowerCase()) === 0;
}).length === 0) {
return {
id: term,
text: term,
isNew: true // this is necessary to check if the item is newly added or not
};
}
}
},
multiple: true,
minimumInputLength: 1,
allowClear: true,
ajax: {
url: "keyword_search.php",
dataType: 'json',
type: "GET",
quietMillis: 50,
data: function (term) {
return {
term: name
};
},
results: function (data) {
return {
results: $.map(data, function (item) {
return {
id: item.id,
text: item.name
}
})
};
}
}
}
);
});
</script>
My keyword_search.php file:
<?php
$path = $_SERVER['DOCUMENT_ROOT'];
$path .= "/includes/connections/mysqli.php";
require($path);
$sql = "SELECT *
FROM tbl_photos_keywords_all
ORDER BY pa_keyword
";
$data = $link->query($sql);
$dataPoints = array();
while($row2 = $data->fetch_assoc()) {
$point = array("id" => $row2['pa_keywordID'], "name"=> htmlspecialchars($row2['pa_keyword']));
array_push($dataPoints, $point);
}
echo json_encode($dataPoints, JSON_NUMERIC_CHECK);
$link->close();
?>
php jquery ajax jquery-select2
asked Jan 2 at 19:01
Daniël CronkDaniël Cronk
255
I've created a search box for keywords and I want to try and use JSON/AJAX to search for keywords to be entered.
I've tried, in vain, for the past 2 hours trying to get this to work and I know I'm missing something but can't put my finger upon it. I just get a message, Results Could not be loaded (this message comes from the cdnjs for select2). When I load the keyword_search.php page, I get the results in expected format (see code below):
I've created a multi-select box
<select class="js-example-basic-multiple" multiple="multiple" name="img_keywords" style="width:100%">
<?php
$path = $_SERVER['DOCUMENT_ROOT'];
$path .= "/includes/connections/mysqli.php";
require($path);
$sql = "SELECT *
FROM tbl_photos_keywords_all
GROUP BY pa_keyword
";
$data = $link->query($sql);
$keywords = $row['img_keywords'];
$selected = explode(',', $keywords);
while($row2 = $data->fetch_assoc()) {
$isSelected = in_array($row2['pa_keywordID'], $selected) ? "selected='selected'" : "";
echo "<option {$isSelected} value='{$row2['pa_keywordID']}'>{$row2['pa_keyword']}</option>";
}
$link->close();
?>
</select>
And my javascript code is:
<script>
$(document).ready(function() {
$('.js-example-basic-multiple').select2({
tags: true,
tokenSeparators: [","],
createSearchChoice: function (term, data) {
if (term.trim().length > 0) {
if ($(data).filter(function () {
return this.text.toLowerCase().localeCompare(term.toLowerCase()) === 0;
}).length === 0) {
return {
id: term,
text: term,
isNew: true // this is necessary to check if the item is newly added or not
};
}
}
},
multiple: true,
minimumInputLength: 1,
allowClear: true,
ajax: {
url: "keyword_search.php",
dataType: 'json',
type: "GET",
quietMillis: 50,
data: function (term) {
return {
term: name
};
},
results: function (data) {
return {
results: $.map(data, function (item) {
return {
id: item.id,
text: item.name
}
})
};
}
}
}
);
});
</script>
My keyword_search.php file:
<?php
$path = $_SERVER['DOCUMENT_ROOT'];
$path .= "/includes/connections/mysqli.php";
require($path);
$sql = "SELECT *
FROM tbl_photos_keywords_all
ORDER BY pa_keyword
";
$data = $link->query($sql);
$dataPoints = array();
while($row2 = $data->fetch_assoc()) {
$point = array("id" => $row2['pa_keywordID'], "name"=> htmlspecialchars($row2['pa_keyword']));
array_push($dataPoints, $point);
}
echo json_encode($dataPoints, JSON_NUMERIC_CHECK);
$link->close();
?>
php jquery ajax jquery-select2
php jquery ajax jquery-select2
asked Jan 2 at 19:01
Daniël CronkDaniël Cronk
255
asked Jan 2 at 19:01
Daniël CronkDaniël Cronk
255
edited Jan 2 at 21:27
Daniël Cronk
asked Jan 2 at 19:01
Daniël CronkDaniël Cronk
255
asked Jan 2 at 19:01
Daniël CronkDaniël Cronk
255
asked Jan 2 at 19:01
Daniël CronkDaniël Cronk
255
255
Where is the message "Results Could not be loaded" coming from? I can't see it in your code.
– Dharman
Jan 2 at 20:04
Try to put a breakpoint in your PHP script and debug your PHP code to see what/how is executed. You can use XDebug with a proper IDE. Also have you enable error reporting and logging?
– Dharman
Jan 2 at 20:07
Hi Dharman - I am not sure where Results Could Not be loaded is coming from. I suspect it is coming from the Select2 js codes. I do have error reporting & logging enabled "globally" in the connections script. I am not throwing any errors and that are "reportable" from what I can see. My selectbox still populates with the values based off of the "select" portion of my code. I will look to see if there is something in the Select2 code that is indicating Results Could Not Be Loaded
– Daniël Cronk
Jan 2 at 20:53
the results message is coming from the CDNjs file for select2 cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.js
– Daniël Cronk
Jan 2 at 20:58
Did you mean to have the lineecho json_encode($dataPoints, JSON_NUMERIC_CHECK);after the while loop by any chance?
– Dharman
Jan 2 at 21:04
|
show 3 more comments
Where is the message "Results Could not be loaded" coming from? I can't see it in your code.
– Dharman
Jan 2 at 20:04
Try to put a breakpoint in your PHP script and debug your PHP code to see what/how is executed. You can use XDebug with a proper IDE. Also have you enable error reporting and logging?
– Dharman
Jan 2 at 20:07
Hi Dharman - I am not sure where Results Could Not be loaded is coming from. I suspect it is coming from the Select2 js codes. I do have error reporting & logging enabled "globally" in the connections script. I am not throwing any errors and that are "reportable" from what I can see. My selectbox still populates with the values based off of the "select" portion of my code. I will look to see if there is something in the Select2 code that is indicating Results Could Not Be Loaded
– Daniël Cronk
Jan 2 at 20:53
the results message is coming from the CDNjs file for select2 cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.js
– Daniël Cronk
Jan 2 at 20:58
Did you mean to have the lineecho json_encode($dataPoints, JSON_NUMERIC_CHECK);after the while loop by any chance?
– Dharman
Jan 2 at 21:04
Where is the message "Results Could not be loaded" coming from? I can't see it in your code.
– Dharman
Jan 2 at 20:04
Where is the message "Results Could not be loaded" coming from? I can't see it in your code.
– Dharman
Jan 2 at 20:04
Try to put a breakpoint in your PHP script and debug your PHP code to see what/how is executed. You can use XDebug with a proper IDE. Also have you enable error reporting and logging?
– Dharman
Jan 2 at 20:07
Try to put a breakpoint in your PHP script and debug your PHP code to see what/how is executed. You can use XDebug with a proper IDE. Also have you enable error reporting and logging?
– Dharman
Jan 2 at 20:07
Hi Dharman - I am not sure where Results Could Not be loaded is coming from. I suspect it is coming from the Select2 js codes. I do have error reporting & logging enabled "globally" in the connections script. I am not throwing any errors and that are "reportable" from what I can see. My selectbox still populates with the values based off of the "select" portion of my code. I will look to see if there is something in the Select2 code that is indicating Results Could Not Be Loaded
– Daniël Cronk
Jan 2 at 20:53
Hi Dharman - I am not sure where Results Could Not be loaded is coming from. I suspect it is coming from the Select2 js codes. I do have error reporting & logging enabled "globally" in the connections script. I am not throwing any errors and that are "reportable" from what I can see. My selectbox still populates with the values based off of the "select" portion of my code. I will look to see if there is something in the Select2 code that is indicating Results Could Not Be Loaded
– Daniël Cronk
Jan 2 at 20:53
the results message is coming from the CDNjs file for select2 cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.js
– Daniël Cronk
Jan 2 at 20:58
the results message is coming from the CDNjs file for select2 cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.js
– Daniël Cronk
Jan 2 at 20:58
Did you mean to have the line
echo json_encode($dataPoints, JSON_NUMERIC_CHECK); after the while loop by any chance?– Dharman
Jan 2 at 21:04
Did you mean to have the line
echo json_encode($dataPoints, JSON_NUMERIC_CHECK); after the while loop by any chance?– Dharman
Jan 2 at 21:04
|
show 3 more comments
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54011775%2fajax-data-wont-load-in-multi-select-box-during-search%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54011775%2fajax-data-wont-load-in-multi-select-box-during-search%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Where is the message "Results Could not be loaded" coming from? I can't see it in your code.
– Dharman
Jan 2 at 20:04
Try to put a breakpoint in your PHP script and debug your PHP code to see what/how is executed. You can use XDebug with a proper IDE. Also have you enable error reporting and logging?
– Dharman
Jan 2 at 20:07
Hi Dharman - I am not sure where Results Could Not be loaded is coming from. I suspect it is coming from the Select2 js codes. I do have error reporting & logging enabled "globally" in the connections script. I am not throwing any errors and that are "reportable" from what I can see. My selectbox still populates with the values based off of the "select" portion of my code. I will look to see if there is something in the Select2 code that is indicating Results Could Not Be Loaded
– Daniël Cronk
Jan 2 at 20:53
the results message is coming from the CDNjs file for select2 cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.js
– Daniël Cronk
Jan 2 at 20:58
Did you mean to have the line
echo json_encode($dataPoints, JSON_NUMERIC_CHECK);after the while loop by any chance?– Dharman
Jan 2 at 21:04