JsPdf Auto Table : Customize headers with colspan - jspdf

I need to export a few tables to PDF format. I decided to use jspdf-autotable but I can't find a way to customize my header. I need to do this in the header style :
_________________________________________
|__________|______________|_____________|
|____|_____|___|__|___|___|___|___|__|__|
|____|_____| ... (content)
|____|_____| ... (content)
The first line is my problem, as headers are define differently, and I cant find a way to do this through the "drawHeaderCell" method.
Do u know a way to do this ?
Thank you

To get such a result you could implement the drawHeaderCell hook something like this:
drawHeaderCell: function(cell, data) {
if (data.column.dataKey === 'id' || data.column.dataKey === 'first_name' || data.column.dataKey === 'email') {
cell.width = data.table.width / 3;
} else {
return false;
}
}
Doing rowspans and colspans are quite complicated at this stage with jspdf-autotable. There is an example for how they could be implemented in the repo however.

Related

Select2 AJAX doesn't update when changed programatically

I have a Select2 that fetches its data remotely, but I would also like to set its value programatically. When trying to change it programatically, it updates the value of the select, and Select2 notices the change, but it doesn't update its label.
https://jsfiddle.net/Glutnix/ut6xLnuq/
$('#set-email-manually').click(function(e) {
e.preventDefault();
// THIS DOESN'T WORK PROPERLY!?
$('#user-email-address') // Select2 select box
.empty()
.append('<option selected value="test#test.com">test#test.com</option>');
$('#user-email-address').trigger('change');
});
I've tried a lot of different things, but I can't get it going. I suspect it might be a bug, so have filed an issue on the project.
reading the docs I think maybe you are setting the options in the wrong way, you may use
data: {}
instead of
data, {}
and set the options included inside {} separated by "," like this:
{
option1: value1,
option2: value2
}
so I have changed this part of your code:
$('#user-email-address').select2('data', {
id: 'test#test.com',
label: 'test#test.com'
});
to:
$('#user-email-address').select2({'data': {
id: 'test#test.com',
label: 'test#test.com'
}
});
and the label is updating now.
updated fiddle
hope it helps.
Edit:
I correct myself, it seems like you can pass the data the way you were doing data,{}
the problem is with the data template..
reading the docs again it seems that the data template should be {id, text} while your ajax result is {id, email}, the set manual section does not work since it tries to return the email from an object of {id, text} with no email. so you either need to change your format selection function to return the text as well instead of email only or remap the ajax result.
I prefer remapping the ajax results and go the standard way since this will make your placeholder work as well which is not working at the moment because the placeholder template is {id,text} also it seems.
so I have changed this part of your code:
processResults: function(data, params) {
var payload = {
results: $.map(data, function(item) {
return { id: item.email, text: item.email };
})
};
return payload;
}
and removed these since they are not needed anymore:
templateResult: function(result) {
return result.email;
},
templateSelection: function(selection) {
return selection.email;
}
updated fiddle: updated fiddle
For me, without AJAX worked like this:
var select = $('.user-email-address');
var option = $('<option></option>').
attr('selected', true).
text(event.target.value).
val(event.target.id);
/* insert the option (which is already 'selected'!) into the select */
option.appendTo(select);
/* Let select2 do whatever it likes with this */
select.trigger('change');
Kevin-Brown on GitHub replied and said:
The issue is that your templating methods are not falling back to text if email is not specified. The data objects being passed in should have the text of the <option> tag in the text property.
It turns out the result parameter to these two methods have more data in them than just the AJAX response!
templateResult: function(result) {
console.log('templateResult', result);
return result.email || result.text;
},
templateSelection: function(selection) {
console.log('templateSelection', selection);
return selection.email || selection.id;
},
Here's the fully functional updated fiddle.

How to set status code and headers in spray-routing based on a future result

I'm using spray-routing with Akka to define a route like
def items = path("items") {
get {
complete {
actor.ask(GetItems)(requestTimeout).mapTo[Either[NoChange, Items]] map {
result => result match {
case Left(_) => StatusCodes.NotModified
case Right(items) =>
// here I want to set an HTTP Response header based on a
// field within items -- items.revision
items
}
}
}
}
}
The actor.ask returns a Future that gets mapped to a Future[Either[NoChange, Items]]. "complete" is happy to deal with the Future[StatusCodes...] or the Future[Items] but I'm not sure how to set an HTTP Response header within the Future.
If the header weren't being set within the Future then I could just wrap the complete in a directive but how do I set a header within the complete?
I'm using Spray 1.2.0.
Thanks for any pointers in the right direction!
If you are trying to do this inside of complete all branches of the expression inside must result in a type that can be marshalled by complete.
You could try a structure like this to make it work:
complete {
actor.ask(GetItems)(requestTimeout).mapTo[Either[NoChange, Items]] map {
result => result match {
case Left(_) => StatusCodes.NotModified: ToResponseMarshallable
case Right(items) =>
// here I want to set an HTTP Response header based on a
// field within items -- items.revision
val headers = // items...
HttpResponse(..., headers = headers): ToResponseMarshallable
}
}
}
This ensures that the type of the expression you pass to complete is Future[ToResponseMarshallable] which should always be marshallable.
A better way, though, is to use the onSuccess directive that lets you use other directives after a future was completed:
get {
def getResult() = actor.ask(GetItems)(requestTimeout).mapTo[Either[NoChange, Items]]
onSuccess(getResult()) {
case Left(_) => complete(StatusCodes.NotModified)
case Right(items) =>
// do whatever you want, e.g.
val extraHeaders = // items.revisions
respondWithHeaders(extraHeaders) {
complete(...)
}
}
}

Add token in headers to display swagger UI

I am stuck on something stupid : I want to display the documentation for each route with swagger only if I give a correct api-key. How can I achieve that? Where can I configure the headers when I try to load the UI?
I tried that :
$('#input_apiKey').change(function() {
var key = $('#input_apiKey')[0].value;
if(key && key.trim() != "") {
swaggerUi.api.clientAuthorizations.add("key", new SwaggerClient.ApiKeyAuthorization("api_key", key, "header"));
}
})
But it doesn't appear in the request headers.

jquery validation code isn't working proper

i cant get the issue in my code , every thing working proper but issue is that when user click or focus first time on textbox correct img show .. this is incorrect but i cant solved this problem when user typing then after completing wher user correct type then show otherwise not shown . can any one help me regarding this issue . my complete jquery and html or css code are available in this link pls check and solved my issue
my code link
i think error on this function but icant get the issue
$('#step1 #fName').focus(function(){
if($('#step1 #fName').hasClass('error_Aplha')==true)
{
$('#step1 #fntick').removeClass('block');
}
else {
$('#step1 #fntick').addClass('block');
}
}).blur(function(){
if($('#step1 #fName').hasClass('error_Aplha')==true)
{
$('#step1 .fname_error').fadeIn(100).delay(2000).fadeOut(1000);
$('#step1 #fntick').removeClass('block');
}
else {
$('#step1 .fname_error').removeClass('block');
$('#step1 #fntick').addClass('block');
}
});
thanks in advance
Wow, that's a lot of code for a simple task. Change it so the checks are only done in the .keyup() and .blur() events of the INPUT elements.
Not 100% sure what the intended behaviour is, but this will probably get you going:
$(document).ready(function(e) {
var errorAlpha = function() {
var reg = /^([A-Za-z]+)$/;
var check = $(this).val();
if (reg.test(check) == true && check.match(reg) != null) {
// VALID
$(this).removeClass('error_Aplha');
$(this).next('img').addClass('block');
$(this).prevAll('span.tooltip2').stop(true).delay(500).fadeOut(400);
} else {
// INVALID
$(this).addClass('error_Aplha');
$(this).next('img').removeClass('block');
$(this).prevAll('span.tooltip2').fadeIn(500).delay(2000).fadeOut(1000);
}
};
$('#step1 #fName, #step1 #lName').on('keyup blur', errorAlpha);
});​
Demo: http://jsfiddle.net/gU3PU/6/

Use function on Jade output on client side?

I want to parse tweets with this function with content served via Node.js/Express/Jade client side.
String.prototype.parseHashtag = function() {
return this.replace(/[#]+[A-Za-z0-9-_]+/g, function(t) {
var tag = t.replace("#","%23")
return t.link("http://search.twitter.com/search?q="+tag);
});
};
I would like to do it client side so that for example when a new tweet is added that can be parsed to with the same code and displayed directly and not have to go back and forth to the backend and be parsed.
I've made it work with this code, but is there any way to make it simpler, prettier?
!= "<script type='text/javascript'>"
!= "var body = '"
= contents[c].body
!= "';"
!= "document.write(body.parseHashtag());"
!= "</script>"
Yes you can. I will suggest you the following way:
script(type='text/javascript')
var body = contents[c].body;
document.write(body.parseHashtag());
you should also see jade documentation for it:enter link description here

Resources