I have a button on a page. The button is an image sprite, and it choose ADD in green. I want the user to be able to click this button, and then do a few things:
1) That button makes a call to add an item to my MySQL database, without reloading the page. (I think this needs AJAX.)
2) The button background image sprite changes such that it now says REMOVE in red.
I don't understand how to do this. I'd greatly appreciate a basic walk through on how to do it.
Have a look at this page that i created to demonstrate css sprites.
I call a function on click of the button that changes the image of the button.
You can call a function that does an ajax call inside this function.(Try looking at the source)
Take a look here to learn about ajax and database related stuff.
It will be easier to make the "AJAX" call if you use a JavaScript framework, such as jQuery.
You'll tell jQuery to issue a POST request (with data attached) to a PHP script on the server. The PHP script you write will add the item to the database. When the request is complete, jQuery will run a "callback" for you. In your callback, you can change the styling of the button.
Please see jQuery.post
That's the general overview and should get you started. Please comment on this answer if you'd like more details or examples on a particular part of the process.
Related
i have a website that uses a number of containers (div's). In this scenario, we have three boxes down the left side and one bigger box on the right of these boxes. The bigger box on the right is the only thing that changes when a link is pressed, this is done with Javascript.
SO i have the index which is the main layout of the website and i also have the "pages" of the site, so when a link is pressed the main box (on the right) loads the new data.
On one of my pages i want to collect data and then run it through a PHP script that is in the head of the file, but when i click the button i realise it refreshes the whole page and it doesn't run the script on the page with the form.
Anyone had a problem like this, or know of something i could do to work around it?
I'm not really sure what code would be useful for helping me but if you need something just ask.
Thanks for the help
Since you are loading all your content via JS already, you could just POST the form data via AJAX to a PHP script to process, then read the output and either provide an error message or remove the form from the page and show your success message.
How to approach your AJAX call is dependant on what you've used as a basis for the rest of your JS.
Personally I like to use the JQuery library, as it makes AJAX calls (and much more) very simple.
How about you make the page design able to do it. Have the backend be able to spit out the state of the page when it posted.
Or use Ajax to post the data back and set the new state like you do already.
I'm currently working on a site and I would like to barrow the technique from Facebook on how the 'pagination' or 'view more' works. I think I have it sorted out but I'm just asking if this is the prefered approach or if I'm way off base.
I'd have a More button that when the user hovered or clicked upon it I'd fire off an ajax request.
The ajax request would pass two variables the limit and the current item (just like a normal pagination would work) and grab the results from the database and render them as necessary for the feed/etc.
I'd use jQuery's append to add an anchor link here so i could jump to the spot where the last post was. Then I'd append the results from the ajax request to the bottom of my feed/etc.
Fire the link to move the screen to the anchor tag and call it a day.
Anything I'm missing? Any flaws that you see that you could give me a heads up on... I'm currently using primarily PHP, MySQL, and jQuery as my weapons of attack.
Any assistance would be appreciated.
I have implemented this with similar idea.
When you click the "more" button,
remove that button.
Request with $.getJSON a page to get next page data.
append those to the content-page-div.
append the removed "more" button to the end.
I am having difficulties in the following problem:
I have a screen in PHP which displays a list of some records when I choose any of these
records (by clicking) it gives me a web site to share the data with this record. So far, it works.
I need to click on some of these records, instead of him
open another page, scroll down the screen and the record data to appear in the same screen, ie without opening another window.
Do you have any idea how to do this?
Thanks
You'll need to have a DIV at the bottom of the page, which will be completed by using an Ajax call and some javascript or jquery.
Without going into too much detail, heres what needs to happen:
User clicks a link which fires off an ajax request.
The backend PHP script takes the ajax call and generates either XML or pure HTML and returns the data.
JQuery or JavaScript on the original page takes the return and populates the empty DIV at the bottom of the page.
Regards
It sounds like you'll need to use ajax to pull this off.
I would personally suggest starting with reading up on the jQuery javascript library if you are not familiar with it already. It provides a very good set of ajax tools to work with.
Create a DIV layer on the bottom of the page. Use a simple AJAX library like this
Create a new php page that will only load a new record based on the recordID and call this page on the onclick method of your link that is now opening in the new window
I would try adding some jQuery to your page to handle this effect.
If you do add jQuery here is a function written to do just that:
http://pastebin.com/SeMHwSgg
Call the script like so:
Where a is the record you are having them click on and href="[some anchor]" located at the spot on the screen where you want the scrolling to stop:
<a id="gotop" href="#" onclick="goTop();return false;">click here</a>
So
Indeed, there is no error, it just does not have the effect that (scroll down the screen and show the record data). For now, it only shows the record open in another window.
I've got a simple website using plain HTML/CSS to display and PHP/MySQL for data storage.
Now I'd like to add a toggle button similar to facebooks "like" button.
How can I act on the user pressing the button (add database record for this item, change button text) without leaving the page?
I thought this question would have been asked and diskussied to no end, but all solutions I found require some other frameworks than plain PHP as background.
You'll need to do it with javascript. Read up on "AJAX form posting".
A high level view:
user clicks on button
you capture the click via an onclick handler in javascript, and use it to call a javascript function
said function does a remote url request via XmlHttpRequest to a target page
that target page takes in the parameters passed via POST or GET and performs actions with them (eg add database record), and prints out any response required
the javascript function reads the response and acts accordingly (eg change button text)
and all this happens without refreshing the page.
You can do all this with pure low level javascript code, but plenty of libraries already abstract it while solving various issues with browser compatibilities. I'd suggest the jQuery javascript library. It provides an easy way to do exactly what you require, and good documentation.
I have been trying for a while now trying to figure out how to programmatically click a link using PHP and/or javascript. I have it setup so if the user clicks a link it will refresh a table. You don't really need to know why I want to do this b/c then it will go down a whole long road of confusion. Just know that there is a link to be clicked and I really really want to programmatically click that link using PHP and/or javascript.
Is there really no way to do this?
Edit: The code where I need to put the auto-click is in PHP, which would have to create and trigger some javascript or jquery or whatever.
Edit 2: Ok, now that you're all confused ... the real problem is that I have a Drupal form that has a property set to use AJAX when submitting. So the submission is done using the jquery plugin that is a module for Drupal. The AJAX setting is just an attribute setting and I do not have access to the underlying code that goes along with the submission of the form. Which forces me to have to refresh the table after the button is clicked. I really wish I could just attach the refreshing to the button click event for the submit of the form. But since I don't have access to that code I don't believe it's possible.
With Javascript, you can since it runs on the client machine, where the link exists. But the link doesn't even exist when PHP is doing it's magic, so you cannot click it "with" PHP. Keep in mind that PHP runs on the server, but the link exists only on the client.
Click a link with Javascript is rather simple:
// Index Page
document.getElementById("mylink").click();
Make sure all of your values are spelled properly. You can even output this command from PHP:
<?php print "<script type='text/javascript'>
document.getElementById('myLink').click();
</script>"; ?>
</body>
</html>
Note I placed this just before the closing </body> tag to ensure the link is present on the page.
Since it is drupal i assume that the form you're speaking of has an URL and therefore you could inject javascript code with the following module: JS Injector