I get the data via an AJAX request and it looks like this:
[1,3252325],[2,2323]
The second value is the file id called fId
Now I try to get that id and make another ajax call to find out the corresponding name and use it to override the x-axis description.
Everything works fine, but the problem is that everytime it runs, it deletes all existing names. Therefor, at the end, I am left with only one, the last, dataset that has a custom xAxis description.
What I need is that in the end all datasets have their custom new name for the xAxis.
I tried to search the API.txt but couldnt find anything about it. I did also try for hours to move the code around or rewrite it, but after all I am stuck with the same problem.
Thats the part of the code:
function onDataReceived(series) {
//Add data
if (!alreadyFetched[series.label]) {
alreadyFetched[series.label] = true;
fdata.push(series);
//Get ID
var fId = [series.data[0][0]];
//Get names
$.ajax({
url: 'inc/admin.inc.php?action=get&option=filename&id='+fId+'',
method: 'GET',
dataType: 'html',
success: function(response){
$.plot(fplaceholder, fdata,$.extend(true, {}, foptions, {
//Works, but each time it runs, it removes all previous overrides
xaxis:{ticks:[[fId,response]]}
}));
}
});
}
}
$.ajax({
url: dataurl,
method: 'GET',
dataType: 'json',
success: onDataReceived
});
UPDATE:
I am currently using a "hack" to make this work how I want it, but this is probably only working for my specific needs:
I set the xaxis "show decimal numbers" to false. After the plot is built, I start a timeout function to search all xaxis values (ids in my case) and find the corresponding name with a small ajax call.
I am still looking how to do it directly within the flot code though.
Related
I have two HTML elements: 1). the div element is a multiple select (it is a predefined widget that automatically creates the multiple select element) and 2). a button that triggers onclick event.
On the JS side, there is the global variable 'prev_selection' which is set to empty array for now. The idea of prev_selection is to remember the array of values in the multiple select div element before user clicks the button. I want to remember the value before and after a click to see what selections have been added/removed.
When the button is clicked, 'sendData()' is called. It gets the selected data from the div element. Then, it performs some operations using the prev_selection to know what the newly selected values are (in the beginning everything is newly selected in the div).
I want to find out the additions/deletions in the selected values between user clicks. For that, I update the prev_selection with 'selected_data' that I get from the div element jut after the click.
But this does not work as expected. There is something happening with the asynchronous Ajax call and I am not able to find a better solution for this. Everytime a click happens you had expect that 'prev_selection' remembers the value before the click but instead when I print it using console.log() (as shown in the code) it already gets updated to the latest selections even before reaching the success function (where it is supposed to get updated).
Thanks in advance! And please let me know if further explanation is required.
<!-- multiple select/deselect div -->
<div id="someSelectionID"></div>
<button id="updateButtonID" onclick="sendData()">Click to send</button>
// at first, no data is selected
var prev_selection = [];
function sendData() {
// get the selected data from the div element "someSelectionID"
let selected_data = $('#someSelectionID').val();
// perform some operations on the selected data
// this operation involves the use of prev_selection
// printing prev_selection already has value of updated click
console.log(prev_selection );
$.ajax({
type: "POST",
url: "<some url>",
dataType: 'json',
contentType: 'application/json;charset=UTF-8',
data: JSON.stringify( < some data > ),
success: function(result) {
console.log(result);
/* once the request is successfully done update the
previous selection to what the current selected data is */
prev_selection = selected_data;
}
});
}
Try this
$.ajax({
type: "POST",
url: "<some url>",
dataType: 'json',
contentType: 'application/json;charset=UTF-8',
data: JSON.stringify( < some data > ),
}
}).then(function(response){
if (response.status === 200){
console.log('succeed');
} else {
console.log('failed')
}
});
So it worked by changing this line
prev_selection = selected_data;
to:
prev_selection = Array.from(selected_data);
Because the prev_selection variable kept changing without me updating, it lead me to believe that it was some kind of reference to value instead of value itself. So just using Array.from to do a shallow copy actually worked.
This is my first time attempting filtering and searching the mySQL database. From my research I have found out I need an AJAX call and some PHP query that will help my achieve the filtering I want to achieve.
This is what I want the AJAX search to do:
Have an Apply button. When I click the button I want a URL to get generated and the AJAX call to happen.
Only reload part of the page where the data queried is contented.
So far I have managed to create this:
$("#filteridname").change(function() {
$value=$(this).val();
$.ajax({
type: "get",
url: "{{$myurl}}",
data: {'search':$value},
success: function(data){
$('#data-holder').html(data);
}
});
});
This manages to create the URL one of the filters, but it does not take the other filters into consideration. I also did not manage to create the button. I am guessing you would need a where statement in the PHP to filter the database?
Would anyone be willing to assist me in creating the AJAX call and PHP query for the filters?
In total I have three filters, and when I click a button I want an AJAX call to filter my database with the three filters and return the results without having to reload the whole webpage.
EDIT: Here is my JS AJAX query:
$("#apply").click(function() {
$country=$('#filter-country').val();
$type=$('#filter-type').val();
$year=$('#filter-year').val();
$.ajax({
type: "GET",
url: "{{$launchsitename->site_code}}",
data: {'country':$country, 'type':$type, 'year':$year},
success: function(data) {
$('#data-holder').append(data);
}
});
});
Now I just need to create a PHP query.
you can use propriety called .Append() instead of .html() ,also here you are getting one element value on change , if you want to get the three of them at one button click , you can make it the same way that you got the val of the first one , and just adding it to the request and handle it back in PHP to divide and execute each one or just pass the three of them to your procedure , depends on what you have
$("#filteridname").change(function() {
$value=$(this).val();
$.ajax({
type: "get",
url: "{{$myurl}}",
data: {'search':$value},
success: function(response){
$('#data-holder').append(response);
}
});
});
Read about .append()
I have an SVG with this code for some shapes (its a map)
onclick="top.traeDatos(evt.target.id);"
in the html file I have:
function traeDatos(region){
alert(region);
}
So, I click on a region, I have the alert window with the region name and the variable in the html file. Thats great
Now I want that the click on the map shows a popup with more information i'll get using ajax from multiple databases trough a file called, for example "getDetails.php".
Im new in js and ajax, I know how to make a standard call in ajax to get some information given an id (or name in this case), I know how to change the value of a text field to the text I get trought the ajax call...but I dont understand how to call ajax and show a tooltip from that javascript code in the SVG or the one in html.
Im not sure too of what tolltip to use, but one problem at the time ;)
Can you enlighten me a little.
Thanks!
Here's a start:
function traeDatos(region){
var domn = document.domain;
document.domain = domn;
var detURL = "http://" + domn + "/getDetails.php";
$.ajax({
url: detURL,
type: 'POST',
data: {
region: region
},
cache: false,
success: function(json){
var data = jQuery.parseJSON(json);
//using PHP's json_encode() you can return an array
//in the example below 'info' is an item in the array
$('#insert_place').val(data.info);
}
});
}
Let me know if you have some problem with that.
Background
i'm using jquery.sparkline to produce Pie Charts. The data for the Pie Chart is contained in an array.
When the page is first loaded a web-service is called (using .ajax) to get the data, the callback specified there takes the received data and updates the array associated with the pie chart.
That same update process is invoked when a dropdown on the screen changes value.
Situation
If I set the .ajax call to asynch=false this all works fine.
If I set the .ajax call to asynch=true the results shown in the pie are always 'one refresh behind'. By this I mean there's no pie initially and then when the dropdown is changed the pie is rendered as it should have been initially.
Code
$.ajax({
type: "GET",
contentType: "application/json; charset=utf-8",
url: requestURL,
async: true ,
success: function (data) { successCallback(data); },
error: function (data) { failureCallback(data); }
});
Help?
Anyone out there recognise this problem ?
Options
I've been looking at variations on the Observer pattern to monitor a change to the array and the (not sure how) persuade the jquery.sparkline object to redraw itself but this seems crazy and I'm sure I must be overlooking something much more straightforward.
Thanks to Gareth and his sample code I was able to see what I was doing wrong (which wasn't anything to do with jquery.sparkline.
I had some functions like this :
function RefreshPieChart(){
//First call managePieDataFetch()
//to kick off the web-service request
managePieDataFetch();
//now reinitialise the jquery.sparkline
//pie charts on the basis that the
//array variable initialised in
//pieDataFetchCallBack() has the newest
//data in it.
//
//.... It hasn't !
}
function managePieDataFetch(){
//invoke the .ajax call and
//provide function pieDataFetchCallBack() as
//a call back function
}
function pieDataFetchCallBack(){
//post process the data
//returned from a successful
//ajax call. Place the results
//into an array variable at
//script scope
}
I'd need to see a more complete example to determine where the problem is, but using async: true works fine for me.
Here's a link to a very simple working example: http://omnipotent.net/jquery.sparkline/ajaxtest.html
The source for the ajax side is here:
http://omnipotent.net/jquery.sparkline/ajax.phps
If your chart is hidden (ie. display: none) at the time .sparkline() is actually called then you may need to call $.sparkline_display_visible() at the point the chart is made visible to force it to be rendered at that point.
I am using the ThreeDots jQuery pulgin and it works great. I am having trouble using it on an ajax success event.
$.ajax({
type: "POST",
url: 'url',
success: function(value) {
$("#content").append(value);
$(".ellipsis").ThreeDots({max_rows:3});
}
});
I load some new data and append the new data to a div (this works great). When I call the ThreeDots function from inside the success event it takes about 1 minute to work and the browser is not responsive during this time. There are .ellipsis spans returned in the new data.
Is there a better way to be doing this? Is there something fundamentally wrong with my approach?
Update
#Nick, Thanks for your answer. I used this and I went one step further. The above still reruns on every ellipsis in content not just the newly returned ellipsis results.
I now do this:
$(value).appendTo("#content").find('.ellipsis' + document.getElementById('hidPage').value).ThreeDots({max_rows:3});
$("#hidPage").val(($("#hidPage").val()-0) + 1);
You can run the .ThreeDots() plugin only on the .ellipsis elements in the returned response, instead of re-running it on all of them, like this:
$.ajax({
type: "POST",
url: 'url',
success: function(value) {
$(value).appendTo("#content").find('.ellipsis').ThreeDots({max_rows:3});
}
});
You can't chain it the reverse way because .ThreeDots() isn't chainable (it returns a custom object), but the above version should work fine.