fetch the field data without post - wordpress

I'm trying to get the field data from form textarea so i can store it when a user filling the textarea if he reload page or open an other page in same tab and come back to write data his previous work will be there
My code is
session_start();
$_SESSION['textarea-133'] = $_POST["textarea-133"];
?>
<script>
var a="<php echo $_SESSION['textarea-133']";
document.getElementById("business_a6").value =a ;
</script>

You could use window.sessionStorage to save a variable and check if it's there each time the page is loaded.
window.onload = function(){
var userText = sessionStorage.getItem('the_user_text');
if( userText ){
document.getElementById('the-text-area').innerHTML = userText;
}
};
It's up to you if you want to re-save the variable with each keypress or maybe after a setInterval
document.addEventListener('keypress', (event) => {
var newText = document.getElementById('the-text-area');
sessionStorage.setItem('the_user_text', newText);
});

Related

html2canvas, upload image to wordpress library

I'm making a holiday blessing generator for client.
The final output goes to a div with an id="BRHBresults".
From that div I'm making a canvas and converting it to image,
I've managed to make the onclick function to download the image(just to make sure the result was correct), however what I need the onclick to do is,
upload the image to wordpress library and make a new post with this image as post_thumbnail.
I get an error:
"414 (Request-URI Too Large)"
So far I have come up with this:
Link to the page: [http://www.benedict.co.il/%D7%9E%D7%97%D7%95%D7%9C%D7%9C-%D7%91%D7%A8%D7%9B%D7%95%D7%AA/
]
Javascript/JQuery
$(".BRHshareToFB1").click(function(){
html2canvas([document.getElementById('BRHBresults')], {
onrendered: function (canvas) {
var data = canvas.toDataURL('image/png');
var image = new Image();
image.src = data;
var alink = data ;
//$('.BRHshareToFB2').attr('href', alink);
//$('.BRHshareToFB2').attr('download', 'filename.jpg');
//dataUrl = canvas.toDataURL("image/png");
alink = data.replace(/^data:image\/(png|jpg);base64,/, "");
$.post("/send.php?data="+alink);
}
});
});
PHP from send.php file
<?php
$dir = getcwd();
$now = date("U");
$imgstring = $_POST['data'];
$imgstring = base64_decode($imgstring);
file_put_contents("$dir/wp-content/uploads/blessing-$now.png", $imgstring);
?>
What am I missing? Please help! :)

Stop loading posts when no more exist

I'm using the following to load posts into a index page of a wordpress site. The problem is when it gets to the last page and there are no more posts to load. Its just keeps reloading the last page.
Any ideas of how I might stop this from happening? Thanks.
var $content = '#content';
var $nav_wrap = '.navigation';
var $anchor = '.navigation a.next';
var $text = 'Load More';
var $next_href = $($anchor).attr('href'); // Get URL for the next set of posts
$($nav_wrap).html('<a id="almc-load-more" href="' + $next_href + '">' + $text + '</a>');
$('#almc-load-more').click(function(e) {
e.preventDefault();
$.get($(this).attr('href'), '', function(data) {
var $timestamp = new Date().getTime();
var $new_content = $($content, data).wrapInner('<div class="almc-loaded" id="almc-' + $timestamp + '" />').html(); // Grab just the content
$next_href = $($anchor, data).attr('href'); // Get the new href
$('html,body').animate({scrollTop: $($nav_wrap).position().top}, 'slow'); // Animate scroll
$($nav_wrap).before($new_content); // Append the new content
$('#almc-' + $timestamp).hide().fadeIn('slow'); // Animate load
$('#almc-load-more').attr('href', $next_href); // Change the next URL
$('.almc-loaded ' + $nav_wrap).remove(); // Remove the original navigation
});
});
Above code taken from here: http://kaspars.net/blog/wordpress/jquery-script-for-loading-more-posts
You could add some code to check if the new href is different than the current href, and then only try to add a new post if they're different. Then, if they aren't, you could have a message saying there are no more posts.
var lastLink;
$('#almc-load-more').click(function(e) {
if ( $anchor == $('.navigation a.next').last() ) {
lastLink = 1;
}
if (lastLink == 1) {return} else {
...
}
...
After the comment from Mr. Mayers (Thanks) I gave up on the code and used this tutorial:
http://www.problogdesign.com/wordpress/load-next-wordpress-posts-with-ajax/
Has / does everything I needed.

Return to index, with selected value (Jquery, ASP.NET)

In my ASP.NET MVC 4 Project, At my index page, I have a dropdownlist where I want to 'redirect' the selected value back to the same index page.
I wrote a basic function but I have no clue how I can send that selected value with jQuery.
So the situation right now: Every time a user makes the dropdownlist change, the ID of the selected value is*captured in var selectedFB.
Then I want a url, link... that passes selectedFB back to the index page. But how to generate that URL?
<script>
$(function () {
$('#FBType').change(function () {
var selectedFB = $(this).find('option:selected').val();
var result = '#Html.ActionLink("Index", "Index", new { id = selectedFB })';
$("#dynamicLink").attr("href", );
return true;
});
});
</script>
looks like you are mixing client and server site. 2 options for you...
on the client site you need to have your restful route as you use to in MVC like this http://server/action/parameter
Or you should build up your client site script dynamic and let the view engine insert the resolved links.
This will not be resolved in the browser
'#Html.ActionLink("Index", "Index", new { id = selectedFB })';
Please let me know if this helps...
You cannot generate url by #Html.ActionLink on client side.You need something like this.
<script>
$(function () {
var action = '#Url.Action("Index", "Index")';
$('#FBType').change(function () {
var selectedFB = $(this).find('option:selected').val();
var result = action + '/' + selectedFB;
$("#dynamicLink").attr("href", result );
return true;
});
});

javascript window.print after loading multiple google map through php loop

I am successful to display multiple maps through a php loop. But at the end I am calling window.print. My problem is that the window.print is getting triggered before the map loads and blank space is shown on the print page.
Here is my example code:
{loop starts}
<div latitude="<?php echo $row['lat'];?>" longitude="<?php echo $row['lng'];?>" zoom="<?php echo $row['map_zoom_level'];?>" class="map_canvas"></div>
{loop ends}
Javascript:
$(document).ready(function(){
$('.map_canvas').each(function(index, Element) {
var lat = $(Element).attr('latitude');
var lng = $(Element).attr('longitude');
var latlng = lat+','+lng;
var zoomlevel = parseInt($(Element).attr('zoom'));
var origin = new google.maps.LatLng(lat,lng)
$(Element).gmap({'zoom': zoomlevel}).bind('init', function(ev, map) {
$(Element).gmap('get','map').setOptions({'center':origin});
$(Element).gmap('addMarker', {'position': latlng}).click();
});
});
window.print();
});
Can anyone help me fix this.

looping thru a list of checkboxes and saving the values, not working properly

I'm having a bit of a problem with this code.
The program gives me a list of checkboxes but a user ID. then u user can change his selection and push the save button (id="btnSaveUserIntersts") and i am trying to save in the hidden textbox all the values of the checkboxes that was choosen.
The problem is that i am getting all the time the same selections that came form the database and not getting the new selection that the user made.
Can any one tell me what am i doing wrong here?
$(document).ready(
function()
{
$('#btnSaveUserIntersts').bind(
'click',
function()
{
var strCheckBoxChecked = new String();
$('input[type=checkbox][checked]').each(
function()
{
strCheckBoxChecked += $(this).val();
strCheckBoxChecked += ',';
}
);
$('#hidUserInterests').val(strCheckBoxChecked);
}
);
}
);
10x
Try using:
$('input:checkbox:checked').each(
function()
{
strCheckBoxChecked += $(this).val();
strCheckBoxChecked += ',';
}
);
As the selector instead of what you're currently using.
$('input[type="checkbox"]:checked')
Use .map, it's far prettier:
var strCheckBoxChecked = $('input:checkbox:checked').map(function()
return this.value;
}).get().join(",");
And the selector you are using is close, $('input[type=checkbox][checked=checked]')

Resources