So I have a table that is populated using AJAX show on a webpage and am able to generate it live from database results, with this though I want to make more of a friendly web front-end and be able to delete from the database, but I want something that will live update, and am wondering how I can turn something like this
Delete
Into an XMLHttpRequest Delete.
The way the above works is by adding that unique IP to the URL then the PHP grabs it and refers it back to the database to then to delete it.
I know the above method is unsafe but it's for a college project to show we can do it.
Any help would be greatly appreciated!
Add a "click" eventlistener to the hyperlink element, which executes a function where you send an XMLHttpRequest to your hostRemove.php
Have that php script return some value(s), that you check in your XMLHttpRequest's OnReadyStateChanged callback function, and to which you react appropriately (by deleting the concerning row through DOM manipulation, showing an error message if failed, ...).
Don't forget to catch the event when you define eventlistener's function, and call PreventDefault on it. Alternatively, you could use a button instead of a hyperlink.
Related
i need some help for my fresh installed Typo3 Website.
I want to set new Values within my DataBase via jQuery onClick Event.
So i guess i need to make use of this class: TYPO3\CMS\Core\Database\ConnectionPool.
Can someone Guide me how i can make use of this class within JavaScript.
I already tried the following, but i can't get it to work
define(['jquery', 'TYPO3\CMS\Core\Database\ConnectionPool'], function($, conPool) {
if(conPool.foo == 'bar'){
conPool.init();
}
});
Typo3 source
I appreciating any Help. Thanks
Your frontend should not be allowed to communicate directly with the database of your TYPO3 instance.
If you allow it anyone can inspect your javascript and get credentials to access your database - and do anything they like. :(
The correct way is a server request with the data you want to change.
then some PHP can compute the data (verify, adapt, ...) and change the value in the database (as PHP has the local credentials to access the database). Then it's up to you to give a notice in the front end if that operation was successful or not.
Such a server-request could be a complete page request, but a simple AJAX-call would be enough. Though you does not need to rebuild the complete page. From the Return of that AJAX request you can show only a notice about failure or success as a flash-message or similar.
I have some problem while getting data from another site. In this case I want to get the reservation data from the booking engine site and they want to pass the data to me with Google Tag Manager. I don't really understand what I should do when they just need GTM code. What I should create in my server to get the data from the booking engine with Google Tag Manager ?
This is the illustrations:
I have two sites called sites1.com and sites2.com. In sites1.com I put the Google Tag Manager scripts to push form submit data like full name, last name, email, etc. After somebody submit the form I want to get the submited data in sites1.com to sites2.com with Google Tag Manager. My problem is how to get the data after somebody submited the form in sites1.com in my sites2.com ?
Please anybody knows how to resolve my problem . Thanks in advance .
Well if they implement your GTM from site2.com into site1.com all you need to do is:
Create a trigger for the submit button on the form (use the ID o class of the element and check for the that the Page URL contains site1.com/)
Create a tag where you want the information to be send
Scrap the fields with javascript or ask them to push to the dataLayer the information you need (in this case you can build the trigger based on this event)
And SUPER important: check all your triggers so no other tag fires on site1.com
2.1:
Im not sure if i get where you want this information to be stored but keep in mind GA does not accept PII. On the other hand if you want this in some DB you can just create and endpoint and send the information as parameters. Example:
site2.com/booking_info?field1={{DL variable}}
And just use a Custom IMG tag.
Ive made something like this using API Gateway, Lambda and DynamoDB and it took me 15 mins to set up. (just to give you perspective)
-- EDIT:
Ones you have the information avaliable you can send it to your database using two methods:
Using a HTML tag and making a request with javascript
Making a request with a custom image tag
On the past i ve just added the URL with parameters where you want the request to be made on an image tag and worked perfectly for me.
-- More info:
The custom image tag requests an image from a particular URL. The interesting part is that by making the request you’re actually transmitting information to a server. For example, if you request an image via URL https://www.example.com/something?parameter1=good¶meter2=123, the receiving server processes parameter1 and parameter2 and acts accordingly (e.g. registers those parameters as an event).
Source.
I have a website and when a user follows an internal link I would like to pass some extra information to a new page, so JavaScript on the destination page could do some useful highlighting.
There is an option to pass that information via the link parameters (GET), but it will generate lots of virtually duplicate pages and break pretty URLs concept. Another way is to make a webapp using AJAX, but it will also bound content to a single URL.
How can I transparently pass some information to the new page during navigation w/o messing with site's URL structure?
You could store the data in local storage or session storage, and retrieve it again on the destination page.
So you have a few options.
Form Submission
First option post a form with the data. Add a hidden form, on the anchor click capture the click event, set the hidden fields with the values you want to send to the next page, and submit the form. On the next page, read the post parameters in the backend and update the page.
Local Storage
On click of the anchor, set localStorage to the values you want to appear on the next page. When the next page loads, read the localStorage values and update the page. Note: The server will not have access to the values
Ajax with pushState
Use Ajax to submit the form. When the Ajax call returns, use window.history.pushState to update the url with whatever url you want to be displayed to the user.
One of the options not mentioned is to create a dirty URL:
/destination/param1/value1/...
then strip additional parameters at server-side and redirect:
/destination
keeping additional values stored at server-side (e.g. via sessions). I still prefer using sessionStorage in a real application, but it worth mentioning anyway.
What do you mean it will "bind content to a single url"? AJAX request is the first thing that comes to my mind as the solution to this problem. You dont have to use the url of the page to make the ajax request, you can build the url inside your javascript based on whatever conditions exist in your application.
Besides AJAX and passing parameters in the URL, the only other thing I can think of is to use Cookies. That of course runs into problems if the user has cookies disabled. I think an Ajax call to your server is the most robust way of handling the problem.
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.
In my Facebook application I am displaying a message window using FB.ui { method: 'send' ...}. I would like to capture the list of recipients (stored in the 'recipitents []' hidden form field) as well as the message text in my application database.
Is there a way to do that?
Here's what I have come up with so far:
Dynamically set the onclick attribute in the DOM element (which corresponds to the Send button. So far I have been able to do that using the browser development tools (e.g. F12 in IE9) but not in code; it could be tricky since the dialog doesn't exist at load time). Unfortunately I haven't been able to define a Javascript function that was in the right scope (I thought there was only a global scope) for the onclick callback to find it.
Construct the Facebook Send dialog from more elementary building block (e.g., friend picker, send method invocation) so I 'own' the click event.
Clone the FB.ui() code and modify it to include additional parameters when calling the redirect url.
Require the user to include me in the To list (really only last resort), or default the 'to' field to the application's user id.
Finally, I expect to be able to call my web service from Javascript to record the message details in my application database.
I'm pretty sure this is not available via the API by design. The Send button operates in an iframe so browser security will prevent you from accessing its internal state via Javascript.
Some other methods (such as using FB.ui dialogs to post to the user's wall) provide a post ID in the callback and you can check this in the Graph API, but the Send button doesn't return anything like this.
For the Send button you can subscribe to the message.send event in the Javascript SDK and receive a callback with the URL which was sent, but not who it was sent to. ( https://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/ - the event itself isn't currently listed there, but does exist)
I can't think of why you'd want to do this type of tracking, it seems like a use-case with very few policy compliant applications.