We Keep Coding

Send a post request with an Electron webview

I want to send a POST request with an Electron webview from the outer script. At the moment I just set the src attribute to trigger a page load, which sends a GET request:
<webview id="view">
<script>
document.getElementById('view').setAttribute('src', 'http://example.com/?foo=bar');
</script>
Is there any way to navigate the webview to a URL by sending a POST request? Maybe a method of the webview, instead of just hacking with the src?

You can execute arbitrary code from within the webview context with .executeJavaScript.
Moreover your code has access to all browser built-in apis. Easiest would be to use fetch, with method set to post.
In your case (provided the webview has been already loaded; for example its .src has been set):
document.getElementById('view')
.executeJavaScript('fetch("http://example.com/?foo=bar", {method: "post"});');
Some remarks:
The origin of the request is controlled by .src of the webview.
It seems that all default security policy are still used by webview - specifically you cannot make calls to http: from https:.
It is bit painful to pass code as a string.

Now there is a new <webview>.loadURL() method with a postData option in the docs. I haven't used it yet but it looks exactly like what I was looking for in the past.
It seems they added it as a feature in the meantime.

Basically, Webview element does not have a property like "method" of Form so you can not specify a particular HTTP method for its request. I recommend you to use AngularJS or any other JS frameworks to archive your purpose.

I found two workaround since <webview> does not seem to currently have any way to send a POST request.
Maybe the site you're using will let you send the form as a GET by adding any form elements to the URL's query string. It turns out the site I was using did allow this and I wouldn't've guessed had I not actually tried.
You might be able to send a POST manually through AJAX/fetch etc then replace the HTML of the page in the webview with the HTML returned by your manual POST. You can achieve this using .executeJavaScript() and/or Electron's IPC.
Neither workaround will work in every case. It might be worth filing a feature request with the Electron team too...
So I just went ahead and submitted a feature request. You can follow it here: https://discuss.atom.io/t/add-http-post-method-to-webview/29702

ajax - Ajax vs document.getElementById().innerHTML

I am new to Ajax and web development in general. When I googled Ajax, a lot of sites (like here) said that one of the key features or Ajax is that you can dynamically update content on the webpage without reloading it.
My question is this: can't you just do this by using document.getElementById("...").innerHTML = "whatever you want it to change to"? I know that with Ajax you can make requests to a webserver and whatnot. That is not my question. My question is that why do people claim that changing a webpage without reloading it is something special about Ajax when you can do it with normal JavaScript?
And also, in the link above, it said that with Ajax you can "request/receive data from a server - after the page has loaded". Why "after the page has loaded"? Is there another way to request/recieve data from a server while the page is still loading?
Thank you!

My question is this: can't you just do this by using
document.getElementById("...").innerHTML = "whatever you want it to
change to"?
You can indeed change the inner markup of dom Element instances using this property.
I know that with Ajax you can make requests to a webserver and
whatnot. That is not my question. My question is that why do people
claim that changing a webpage without reloading it is something
special about Ajax when you can do it with normal JavaScript?
Javascript is client side. Ajax is special in that it requests data from a server so you can use it in the client (javascript).
Javascript by itself (understand, without the XmlHttpRequest object) does not allow that. All you can do is client side dom manipulation, not knowing what's on the server side (which means, among other things, no access to shared databases)
And also, in the link above, it said that with Ajax you can
"request/receive data from a server - after the page has loaded". Why
"after the page has loaded"? Is there another way to request/recieve
data from a server while the page is still loading?
Yes.
jsp, php, are two examples of server side languages. When you request http://page.php (for example), the server routes the request to the *.php interpreter. The code inside the page is then used to generate http headers and html content back to client. This is a round trip that happens every time a page is accessed. The page is first loaded using this system.
Ajax allows you to proceed with subsequent calls to any php script, while the page is already loaded.

ajax is a way of loading data from the server without reloading the entire page, innerHTML is one way of injecting that data into the page...so ajax is a way of communicating with the server while, innerHTML is a way of manupilating the page.

Hello here is the key deference between ajax and document.getElementById().innerHTML is
AJAX
AJAX will load the content when you want to change for the perticuler div and change the content the content are not stored in any where in current web page
document.getElementById().innerHTML
Where when you want to change the content without ajax then you need to store the content in any javascript variable or in hiddent html so it will load the content if you want to show or not.

How do you make a link perform an action without reloading a page?

The clearest example of this I could think of is the Reddit Upvote/downvote buttons how when you click the button, the value for upvotes is updated, the upvote button lights up, and the page DOES NOT reload, you just stay exactly where you are on the page.
I am trying to make a feature similar to this and I can totally figure out how to do it with reloading, but I want it to not reload so the user experience isn't disrupted.
Is it possible to do this with php? or would I need to use javascript or something?
The action I would need it to perform would be a basic update query in the database.

This would be done with an Ajax call to your php script. Ajax is designed for these asynchronous updates and/or reloads.
Another way you can do this is with HTML5 WebSockets. You could have the client send a trigger to the server when the user clicks the upvote, and then the server could update and push back the data. It would, however, be a bit overfill for this.

If what you want to do is to contact a server to either send it some state or to retrieve some state from the server (or both), then you would use AJAX with javascript in order to contact the server without reloading the page. You can then also use javascript to update the state of your page after the operation. That is generally what the Reddit page you refer to is doing.
Conceptually, you'd set up your page like this:
Put the link on the page.
With javascript install an event handler so you are notified of a click on the link.
When the link is clicked, your event handler will be called.
Prevent the default behavior of the link so the browser doesn't navigate to a new page.
Then, in the event handler, send your data to the server using AJAX. You will obviously need a URL on your server and server process that can accept and process the data for you and return a value if you need to.
If you need the response from the server, then set up a callback function for when the AJAX call completes (this will be some indeterminate time in the future).
Then, if you need to change the current page in any way (like show one more upvote), then you can modify the current page with javascript to show that new state.
Ajax is easier to use with a library (like jQuery) that contains some ajax support code, but you can certainly implement it in plain javascript too.
Here's one example of ajax with plain javscript. You can find many other examples with Google.
This MDN tutorial on AJAX seems pretty helpful too to show you how it works.

You could use JavaScript to do this. Here's a quick sample:
Vote Up
Simple solution in JavaScript:
var el = document.getElementById("upvoteBtn");
el.addEventListener("click", onVoteClick);
function onVoteClick(e) {
e.preventDefault();
// do something
}
Here's a fiddle.
NOTE: I see you'd be updating the database. In that case, you would have to use AJAX in the onVoteClick function (or use XMLHttpRequest) for this. JavaScript is a client-side programming language and will not be able to communicate to the server without the use of AJAX or XMLHttpRequest. Using the jQuery library, you should be able to write AJAX pretty easy.

It's called AJAX.
With AJAX you can send a request in the background.
The easiest way is to use the jquery libary for this.
You can also output some data as JSON back to the script if you want to take some other actions depending on the result from that query.
A good tutorial is this one.
It also explains how this requests (called: XMLHttpRequest) work.

You need to use Javascript's XMLHttpRequest

You can use AJAX...
It allows you to use JavaScript (client side) to call server side functions. Here's a good example.

jQuery get page with use of #/page

Hello I have a question recently I seen more and more sites using #/pagename instead of going to /pagename which is useful because it does not reload the page.
How can I do the same thing with jQuery? http://mysite.com/id#/1 <-- would load user with id 1 if you would change that 1 to say 4564 http://mysite.com/id#/4564 the page would load user data fro 4564 with out refreshing the page it self.
Thanks in advance

You are actually seeing two things:
The request for content is be done asynchronously (AJAX). To accomplish this look at jQuery.Ajax. http://api.jquery.com/jQuery.ajax/
There is also a 'hash trick' to enable back button support. Typically, a standard Ajax call does not play well with the back button. For this look into the BBQ jQuery library. http://benalman.com/projects/jquery-bbq-plugin/
Hope this helps.
Bob

YOU are looking for the jQuery history plugin. I've had great success with it, and there are triggers for when the hash changes so you can do whatever you want: load content with AJAX, or load a different slide, etc.

I would recommend you look at sammy.
It's a very light javascript framework intended to implement a thin-server model like this where the rendering occurs on the client's computer in javascript instead of served pages from a remote server. This is what allows many sites to avoid doing full reloads of a page every time a user performs an action.

link to another .html file via javascript

Is it possible to retrieve a div ID from another file via a javascript from one file.
Example:
Lets say you are editing index.html and want to retrieve an ID, using getElemntById from page2.html.
I understand that you can use document.getelementbyid; if you want to get the id from the same document, but is there anything you can use to get it from another document?
Thanks in advance

You will have to make an AJAX call to page2 first.
Paste the response of XMLHTTPObject in some invisible div.
Then get the required div that you want to retrieve.

Personally, I would create an include file with the content you require on both pages, and include it on both pages. Then it would just be a matter of showing/hiding the div.

You can do this fairly easily with AJAX - you have to make an asynchronous call to page2, and then process the response to get the element you're looking for. Look up jQuery's get() method for an easy AJAX implementation - it handles the details of the XMLHTTPRequest for you.
It's also worth noting that if page2 is a page served by your server, an even easier solution is just to copy whatever information you need from page2 to page1 on the server side. Alternatively, if you do need to do an AJAX call because it isn't feasible to put all the information you might need onto page1 from the beginning, you can have your server (using php, Rails, Django, etc.) return different information for an AJAX call. So you can have it return only the info you need, rather than returning the entirety of page2.