I have a Calender Control, which is populated with events on Page_Load. When a user clicks on a cell I want to find the events in that cell and then populate a Text Area with the information.
I can get the Click Event to happen when they click on a cell but I don't know how to get the event and display in a Text Area in Javascript.
<DayPilot:DayPilotMonth CssClassPrefix="bsimplexcalender"
OnCommand="calender_control_Command"
ContextMenuID="menu"
EventRightClickHandling="ContextMenu"
EventRightClickJavaScript="select(e)"
BubbleID="DayPilotBubble1"
ClientObjectName="dpm"
runat="server"
ID="calender_control"
Theme="bsimplexcalender"
HeightSpec="Auto" Height="0"
MinCellHeight="63"
DataStartField="start"
DataEndField="end"
DataTextField="name"
DataValueField="id"
OnBeforeEventRender="calender_control_BeforeEventRender"
TimeRangeSelectedHandling="JavaScript"
TimeRangeSelectedJavaScript="''THIS IS THE CLICK EVENT I NEED TO FIND EVENT AND DISPLAY HERE" />
This code might help :
For JavaScript :
function loadCalendarEvent(day) { //call this function when table cell is clicked
//in var day pass the day clicked
var xmlhttp;
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
//just received the answer from server so do something with it here
}
}
var url; //link to php file
xmlhttp.open("POST", url, true);
xmlhttp.setRequestHeader("Content-Type", "text/json"); //change Content-Type to what you need
xmlhttp.send(day);
}
For PHP :
<?php
$ClientData = file_get_contents('php://input'); //day variable is stored here
//query database for event and save it to some variable
echo $thatVariable;
?>
If you want me to explain more, leave a comment...
Related
In this simple app the unauthenticated user searches for restaurants with the city name,
and when the user chooses a restaurant, he can click on going but he needs to login with twitter first,
now when the user is back after authentication I want to resubmit the term the user inserted so he won't have to search again.
this is what I tried
form.addEventListener('submit', (e) => {
e.preventDefault();
const xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function(){
if(this.readyState == 4 && this.status == 200) {
//format the data for the user interface
const businesses = JSON.parse(xhttp.responseText);
formatData(businesses);
}
}
xhttp.open("post", "http://localhost:3000/api/", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send(`location=${input.value}`);
//save searched term in a session
sessionStorage.setItem('autosave', input.value);
sessionStorage.setItem('refreshed', false);
});
//
//if the term is saved and the page is refreshed
//(will happen only when page is refreshed)
if (sessionStorage.getItem("autosave") && sessionStorage.getItem("false") == 'false') {
//restore the contents of the text field
input.value = sessionStorage.getItem("autosave");
//then submit
document.forms["myForm"].submit();
}else{
console.log('no item')
};
This works but the problem is when the form is submitted automatically it redirects again to "http://localhost:3000/?location=new+york"
which results in data not displaying.
I don't know how to stop it from doing that.
I think (I'm not an expert with xhr) if you don't specify
window.location //or
window.redirect
Your browser "reload" the last URL you have. When you submit automatically, try to add a redirection to your desired link.
I am trying to create a simple webpage containing comments in a table. I can successfully populate it by calling following function on "window.onload" event.
function FillCommentsTable() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var comments = JSON.parse(this.responseText);
var i = 0;
var old_tbody = document.getElementById("comments");
var new_tbody = document.createElement("tbody");
for (i = 0; i < comments.length; i++) {
var row = new_tbody.insertRow(-1);
var id = row.insertCell(0);
var user = row.insertCell(1);
var comment = row.insertCell(2);
var timestamp = row.insertCell(3);
id.innerHTML = comments[i].Id;
user.innerHTML = comments[i].User;
comment.innerHTML = comments[i].Comment;
timestamp.innerHTML = comments[i].Timestamp;
}
old_tbody.parentNode.replaceChild(new_tbody, old_tbody);
}
};
xhttp.open("GET", "API/get_comments.php", true);
xhttp.send();
}
The webpage also have functionality to submit and delete comment with simple form calling the API that manipulates the database storing the comments. The wanted functionality here is that after the submit/delete form has been submitted and called the API the page is reloaded and the table updated. To achieve this I have tried to reload the page on submit with:
<form action="API/delete_comment.php" method="post"
onsubmit="window.location.reload()">
<input type="number" name="id">
<input type="submit" value="Delete">
</form>
but this seems to have no effect except that the expected call to the API is sent. This also only occurs when trying to update the table with a form since just binding a button:
<button onclick="window.location.reload()">Load comments</button>
works as intented and updates the table correctly. Is it not possible to sent both the GET for the webpage and the POST to the API triggered on the same event or what am I missing here?
The point of AJAX is to be able to communicate with the server without having to reload the page...
Submit the form with AJAX instead and then simply call your FillCommentsTable again.
<form action="#" method="post" onsubmit="return deleteComment()">
<input type="number" name="id">
<input type="submit" value="Delete">
</form>
function deleteComment() {
var id = document.querySelector("input[name='id']");
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
FillCommentsTable();
}
};
xhttp.open("POST", "API/delete_comment.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("id="+encodeURIComponent(id.value));
return false;
}
Edit:
The above successfully sends the GET request retrieving the data. In addition to these changes I also added
new_tbody.setAttribute("id","comments");
in the FillCommentsTable function. The mistake of omitting this caused the comments table body to lose its name on the first reload which then caused subsequent calls to FillCommentTable to have no effect since there is no tbody called "comments" ...
Ideally, you should have two data call functions, one to GET data from DB and one to POST data to your DB.
function FillCommentsTable() {
//Function Stuff
}
function AddNewComment() {
//Function Stuff
}
You have a few options on how to process the data:
On POST of a new item, after you receive a status of 200, call your
FillCommentsTable function.
If you have an array storing your comments on the client side, as
you make your POST call and after you receive a status of OK,
array.push(newComment)
You can also take advantage of Promises (Browser support, ECMA2015) to ensure sequencing. I will leave it at a resource link for now as its not exactly within scope of the OP.
I often seen websites with a search function and when they search for something, the web page often changes the url to something along the lines of
search.php?q="searchquery"& etc , i have a search page on my site and i use ajax to submit a form that has a search input and sends to a php page which searches through my database and returns data to a specific div on the original page via echo.
function getdata() {
var str = document.getElementById("searcb");
document.getElementById("demo").innerHTML = "You are searching for: " + str.value;
document.getElementById("searchresults").style.display="block";
if (str == "") {
document.getElementById("demo").innerHTML = "";
return;
}
else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("searchresults").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "getuser.php?q=" + str.value, true);
xmlhttp.send();
return false;
}
}
HTML
<form onsubmit="return getdata()">
<input type="search" id="searcb" name="searchBar"></br></br>
</form>
My question is what am i doing differently that causes my url to remain the same compared to a common search engine
In general the url change because a post that reload the page is performed. Your url will not change because you call make an ajax call that will not reload your corrent page .
I am very close with this but struggling to get my dynamic php and Javascript to work together. Heres where I'm up too.
<script language="javascript" type="text/javascript">
function exefunction(id){
if (document.getElementById(id).checked == true) {
// Create our XMLHttpRequest object
var hr = new XMLHttpRequest();
// Create some variables we need to send to our PHP file
var url = "update.php";
var id = document.getElementById(id).value
var check = 1;
var vars = "id="+id+"&check="+check;
hr.open("POST", url, true);
// Set content type header information for sending url encoded variables in the request
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// Access the onreadystatechange event for the XMLHttpRequest object
hr.send(vars); // Actually execute the request
}
else if (document.getElementById(id).checked == false){
// Create our XMLHttpRequest object
var hr = new XMLHttpRequest();
// Create some variables we need to send to our PHP file
var url = "update.php";
var id = document.getElementById(id).value
var check = 0;
var vars = "id="+id+"&check="+check;
hr.open("POST", url, true);
// Set content type header information for sending url encoded variables in the request
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// Access the onreadystatechange event for the XMLHttpRequest object
hr.send(vars); // Actually execute the request
}
</script>
My php checks the database and will auto check the tick boxes accordingly:
if ($checkboxone == 1){
$Trans .='<td width="60">
<input id="'.$id.'" type="checkbox" onClick="exefunction(this.id)" value="'.$id.'" checked /></td>';
}else{
$Trans .='<td width="60"><input id="'.$id.'" type="checkbox" onClick="exefunction(this.id);" value="'.$id.'" /></td>';
}
What I need it to do is when a tick box is checked or unchecked it updates my database the issue I'm having is passing the unique id of the checkbox through my javascript. The javascript works if I put the id in and have one checkbox.
Hope that makes sense.
Okay, I've been struggling with this for a few hours now. I'm using ajax to update a div in my site with a php code however, i'm trying to send parameters in the function from the external javascript file to update the correct link(there are multiple drop down boxes)
for example: this is my select box
<script type='text/javascript' src='ajax.js'></script>//include ajax file
<select onchange='MakeRequest(raceupdate);
this.options[this.selectedIndex].value;'> //so no use of a button is needed to auto link to anchor tag
<option>Deathmateched</option>
<?php
dmList()
?>
</select>
Then next my external ajax function MakeRequest().
function MakeRequest(value)
{
var linkInfo = "teleport.php?call=" + value;//create appropriate link depending on function parameters
var xmlHttp = getXMLHttp();
xmlHttp.onreadystatechange = function()
{
if(xmlHttp.readyState == 4)
{
HandleResponse(xmlHttp.responseText);
}
}
xmlHttp.open("GET", linkInfo, true); //update page using link info variable created above
xmlHttp.send(null);
}
So as you can see I'm trying to pass a sting of text into this function, but I seem to be failing somewhere.
You probably want to setup your tag to pass "this". I don't see where your raceupdate variable is declared, unless it's global... in which case you should show us what you're doing with that variable.
<select onchange='MakeRequest(this);'>
<option>Deathmateched</option>
<?php
dmList();
?>
If you did it that way, you'd have to change this function as such:
function MakeRequest(element)
{
var linkInfo = "teleport.php?call=" + element.value;//create appropriate link depending on function parameters
var xmlHttp = getXMLHttp();
xmlHttp.onreadystatechange = function()
{
if(xmlHttp.readyState == 4)
{
HandleResponse(xmlHttp.responseText);
}
}
xmlHttp.open("GET", linkInfo, true); //update page using link info variable created above
xmlHttp.send(null);
}
And what are you trying to do here?
this.options[this.selectedIndex].value;
In your comments, it looks like you're saying you want to jump to an anchor tag? If so, then you would want to do something like
var anchorTag = document.getElementID("YOUR_ANCHOR_TAG_ID");
anchorTag.focus();