Why is my jQuery DataTable plugin not working as desired? - jquery-plugins

In response to my question here, I was referred to "jquery datatables plugin" which (I think) I found, but which link is not allowed here for some reason.
However, although I added the requisite libraries (one jQuery and one CSS) as "External Resources" to my jsfiddle here and am using precisely the same HTML and jQuery as on their sample page:
$(document).ready(function() {
$('#example').dataTable( {
columnDefs: [ {
targets: [ 0 ],
orderData: [ 0, 1 ]
}, {
targets: [ 1 ],
orderData: [ 1, 0 ]
}, {
targets: [ 4 ],
orderData: [ 4, 0 ]
} ]
} );
} );
...running it doesn't seem to make the table sortable.
What am I missing?
I was also referred to "jQuery Table Sorter" but it doesn't seem to be available on a CDN, and thus would not be available on a jsfiddle page.
UPDATE
Actually, the aforementioned "jQuery Table Sorter" does seem to be available on a CDN, as Jason points out at the other question but, now that I've gotten the other working, I reckon I'll stick with it.

My bad: in my ignorance of CDN reference standards, I assumed the leading double whacks were unnecessary and removed them when adding to the External Resources. IOW, instead of pasting this:
cdn.datatables.net/1.10.0/js/jquery.dataTables.js
...it needs to be this:
//cdn.datatables.net/1.10.0/js/jquery.dataTables.js
On reinstating the double-whacks (which looked like they were being commented out to me), it all runs fine now here

Related

HTTP CORS on Graphql server won't insert

I'm working on this project where I have 3 "tables". 2 of them are independent and one is M:M relationship.
However, my database was working fine until I realized it could not liaise the 2 independent table in the 3rd one, so I decided to change up the ids with "_" and make it work like that. However, it keeps returning me the 400 Error and I cant seem to figure out why.
{
"students": [
{
"id": 3021,
"nume": "Name",
"prenume": "Surname",
"an": 3,
"departament": "1"
}
],
"exams": [
{
"id": 1,
"subiect": "Subject",
"data_examen": "02/06/2022 10:00",
"profesor": {
"nume": "Name Surname"
}
}
],
"listexams": [
{
"id":1,
"exam_id":1,
"student_id":3021
}
]
}
Insertion code:
`function send()
{
dategraph.forEach((graph) => {
deInserat={ examenId:graph.examId,studentId:graph.studentId};
obiectInterogare={query:`mutation adaugare($examenId:Int!,$studentId:Int!)
{createListaexamene(examId:$examenId, studentId:$studentId) {id examId studentId}}`,
variables:JSON.stringify(deInserat)}
textInterogare=JSON.stringify(obiectInterogare)
configurari={url:"http://localhost:3000/",
type:"POST",
data:textInterogare,
contentType:"application/json",
success:procesareRaspunsql,
error: (error) =>
{
console.log('Error', error);
}
}
$.ajax(configurari);
});
}`
It's taking the variables from another place but that is working just fine (because it worked prior to changing the fields) but it won't now. Any ideas what it could be?
The error that gets thrown out is
This might help somebody. Beware of the implicit GraphQL schema. The reason why it kept throwing out 400 Error is because I had the M:M relationship keys defined as "int!" instead of "ID!"
As I stated in the question, I knew it's something in the query/database. Thanks to the expert who downvoted it

inline images MDX Gatsby

I'm trying to implement inline images with mdx files.
But I can't make it happen, no image is loaded.
After a bit of reading some solutions here, they suggest to add gatsby-remark-images also in the plugins array in options.plugins as in
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
`gatsby-remark-images`,
{
resolve: `gatsby-plugin-mdx`,
options: {
gatsbyRemarkPlugins: [
{
resolve: `gatsby-remark-images`,
},
],
plugins: [`gatsby-remark-images`],
},
},
in my mdx file ![test image]('./myFirstPost/images/colorcloud.jpg')
It didn't work for me though.
Anybody can help me with some guidance ?
Cheers
Yes turned out after spending half a morning on the matter that there's no needs of quotes in the md link to the img

Square Variation Stock status shows none even though there is a valid in stock quantity

I'm trying to update the on-hand of a variation using the inventory/batch-change API. My system is the source of record for the item on-hand so I'm posting a PHYSICAL_COUNT to the variant. Everything looks fine if you drill down into the stock section of the variant; however, the main item dashboard has a - and the variation shows none in the stock section. I'm not sure what the issue is because when I post thePHYSICAL_COUNT I also set the state=IN_STOCK.
Here is the json used to update inventory
API URL :https://connect.squareup.com/v2/inventory/batch-change
{
"idempotency_key": "XXXXXXXX",
"changes": [
{
"type": "PHYSICAL_COUNT",
"physical_count": {
"catalog_object_id": "XXXXXXXX",
"state": "IN_STOCK",
"location_id": "XXXXXXXX",
"quantity": "3",
"occurred_at": "2020-04-20T15:02:00Z"
}
}
],
"ignore_unchanged_counts": true
}
Square Stock None
Square Stock
There is a known issue around this, when using the Inventory API and looking at the dashboard it will be out of sync unless you update the item variation in the Catalog API to use individual location_overrides (regardless if it's going to be available in every location). This field lives in the CatalogObject->item_variation_data->location_overrides (https://developer.squareup.com/reference/square/catalog-api/upsert-catalog-object#modal__property-item_variation_data).

How to measure speed in Google Analytics for AMP pages?

We implemented AMP to our site a couple of months ago. We're tracking visits correct in Google Analytics but the speed dimensions are empty, we have no sample pages measured.
How can I get the load time in amp pages?
In amp-analytics config I put 'site_speed_sample_rate' => 100 in order to track all the pages.
self::$triggers['trackPageview'] = [
'on' => 'visible',
'request' => 'pageview',
'vars' => [
'account' => $this->environment->getCodigoAnalitics(),
'site_speed_sample_rate' => 100
]
];
I expect to get the load timings but all i've got is 0s in all amp pages.
I may be late but hope someone might find it useful. Various AMP features allow variables to be used inside of strings and substituted with the corresponding actual values. ${contentLoadTime} is one of them.
"triggers": {
"trackGA": {
"selector": "amp-layout",
"on": "visible",
"request": "event",
"vars": {
"eventAction" : "ContentLoadTime",
"eventCategory": "${contentLoadTime}"
}
}
}
link to the whole list : https://github.com/ampproject/amphtml/blob/master/spec/amp-var-substitutions.md

IE11 Can't reach this page, but the page is valid and accessible

I have a bit of a bizarre problem happening in IE11. I'm running DataTables with server-side processing so I had to create a custom button for exporting the full data set, since the default buttons only export the visible data set.
Here's the Yajra DataTables for Laravel configuration for one of my buttons:
'buttons' => [
['extend' => 'csv',
'text' => '<i class="fa fa-file-excel-o"></i> CSV',
'action' => 'function(e,dt,node,config){
var data=$.extend(
true,
dt.context[0].oSavedState,
{
columns:dt.context[0].aoColumns.map(function(col){
return {"data":col.data}
})
})
window.location.href = window.location.href +
"?action=csv&" +
$.param(data);
}'
],
...
The button works fine, it basically compiles a list of the columns and filters and sends the user to a Laravel route that handles the action=csv request and generates an Excel download that triggers automatically in Chrome and Firefox.
In IE11, however, the browser redirects to the Excel download route but throws up a "Can’t reach this page" error message. I can see in the address bar that the URL is correct, and what's odd is that if I just hit Refresh in the browser, the CSV download is triggered and I am given the option to save.
This happens every time I click the download link. What might cause IE11 to think the page can't be reached, when it can?
I tried looking at the request/response headers in network tools and everything seems to be just fine. Any ideas?
Also, I tried rewriting my window.location logic to create a hyperlink element, attach it to the DOM, trigger a click, and it still yields the same thing.
More Information
I tried a few other things and was able to eject the download process at any point in the code up until final response to the browser. The browser responds with a 200 status code, when I look at the Network Tab and view the Response Body, I can see my CSV content right there with appropriate Content Disposition, Content Length headers. The Content-Type header is text/plain, but changing it to text/csv didn't solve the problem.
If the IE's Network Tab renders everything correctly, why might IE's browser renderer show a Page Can't Be Displayed error?
Well, I was finally able to resolve the IE/Edge exporting issue and it comes down to query-string length.
The DataTables grid makes a GET request with a whole bunch of properties related to the query (columns that are visible, which filters were applied, etc.).
Sample Request Params:
{
"action": "csv",
"time": "1529689896632",
"start": "0",
"length": "10",
"order": [
["2","asc"],
["1","asc"]
],
"search": {
"search": "",
"smart": "true",
"regex": "false",
"caseInsensitive": "true"
},
"columns": [
{
"visible": "true",
"search": {
"search": "",
"smart": "true",
"regex": "false",
"caseInsensitive": "false"
},
"data": "programs"
},
// ...
Because there are so many columns, these request params create a very lengthy query-string (in the realm of 3-4000 characters). IE and Edge appear to handle query-strings up to a certain length, as I've noticed some bugs come through where the query-string data was truncated.
I ended up reducing the query-string length by omitting unnecessary and default property values needed for the export. Now IE and Edge both immediately respond with the file download instead of throwing a page not found or other bizarre error.

Resources