How to send the data using react js to another page? - javascript

I have index.html. In that I have form which accepts some data.After clicking on submit button, I want to send the all data to the process.php file in ajax format using react js. Thanks in Advance.

Correct way :
There is no AJAX functionality in the Reactjs. Basically react is just a view layer. For use of Network layer and Data layer you have to use some other configuration with React . Best will be Reactjs + Flux like facebook.
I like fluxxor for fluxx + react combination. fluxxor provides actions . By using those action you can call some external API.
Or Hack :
var Form = React.createClass({
submit:function(e){
e.preventDefault();
// make ajax call .
},
render: function() {
return (
<form onsubmit = {this.submit} > </form>
);
}
});

Related

How to post/delete data from form into database using Django?

I am using a form to post a record to my database in Django. The form looks something like this:
<form>
<div>Field 1</div>
<input/>
<div>Field 2</div>
<input/>
...
<a id='save'>Save</a>
</form>
I am using an event listener to let me know when this Save link has been clicked. When it is clicked, I would like to store the fields as a record in the database.
Here is my JS:
const savebtn = document.querySelector('#save');
savebtn.addEventListener('click', showSelected);
function showSelected(e) {
// post record to database here
window.location.replace("/"); // redirect to home page
I am hoping to use some python to post this record like shown below:
e = Entry()
e.field1 = 1
e.field2 = 2
e.save()
But I don't know how I can access a python function within JS. I'm thinking maybe a template tag could work here but can't figure out how to use it. Ideally I wouldn't have to rewrite the form as the formatting is kind of specific, is there a way to make this work?
You have to create an endpoint that will do the algorithm.
ie. some urls.py:
urlpatterns = [
path('my_save_view', my_save_view, ...),
]
views.py:
def my_save_view(request):
e = Entry()
e.field1 = 1
e.field2 = 2
e.save()
and in javascript just get/fetch that endpoint when you want to. You can pass any values to the view with either GET or POST method in a standard way if needed.

What is optimal data flow between PHP backend and Vue frontend

I am wondering, what would be the best setup of data flow from PHP (database) to fronted Javascript rendering, lets say VueJS.
My first idea is, that will provide data attribute with JSON data to HTML element - div, which Vue instance will be mounted on.
I dont want to create REST API and load data via AJAX HTTP requests from Vue.
# PHP part
echo '<div id="myId" data-my-data="{h1:\"My heading\"}"></div>';
// Javascript part
import Vue from 'vue/dist/vue.js';
import App from './MyApp.vue';
const el = document.querySelector('#myId');
new Vue({
el,
render: h => h(App, {
props: {
myData: JSON.parse(el.dataset.myData),
},
}),
});
What do you think, is it ok or is there any other option except REST?
Update:
Main purpose is that my App will handle complex - multi-step Forms with some complex fields, which I would like to create as reusable components.
App will validate forms via AJAX (to prevent re-rendering page), on success redirect to success page.
My infrastructure would be, that PHP will prepare data, render main layout with assets (JS + CSS) and DIV with data atributes for Vue App.

Recommended way to redirect to same view and perform server side code from a client side event in MVC

I am having a hard time deciding on an appropriate way to Perform some server side functionality and then redirecting to the same View in my ASP.Net MVC project.
I am trying to call an Action after the selected index changed client side event of my combobox.
One way I can think of is to change the window.location to the url of my Action and pass the data i need via the query string like this
function SelectedIndexChanged(s,e)
{
window.location.href = "/MyController/MyAction?" + s.GetValue();
}
I also see lots of people saying you should use jquery ajax for this
function SelectedIndexChanged(s,e)
{
$.ajax({
url: 'MyController/MyAction',
data: { value: s.GetValue() },
success: function(){
alert('Added');
}
});
}
My Action looks something like this where i set some cookie values using the value and Set View bags values depending on the selected index.
public ActionResult SelectedIndexChanged(string value)
{
//Do some processing
//Set cookie values
SetViewBags(value);
return Redirect(Request.UrlReferrer.ToString());
}
Is there a better approach to accomplish my task, I am leaning more towards changing the location.href as it is simpler, but i'm not sure if this is good practice?
EDIT
To Clarify this Combobox is a Devexpress MVC extension so I will have to handle the "SelectedIndexChanged" client side event.
This Combobox is also on my layout page so it appears on every view in my project. So when it is changed i will need to to call the same Action no matter what page it is on
As you've indicated that your form is in your layout (not a view), I recommend you look at using a view partial. Fortunately, MVC has already provided an example with their view partial (can't remember the name) that has the login and logout buttons. If a user clicks logout, some javascript is fired and the form is submitted. This will redirect the user; however, you could also send the original address (referrer) as a parameter to your server method and then redirect to that page afterward.
You could always use an Html.Action
function SelectedIndexChanged(s,e)
{
#Html.Action("ActionName", "ControllerName", {optional route values})
}

How to get image from url using meteor / javascript

I am newbie user of meteor. I am using file picker apis , i can easily upload my files to there server and they give me a unique url in return . When it comes to again fetch that file its creating a problem to me .
You can tell me how to get back file using that url by using filepicker api . You can tell me how to use that url and get image , by using meteor
When i upload a picture to filepicker.io they return me a json object like following
[{"url":"https://www.filepicker.io/api/file/kIrtNvQRta7GxlFVfiP2","filename":"brazil.jpg","mimetype":"image/jpeg","size":2660,"key":"ZML3OjrFTVyV4waBzRIT_brazil.jpg","isWriteable":true}]
So how to get the image on meteor?
Thank You in advance
The normal image source should work:
<template name="image">
<img src="{{img}}"/>
</template>
and your javascript to give it the url
Template.image.img = function() {
var yourfilepickerjson = [{"url":"https://www.filepicker.io/api/file/kIrtNvQRta7GxlFVfiP2","filename":"brazil.jpg","mimetype":"image/jpeg","size":2660,"key":"ZML3OjrFTVyV4waBzRIT_brazil.jpg","isWriteable":true}]
return yourfilepickerjson[0] && yourfilepickerjson[0].url;
}
You could pass the filepickerjson via Session object so that its reflected reactively as soon as you get it

Convert many GET values to AJAX functionality

I have built a calendar in php. It currently can be controlled by GET values ​​from the URL. Now I want the calendar to be managed and displayed using AJAX instead. So that the page not need to be reloaded.
How do I do this best with AJAX? More specifically, I wonder how I do with all GET values​​? There are quite a few. The only solution I find out is that each link in the calendar must have an onclick-statement to a great many attributes (the GET attributes)? Feels like the wrong way.
Please help me.
Edit: How should this code be changed to work out?
$('a.cal_update').bind("click", function ()
{
event.preventDefault();
update_url = $(this).attr("href");
$.ajax({
type : "GET"
, dataType : 'json'
, url : update_url
, async : false
, success : function(data)
{
$('#calendar').html(data.html);
}
});
return false;
});
Keep the existing links and forms, build on things that work
You have existing views of the data. Keep the same data but add additional views that provide it in a clean data format (such as JSON) instead of a document format (like HTML). Add a query string parameter or HTTP header that you use to decide which view to return.
Use a library (such as YUI 3, jQuery, etc) to bind event handlers to your existing links and forms to override the normal activation functionality and replace it with an Ajax call to the alternative view.
Use pushState to keep your URLs bookmarkable.
You can return a JSON string from the server and handle it with Ajax on the client side.

Categories