Okay, so i have searched for hours to no avail (most likely because i am not phrasing the question correctly).
Anyway, i would like to change the "list" property of the following script to "big" depending on the size of the client window.
SCRIPT
<div id="calWrap" class="comType">
?php
$calendar_type='list'; //Possible value: mini, big, list
include("3c-events/calendar.php");
?
</div>
Any help would be greatly appreciated, i have come across a few posts with scripts i thought would do the trick; however, either through poor implementation or some other reason they failed.
Thanks in advance….
I would suggest getting the size of the viewport with javascript and then sending them to the php on load. Then write some code to check the size and set "calender_type" accordingly.
var viewportWidth = $(window).width();
var viewportHeight = $(window).height();
send the code to the php page with ajax
$.ajax({url: "page.php", type: "post", data: {"size": size}})
you would then return the calender at its proper size. and place it into a designated container.
.done(function(html) {
$('#someContainer').html(html);
}(;
Related
My charts loaded via ajax call looks just fine. Currently, whenever user refresh the page, data are loaded from DB server. As those graphs are quite massive, I thought about using SESSION var to store the charts and speed up loading time (all charts are loaded at the same time). Finally, I achieved the goal however I encountered small issue.
Whenever HTML + JS code is served from $_SESSION var, the chart is presented but with no animation effect. In addition flicker effect is visible (scaling). I solved that by setting responsive to false, but this caused issue with labels, being too small to be accepted.
I tried .destroy() option but with no luck (the same flicker effect) :
var myChart = new Chart(ctw, {
type: 'bar',
data: chart_data,
options: chart_options
});
myChart.destroy();
var myChart = new Chart(ctw, {
type: 'bar',
data: chart_data,
options: chart_options
});
Is there any way I can force animation to kick in (regardless if the chart comes from $_SESSION or not) and do not loss responsiveness?
Thank you.
If myChart.destroy() not working. Try myChart.update().
Try update like this:
var myChartData = myChart.data; // need to store in variable first
myChartData = chart_data; // chart_data from $_SESSION var
myChart.data = myChartData;
myChart.update();
Good luck.
I need advice on my ajax progress bar while executing a long PHP script treating pictures.
I know there are plenty of questions on stackoverflow already like
Show progress for long running PHP script
or JQuery ajax progress via xhr
or update progress bar using ajax request seconds)
Most of the examples I see are using the file size to calculate the progress.
But in my case I would like to calculate percentage based on images_treated / total_images.
So I still can't make this work as I want.
In JS bellow I commented the not working progress function I took from another question and dataType: 'json' for tests but I would prefer if I can still use a JSON return.
Questions
The console.log() will only log once - when the full script is done. Am I doing it wrong?
What should I write to replace the comment?
in some answers, the PHP headers are set to header('Content-Type: application/octet-stream'); is it mandatory or just nicer?
Javascript:
$.ajax(
{
type: 'GET',
// dataType: 'json',
url: formAction,
data: 'addImagesToArticle',
cache: false,
xhr: function()
{
var xhr = new window.XMLHttpRequest();
// Download progress.
xhr.addEventListener("progress", function(e)
{
console.log(e);
// I saw this piece of code from another question it is supposed to work... Maybe my PHP?
/*var lines = e.currentTarget.response.split("\n");
var progress = lines.length ? lines[lines.length-1] : 0;
$('#progress').text(progress);*/
}, false);
return xhr;
}
});
My PHP is quite big so I just explain quickly: in the loop on pics I have variables $images_treated and $total_images. After the loop, a summary is returned to JS via JSON in an object like {error: bool, message: string, ...} so if there is a way to make the progress work without echoing but setting a JSON variable that would be perfect!
Thank you for your help!
[EDIT] to add context details.
I want to use this in an admin side, in an article edition with a WYSIWYG, I have dropzone taking care of my multiple images uploads.
then I see the preview of images while each image is put in temp folder on server. I can then remove some images if needed and once all images are definitive, i click a button that will process them for resizing 2 sizes and inject figure tags with img in the article WYSIWYG editor.
Waw I found a solution!
I am happy to discover that new thing I did not know about PHP and share with people who also don't know (in step 3 bellow)!
#riccardo was right talking about socket - which I don't know so well - but I did not need to go that far.
So I had multiple things to solve in my case before being able to get closer of my goal.
not using xhr.addEventListener("progress"... but a second ajax call in a timer: it will also be lighter-weight in resource consumption.
rather than using a timer like setInterval or setTimeout - as requests are async it may come in unwanted order - use a recursive call in callback of first call like:
function trackProgress()
{
$.getJSON('create-a-new-page.html', 'ajaxTrackProgress=1', function(response)
{
var progress = response.progress;
$('#progress').text(progress);
if (progress < 100) trackProgress();
});
}
then realize that my second script call is delayed by first script still running? yes. So the key here is session_write_close()!
I could dig in this way thanks to this good post:
https://stackoverflow.com/a/1430921/2012407
and I posted a very simple example here to reply to another question: https://stackoverflow.com/a/38334673/2012407
Thank you for all your help in comments guys, it led me to this solution. ;)
I didn't really know what to call this so I couldn't find anything by searching. Pretty much I have the following:
$(document).on('click', 'a[data-ajax]', function(e) {
var box = $('#ajaxdata');
e.preventDefault();
var r = $(this).attr('href');
$.ajax({
type: 'post',
url: '/betasite/' + r,
success: function(data) {
box.html(data);
}
});
});
Pretty much it loads the contents of a file (being some html) into a div so the page doesn't need to reload data as often. The problem is having is that I want to have some php inside that loaded file so I can access server side MySQL data and display it. Whenever I try to do this however, it comments the php out like <--php (stuff) -->. Does anyone know how I can work around that (like having the php generate the page before its loaded)?
Your php code will be rendered by server(WAMP/MAMP) automatically if you are on a local environment. If you are not running a server(WAMP/MAMP) you will have to select one depending on the O/S you use.
a good practice is to test the operation of the service in this case "php", before trying the operation in the front-end (jquery). If you have an Apache server up should see the result of their service by accessing the service route.
I need to retrieve and process a image (png) generated by a flash application. When a user clicks a link I :
var dataImgBase64 = document.getElementById("flashApp").getThumbnail();
So the flash app sends me a image in base64. Then I:
var params = 'b=' + encodeURIComponent(dataImgBase64);
$.ajax({
type: "POST",
url: "arrival.php",
data: params,
success: function (msg) {
$("#ppp").html(msg);
}
});
heres is arrival.php:
$data = $_POST['b'];
echo strlen($data);
In chrome I get the expected size of around 900k but in ie and firefox I get 0. I checked with firebug and I do send the post data but it cuts in the middle with a message that firebug as reached its post size limit.
Is it possible to do what I want the way I want? If not what else could I do? I tried playing around with some settings like:
processDataBoolean: false,
contentType: "application/x-www-form-urlencoded",
Nothing worked.
editL the server is a shared hosting account on linux.
Why do you do it with ajax? Can't you just insert the specfied path in the src attribute in a img tag?
Since no one can help me I helped myself! After testing I found out I can send in a single ajax request 1000000 '1's but it will fail on all browsers for 1000001 '1's.
I have a hard time finding information because everywhere I look on the net its talks about a file upload dialog (and I got my data from a flash pluguin on the webpage very different context.
So as of now my solution is to split the data and send it thru many ajax connections.
I'll leave the question open in case someone passes by and has a better answer.
I almost sure that PHP can't detect the View port size of a browser right?
But since that, can someone teach me how can i do it with Javascript and then gather that size from a Javascript variable to a variable in PHP?
Regards
PS: Sorry if there is another post with the same question.
To get the viewport size, you must use Javascript, yes.
For examples of code doing that (not always easy, there are differences between browsers), you can take a look at how JS Frameworks/Libraries determine that size (for instance, in prototype.js, there is a getDimensions function that does what you want) ; google will get you lots of results about that too (this one is an example of those results)
Then, you must send that size to PHP. For that, two solutions :
One is to use an Ajax request (sending the width and height as parameters)
The other is to dynamically build an <img> tag, with an URL pointing to the PHP script, like 'http://.../size.php?w=WIDTH&h=HEIGHT'
many statistic software (things like xiti / google analytics -- not sure if those ones do ^^ ) use that kind of method.
In the second case, the JS code could look like this :
<script type="text/javascript">
var width = 100;
var height = 80;
var tag = document.createElement('img'); // Create the tag
tag.src = 'http://tests/temp/viewport/size.php?';
tag.src += 'w=' + width; // Pass the size
tag.src += '&h=' + height;
document.body.appendChild(tag); // Insert the tag into the page
</script>
And then, in size.php, you use $_GET['w'] and $_GET['h'].
Note : you will probably have to return some valid image data from size.php, to not get a "red cross" picture (a transparent gif, 1x1 in size, for instance, will do the trick)
here's what I'd do (based on Pascal MARTIN's):
<script type="text/javascript">
var tag = document.createElement('img'); // Create the tag
tag.src = 'http://path/to/file.php?';
tag.src += 'w=' + document.documentElement.clientWidth;
tag.src += '&h=' + document.documentElement.clientHeight;
document.body.appendChild(tag); // Insert the tag into the page
</script>
I have tested this on all major browsers (IE6, IE7, IE8, Firefox 2.x, Firefox 3.x, Opera 9.6x, Safari 3. and Chrome 2.x).
I guess this is how you can do it with jQuery:
var viewport_Width = $(window).width();
var viewport_Height = $(window).height();
but this method has a bug in Opera. See here:
http://dev.jquery.com/ticket/3046
use a workaround for Opera.
Then you can send it to the server (through POST or AJAX call) to save it in PHP.
Hope that helps.
Using a library like jQuery will avoid you many hassles and browser hacks.
Seriously consider using one, it solves a lot of server-side problems in the end.