Develop Reference

Something wrong with ajax call, cannot figure out what

Trying to make a simple ajax call but I'm not able to console.log the response.
Navigating to the url in browser gives back data, but still.
I'm not seeing the error alert either, so it should not be failing?
Code:
var $searchBox = $('#search');
var $searchButton = $('#button');
$searchButton.on('click', function(){
var url = "https://en.wikipedia.org/w/api.php?action=opensearch&search="
+ $searchBox.val() + "&format=json&callback=?";
console.log(url);
$.ajax({
type: 'GET',
url: url,
async: false,
dataType: 'json',
success: function(data){
console.log(data);
},
error: function(errorMessage){
alert('Error');
}
});
});

To prevent click default redirection, you can use e.preventDefault() event.
var $searchBox = $('#search');
var $searchButton = $('#button');
$searchButton.on('click', function(e){
e.preventDefault();
var url = "https://en.wikipedia.org/w/api.php?action=opensearch&search="
+ $searchBox.val() + "&format=json&callback=?";
console.log(url);
$.ajax({
type: 'GET',
url: url,
async: false,
dataType: 'json',
success: function(data){
console.log(data);
},
error: function(errorMessage){
alert('Error');
}
});
});

How to make a search with jquery and the wikipedia API

I have read a lot of posts, old, new and the wikipedia documentation.
I have this request that works itself and in the sanbox:
https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch=einstein&format=json
https://www.mediawiki.org/wiki/Special:ApiSandbox#action=query&format=json&list=search&srsearch=einstein
but when I try to use it in a javascript script, I can not get the data:
I tried both ajax and Json:
here is the code I used:
a 'GET' request with ajax :
code markup sucks
function build_wiki_search_url(pattern) {
var base_url = "https://en.wikipedia.org/w/api.php";
var request_url = "?action=query&format=json&list=search&srsearch=";
var url = base_url + request_url + pattern;
return url;
}
$(document).ready(function() {
$("#doit").click(function() {
console.log("Submit button clicked");
var pattern = $("#search").val();
var url = build_wiki_search_url(pattern);
console.log(url);
$.ajax( {
type: "GET",
url: url,
dataType: 'jsonp',
success: function(data) {
console.log(data);
},
error: function(errorMessage) {
console.log("damnn");
}
});
console.log("end");
});
})
a 'POST' request with ajax following the wikipedia documentation
var base_url = "https://en.wikipedia.org/w/api.php";
$.ajax( {
contentType: "application/json; charset=utf-8",
url: base_url,
data: {
action: 'query',
list: 'search',
format: 'json',
srsearch: 'einstein',
origin: '*',
},
dataType: 'json',
type: 'POST',
success: function(data) {
console.log("ok");
// do something with data
},
error: function(errorMessage) {
console.log("damnn");
}
} );
and a getJSON try:
//getJSON atempt.
console.log(url + '&callback=?');
$.getJSON(url + '&callback=?', function(json) {
console.log("ok");
});
Here is the output in my console:
Submit button clicked
https://en.wikipedia.org/w/api.php?action=query&format=json&list=search&srsearch=einstein
script.js
end

The problem comes in fact from the html:
<form >
<input type="text" id="search"> <button id="doit"> Search!!</button>
</form>
Since the button is in a form, this button normal behavior is to generate a submit action. So the idea is to disable this normal behavior with:
$("#doit").click(function(e) {
e.preventDefault();
The full working code :
function build_wiki_search_url(pattern) {
var base_url = "https://en.wikipedia.org/w/api.php";
var format = "&format=json";
var request_url = "?action=query&format=json&list=search&srsearch=";
var url = base_url + request_url + pattern;
return url;
}
$(document).ready(function() {
$("#doit").click(function(e) {
e.preventDefault();
console.log("Submit button clicked");
var pattern = $("#search").val();
var url = build_wiki_search_url(pattern);
$.ajax( {
type: "GET",
url: url,
dataType: 'jsonp',
success: function(data) {
console.log(data.query.searchinfo.totalhits);
},
error: function(errorMessage) {
console.log("damnn");
}
});
});
})

Clearing uikit html editor

i am trying to clear the content of my uikit html editor after saving data of when closing/cancelling my modal.
i tried clearing it with these codes:
$("#description").val('');
$('#description').attr('data-uk-htmleditor');
$.UIkit.htmleditor('#description', { /* options */ });
but it's still not working. does anyone here can help me?
EDIT:
here's my other codes for pulling the data from the database:
function editTask(id){
key = id;
s_type = 'u';
console.log(s_type);
enableForm('#task');
$('#btn-save-task').hide();
$('#btn-save-edited-task,#btn-cancel-task').show();
$.ajax({
type: "GET",
url: baseUrl+"/opportunities/getInfo/task/"+id,
async : true,
data : {
getType : "getTask"
},
dataType: 'json',
error : function(req,error){
notify(req.statusText,'warning');
},
success: function(data){
$("#taskDescription").val(data.description);
$('#taskDescription').attr('data-uk-htmleditor');
$.UIkit.htmleditor('#taskDescription', { /* options */ });
}
});
}

Try this:
var task = '';
function editTask(id) {
key = id;
s_type = 'u';
console.log(s_type);
enableForm('#task');
$('#btn-save-task').hide();
$('#btn-save-edited-task,#btn-cancel-task').show();
$.ajax({
type: "GET",
url: baseUrl + "/opportunities/getInfo/task/" + id,
async: true,
data: {
getType: "getTask"
},
dataType: 'json',
error: function(req, error) {
notify(req.statusText, 'warning');
},
success: function(data) {
task = data.description;
}
});
}
$.UIkit.htmleditor('#taskDescription', { /* options */ });
//Get a reference to the CodeMirror editor
var editor = $('.CodeMirror')[0].CodeMirror;
//You can then use it as you wish
editor.setValue(task);

How to fire anothing action before a each loop (with ajax) complete

I have try for the following for a long time and i have no more idea now, anyone can help me please.
I just want to reload the current page after add items to the cart, I have try the stupid way by count, promise then and other else, but all fail.
The problem is... the page already reloaded before the item add to the cart...!
The following is my sample:-
$("#Button").click(function () {
var CurrentURL = window.location.href;
var SelectedProduct = $('.SelectedProduct').length;
$('.SelectedProduct').each(function () {
$.ajax({
url: "/ShoppingCart/AddToCart",
data: { id: $(this).attr('id')},
datatype: "json"
});
--SelectedProduct
if (SelectedProduct === 0) {
window.location.href = CurrentURL;
$('#CartListContent').slideDown()
}
});
});
$("#Button").click(function () {
var CurrentURL = window.location.href;
var promise = $('.SelectedProduct').each(function () {
$.ajax({
url: "/ShoppingCart/AddToCart",
data: { id: $(this).attr('id')},
datatype: "json"
});
promise.done(function () {
window.location.href = CurrentURL;
$('#CartListContent').slideDown()
});
});
});
}
});

I don't know how much control you have over the server side code, but you should let the API handle adding an array of products to cart, that would make it so much faster and simpler. http://jsfiddle.net/hqn3eufa/
$("#Button").on('click', function () {
var selected_products_ids = [];
$('.SelectedProduct').each(function () {
selected_products_ids.push(this.id);
});
$.ajax({
url: "/ShoppingCart/AddToCart",
data: { ids: selected_products_ids },
datatype: "json",
success: function() {
window.location.reload();
}
});
});

You can make use of the success callback of ajax and the reload function:
$.ajax({
url: "/ShoppingCart/AddToCart",
data: { id: $(this).attr('id')},
datatype: "json",
success:function(data){
window.location.reload();
}
});

your page reload before the add to cart completes.
use a callback to find out when the add to cart is completed:
$("#Button").click(function () {
var CurrentURL = window.location.href;
var promise = $('.SelectedProduct').each(function () {
$.ajax({
url: "/ShoppingCart/AddToCart",
data: { id: $(this).attr('id')},
datatype: "json"
}).success(function () {
window.location.href = CurrentURL;
$('#CartListContent').slideDown()
});
});
});
}
});

Now i use the following way, it is stupid but work:-
Anyother suggestion..!?
var SelectedProduct = $('.SelectedProduct').length;
$('.SelectedProduct').each(function () {
$.ajax({
url: "/ShoppingCart/AddToCart",
data: { id: $(this).attr('id')},
datatype: "json",
success: function (data) {
--SelectedProduct
if (SelectedProduct == 0) {
window.location.reload()
}
}
});
});

Javascript. Run a AJAX flow after current AJAX stops

So I have a simple javascript that loads more comments from a database when the user clicks More.
Now I would like to extend this script so that it first populates the SQL database before it starts letting users view the comments. And I feel that I'm on the right track but I can't get it to work.
First the code that does WORK.
$(function() {
$('.load_more').live("click",function() {
var photoid = document.getElementById('photoid').value;
var lastid = document.getElementById('lastid').value;
if(lastid!='end'){
$.ajax({
type: "POST",
url: "/more_comments_ajax.php",
data: {
photoid : photoid,
lastid : lastid
},
beforeSend: function() {
$('a.load_more').html('<img src="/images/loading.gif" />');//Loading image during the Ajax Request
},
success: function(html){//html = the server response html code
$("#more").remove();//Remove the div with id=more
$("div#updates").append(html);//Append the html returned by the server .
}
});
}
return false;
});
});
Now I feel that this should be possible to expand like this.
$(function() {
$.ajax({
type: "POST",
url: "/populate_sql.php",
beforeSend: function() {
$('a.load_more').html('<img src="/images/loading.gif" />');//Loading image during the Ajax Request
},
sucess: $('.load_more').live("click",function() {
var photoid = document.getElementById('photoid').value;
var lastid = document.getElementById('lastid').value;
if(lastid!='end'){
$.ajax({
type: "POST",
url: "/more_comments_ajax.php",
data: {
photoid : photoid,
lastid : lastid
},
beforeSend: function() {
$('a.load_more').html('<img src="/images/loading.gif" />');//Loading image during the Ajax Request
},
success: function(html){//html = the server response html code
$("#more").remove();//Remove the div with id=more
$("div#updates").append(html);//Append the html returned by the server .
}
});
}
return false;
});
});
});
Where am I loosing it?

You can use this function. I used it before and it works great. after first callback receives then it send second request.
(function($)
{
var ajaxQueue = $({});
$.ajaxQueue = function(ajaxOpts)
{
var oldComplete = ajaxOpts.complete;
ajaxQueue.queue(function(next)
{
ajaxOpts.complete = function()
{
if (oldComplete) oldComplete.apply(this, arguments);
next();
};
$.ajax(ajaxOpts);
});
};
})(jQuery);
use it like the normal ajax. sample:
$.ajaxQueue({ url: 'x.php', data:{x:x,y:y}, type: 'POST',
success: function(respond)
{
.....
}
});
so you can check if there was a callback from first ajax then send second request.
hope it helps you.

Thanks for the answer. It was not exactly what I needed but it gave me an idea and the solution that works for me was 2 javascripts working together. I'm leaving the code here if someone needs something similar.
<script type="text/javascript">
jQuery(function($){
var pid = '<?php echo $ids['0']; ?>';
$.ajax({
type: "POST",
url: "/prepare_sql.php",
data: "pid="+ pid,
beforeSend: function() {
$('div#updates').html('<img src="/images/loading.gif" />');//Loading image during the Ajax Request
},
success: function(html) {
$("div#updates").replaceWith(html);
}
});
});
</script>
<script type="text/javascript">
$('.load_more').live("click",function() {
var photoid = document.getElementById('photoid').value;
var lastid = document.getElementById('lastid').value;
if(lastid!='end'){
$.ajax({
type: "POST",
url: "/more_comments_ajax.php",
data: {
photoid : photoid,
lastid : lastid
},
beforeSend: function() {
$('a.load_more').html('<img src="/images/loading.gif" />');//Loading image during the Ajax Request
},
success: function(html){//html = the server response html code
$("#more").remove();//Remove the div with id=more
$("div#updates").append(html);//Append the html returned by the server .
}
});
}
return false;
});
</script>