Develop Reference

passing localStorage data to PHP

I want to view and manipulate Javascript localStorage information on a PHP page using PHP. I have gotten pretty far with this, but I'm not where I need to be. I'm using PHP 7.3 and vanilla JS.
I have AJAX POSTing the data to a PHP processing page (not the one that calls the javascript function). However, I need to access the POST variable on the page that called the javascript. How can I pass the information back without a click?
The page wishlist.php contains a link to the js file and <div id="temporary_wishlist"></div>.
Javascript called from wishlist.php:
window.addEventListener("load", function() {
loadWishlist();
});
// get wishlist contents
function loadWishlist() {
var items = wishlistStorage.data.items.join("%20");
var item_notes = wishlistStorage.data.item_notes.join("%20");
var comments = wishlistStorage.data.comments;
var wishlistRequest;
var response = null;
if(window.XMLHttpRequest) {
wishlistRequest = new XMLHttpRequest();
} else {
wishlistRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
wishlistRequest.onreadystatechange = function() {
if(wishlistRequest.readyState == 4 && wishlistRequest.status == 200) {
response = wishlistRequest.responseText;
document.getElementById("temporary_wishlist").innerHTML = response;
}
}
wishlistRequest.open("POST", "/wishlist-processor.php", true);
wishlistRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
wishlistRequest.send("wishlist_items=" + encodeURIComponent(items)
+ "&wishlist_itemnotes=" + encodeURIComponent(item_notes)
+ "&wishlist_comments=" + encodeURIComponent(comments));
}
Given the above, I have access to $_POST['wishlist_items'] inside wishlist-processor.php. Whatever I output inside of wishlist-processor.php is visible to the visitor on wishlist.php inside <div id="temporary_wishlist"></div>. It is not, however, visible in the Console.
On wishlist.php, I want to load the information into a PHP variable so I can send it to a MySQL query. If I could just POST to self like I do with form validation I would have access to $_POST['wishlist_items'] from wishlist.php. I already tried setting the URL in the open("POST", URL, true) function to _self or wishlist.php, and that didn't work for me.
I know it's suggested that I use Fetch, but I'm already overwhelmed learning new things I want to understand AJAX better. Also, Fetch doesn't work on Firefox Android.

How To Get an HTML element from another HTML document and display in current document?

I'm building a web site which lets users post requests on site and others to respond. I have built an app-like form to collect information. In that form I need to display 3 pages.
So I have created one page with the from and and a JavaScript file to handle these 3 pages. Other form-pages are designed separately (HTML only).
I'm planning to load the other two pages into that 1st page with XMLHttpRequest and it works.
But I need to take 3rd page into the 1st form-page (display the 3rd page of form) and change the innerHTML of that 3rd page. I tried it with
function setFinalDetails() {
document.getElementById("topic").innerHTML = object1.start;
}
//creating a XMLHttpObject and sending a request
//requiredPage is the page we request.
//elementId is the element we need to display
function requestAPage(requiredPage) {
selectElementId(requiredPage);
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
m = xhttp.responseXML;
y = m.getElementById(elementId).innerHTML;
document.getElementById("hireForm").innerHTML = y;
//m is a global variable
//m is the object recieved from XMLHttpRequest.
//it is used to change the innerHTML of itself(m) and display.
//y is displaying the 3rd page in the form-page one("id =hireForm")
return m;
}
};
xhttp.open("GET", requiredPage, true);
xhttp.responseType = "document";
xhttp.send();
}
but that gives an error:
Cannot set a .innerHTML property of null
find my work on https://github.com/infinitecodem/Taxi-app-form.git

It it hard to help you in detail because we do not have a way to reproduce your error and test your code. I can suggest you to use a service like plunker to share your code. I do not know if this service will support to do some xhrRequest on other files in its working tree, you can try.
Your error message seems to reveal that one of your document.getElementById(...) is returning null instead of the html elt you want (so the id do not exist in the page).
But again without a way to test, it is hard to help you more sry. I really encourage you to try to share a link to a service (like plunker, etc) that will help others to play with your use case.

How does the `data-include` attribute likely work?

I'm analyzing a site and I see that there is a data-include attribute on a div.
I see that data- is part of the HTML 5 spec according to a Resig article.
I can also see that the div is being replaced by some response HTML as it fires off an xhr request to the server. This mechanism is basically used to load modules client side.
<div data-include='some.path'></div>
The question I have is how is the XHR fired off?
I'm used to accessing the DOM via IDs # or classes ., or selectors of some sort.
I see no selector so I can't figure out how it is done?
Here is a list of js according to Chrome

data-include is used by csi.js -- client side includes. An element with data-include='URL' is automatically replaced with the contents of the URL.

You can select DOM elements by data attribute, either by their value or just the presence of them. For example, using jQuery, this selector would give you all the elements with a data-include attribute: $("[data-include]"). So roughly if you wanted to load a bunch of URL's given by the data-attribute data-include in a bunch of divs, you could do something like this.
$('[data-include]').each( function() {
var path = $(this).data('include');
// Do something with this path
});
That is how you would gather up those elements, then I assume you loop through them and load the scripts from that attribute. Does that answer your question?

After looking at the source code of csi.js, I learned that this is how it's done:
window.onload = function() {
var elements = document.getElementsByTagName('*'),
i;
for (i in elements) {
if (elements[i].hasAttribute && elements[i].hasAttribute('data-include')) {
fragment(elements[i], elements[i].getAttribute('data-include'));
}
}
function fragment(el, url) {
var localTest = /^(?:file):/,
xmlhttp = new XMLHttpRequest(),
status = 0;
xmlhttp.onreadystatechange = function() {
/* if we are on a local protocol, and we have response text, we'll assume things were sucessful */
if (xmlhttp.readyState == 4) {
status = xmlhttp.status;
}
if (localTest.test(location.href) && xmlhttp.responseText) {
status = 200;
}
if (xmlhttp.readyState == 4 && status == 200) {
el.outerHTML = xmlhttp.responseText;
}
}
try {
xmlhttp.open("GET", url, true);
xmlhttp.send();
} catch(err) {
/* todo catch error */
}
}
}
He basically just uses vanilla JS and grabs all the elements, loops through them to see which have the attribute of data-include and then makes a new http request for each attribute that he finds. It's really straight forward and could be written way shorter in jQuery, but it's not necessary since you would have to include a whole library for such a simple task.

Nowadays, many JS libraries use whatever- prefixes to many things. Check what library the site is using and then read it's documentation to understand why it's there.

Replace current page with ajax content

I have a page with a dialog window which sends ajax post data to server and receives a response. During development, there can be two responses - one regular (this is not the question) or one with an error. Server returns code 500 and a page with lot of debug informations. This is a regular page returned from a framework and contains some javascript code. I want to be able to display this error page in case it happens.
The problem is, I can not simply attach the returned result to body element or open a new link in a new page and load this error again. I simply get a html page instead of data and I have to display the page (in current window or in another one).
I am using jQuery.

Configure jQuery ajax setup as follows:
$.ajaxSetup({
error: handleXhrError
});
where handleXhrError function look like this:
function handleXhrError(xhr) {
document.open();
document.write(xhr.responseText);
document.close();
}
See also:
Handling of server-side HTTP 4nn/5nn errors in jQuery

You may also try to use data URL's, the latest versions of the major browsers supporting it:
function utf8_to_b64( str ) {
return window.btoa(unescape(encodeURIComponent( str )));
}
function loadHtml(html)
{
localtion.href='data:text/html;base64,'+utf8_to_b64(html);
}
This way, you can load any html page you want in runtime.

In your ajax callback:
success: function (data) {
$("html").html($(data).find("html").html());
}
That will replace the entire page's HTML content with the one received from your AJAX request. Works in Chrome... not sure about IE.
Despite that, I'm not sure why you'd want to include the <head> section... but you can easily modify the above to display just what's in the body of the AJAX response, and append it to a div or even a lightbox. Much nicer.

Here is an example of how to change either if the response is a url or a html content (using django\php)
var xmlhttp;
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
{
var replace_t = '{{ params.replace_t }}';
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
if(replace_t == 'location')
window.location.replace(xmlhttp.responseText);
else if(replace_t == 'content')
{
document.open();
document.write(xmlhttp.responseText);
document.close();
}
}
}
xmlhttp.open("GET",SOME_ASYNC_HANDLER_URL,true);
xmlhttp.send();

I found this solution. I don't know if it si correct, but for Opera and Firefox it is working.
var error_win = window.open(
'',
'Server error',
'status=0,scrollbars=1, location=0'
);
error_win.document.write(XMLHttpRequest.responseText);

Have you tried just simply creating an element and inserting the returned error page into the element? I do this with error pages and jQuery.
var errorContainer = $( '<div/>' );
errorContainer.html( errorTextResponse );
errorContainer.appendTo( $( 'body' ) );

I may be misunderstanding, but do you know what elements from the result you specifically want to display? You could trying something like this:
success: function(data){
//store the response
var $response=$(data);
//use .find() to locate the div or whatever else you need
var errorMessage = $response.find('#warning').text();
alert(errorMessage);
}
Is that what you were looking for?

I don't think there's any way to do that. Iframes are meant for loading other pages and there's no other sandbox in which to dump a standalone page -- that's what frames were designed for.
It might be difficult with the framework you're using, but it's probably worthwhile to have it generate different errors for your Ajax requests. My Ajax pages will only ever send
{"exit": 1, "message": "As in the shell, a non-zero exit is an error and this is why..."}

Just figured this out
as easy as
document.body.innerHTML = YourAjaxrequest.responseText;
_______________________________________________^ up here is what over writes your current HTML page with the response.
request.onreadystatechange = function() {
if (request.readyState == 1) {
document.getElementById('sus').innerHTML = "SENDING.......";
}
if (request.readyState == 3){
document.getElementById('sus').innerHTML = "SENDING >>>>>>>>>>>>>";
}
if (request.readyState == 4 && request.status == 200) {
//document.getElementById('sus').innerHTML = request.responseText;
document.body.innerHTML = request.responseText;
}
}
request.send(formD);
},false);

Dynamic Ad script Replacing Page

I have an application that uses a mobile ad provider; the way ad provider works is that I make a request on the server side, the provider returns me the mark-up and I include that on my site.
In order to make the load page faster (which is a requirement that I don't control), I have an AJAX call to my server which then makes the call to the server side, returns the markup and I include the markup on my mobile view.
Most of the time, the markup I receive is a <img> or something similar.
However, when I receive a ad markup with <script> that make another call dynamically to receive the ad, the markup I receive from the dynamically loaded <script> ends up replacing the entire view; leaving with me just the ad.
I have tried a few things around it but haven't been successful so far. Is there anything I can do make sure the dynamically received markup doesn't end up replacing the entire page contents?

The problem is probably because the ad uses document.write as it's output.
document.write is recklessly dependent
on timing. If document.write is called
before the onload event, it appends or
inserts text into the page. If it is
called after onload, it completely
replaces the page, destroying what
came before. - crockford.com
What you can do is to temporarily overwrite the document.write method. It is as simple as that:
// overwrite document.write with a custom function
var old = document.write;
document.write = function ( html ) {
document.getElementById("target").innerHTML += html;
};
// ad code goes here, calling
// our document.write sandbox
document.write("<div> advertisement </div>");
// restore standard document.write
document.write = old;
You can see a little demo here.

Easy solution - put ad in DIV or IFRAME (ugly way).
Real solution - change ad system or make a deal with them to extend API. Nasty things you do will cost you alot to support in long term, no matter how easy was it to integrate this way.
If mobile AD system doing things like that - they must have little idea about development for mobile devices with limited recources.

ajax('POST','http://mobileAdProvider/',requestPayload,function(){insertHtmlAndScript("someDivID");});
OR
ajax('GET','http://mobileAdProvider/queryString','',function(){insertHtmlAndScript("someDivID");});
//=============================================================================
function injectJavascript(src)
{
var scripts = document.getElementById("scripts");
var javascriptSrc = document.createElement("script");
javascriptSrc.setAttribute("type", "text/javascript");
javascriptSrc.setAttribute("language", "JavaScript1.2");
javascriptSrc.innerHTML = src;
scripts.appendChild(javascriptSrc);
}
//=============================================================================
function insertHtmlAndScript(target)
{
if (req.readyState == 4) // 4 == "loaded"
{
if (req.status == 200) // 200 == "Ok"
{
var resp = req.responseText.split("^"); // delimiter for html and script
div = document.getElementById(target);
div.innerHTML = resp[0];
injectJavascript(resp[1]);
}
else
{
alert("Could not retreive URL:\n" + req.status + "\n" + req.statusText);
}
}
}
//=============================================================================
function ajax(method,url,payload,action)
{
if (window.XMLHttpRequest)
{
req = new XMLHttpRequest();
req.onreadystatechange = action;
req.open(method, url, true);
req.send(payload);
}
else if (window.ActiveXObject)
{
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req)
{
req.onreadystatechange = action;
req.open(method, url, true);
req.send(payload);
}
else
{
alert("Could not create ActiveXObject(Microsoft.XMLHTTP)");
}
}
}
//=============================================================================