I want to create a simple way to bookmark pages in my PHP app using Javascript.
I have a list of items and each one will have an image (maybe an empty star) which when clicked, will toggle a value in MySQL field for that specific user, (from 0 to 1) and also change the image for that item in the list to bookmarked (likely a full yellow star)
Where do I start?
Here is a quick primer:
you'll need to use javascript to trigger an action when the star is clicked. I suggest you use jQuery.
The action you trigger to do the following:
call the server to tell it the image has been clicked, with the jQuery.ajax() function: http://api.jquery.com/jQuery.ajax/
read the response of the server to make sure the user's preference was recorded (I suggest you use JSON to encode the response from the server, easier to use in JavaScript).
change the image. You can read this: Change the image source on rollover using jQuery
Happy coding
Related
I have a flash banner working with xml and I want a control page for it. For example, when I change banner width from control page also banner change at the same time and same page without refresh. So that occur a preview for flash banner. PHP,HTML and banner available. But how can I get data from form instantly
if "instantly" means without refreshing the page, you need to search for AJAX.
here's a starting point for you:
http://net.tutsplus.com/tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/
or, directly from flash:
Flash - AJAX call
You need to re-write the code with AJAX, modify all size-related properties for the swf. The script will monitor the form, and onChange (not onSubmit), read the values, remove the previous code and write a new one. I don't think that simply changing the values of the previous object will work on the fly.
I have created a page with Mysql rows displayed as a dynamicly created image grid.
The grid display i have full control over, but i need to take the (Mysql) Row ID from each image displayed and use it in a pop up of some sort.
I don't like having a full page for each Mysql row.
It could be passing it on to a new smaller info page(dynamic) or it could be a popup with the info(dynamic).
I would prefer the popup, since i would guess this is easier on the eyes.
So what i need a suggestion on a popup function, which will load/set the row ID on click.
I have seen Jquery solutions for making popups, but i need to pass in the variables allready set by each displayed image. and this is where i fail.
Thanks in advance.
/Niels
**
This is one of the things i have tried, but i can't really figure out the way to pass it in the right way:
echo "<p>Show"
When you render the page in PHP, you could use a data attribute <div data-mydata='foo' /> to store the ID you need. Then, with jQuery, use the data() function to access the data and render whatever popup you need.
HTML 5 data attribute: http://ejohn.org/blog/html-5-data-attributes
jQuery Reference: http://api.jquery.com/data
I need help in identifying how I should set up this non public website.
Basically there are around 2000 images referenced in a database.
Each user will be able to check or uncheck each image with the use of a checkbox.
Some users might have different images checked or unchecked.
I want the checkbox to process an AJAX request to a user specific XML (PHP generated from the db) which contains a boolean variable for each image entry.
The PHP then references the XML and highlights checkedboxes and disables the uncheckedboxes.
Again each user will have different references for each image.
Im not sure if the above is the correct method to use.
I want the page to dynamically load the first 20 images and if the checkbox is changed, instantly updated and refreshed without a page reload. Then I'll paginate to the next 20.
If I'm on the right track I'll attempt a demo and post an update.
Thanks,
Depends how you want to do it. You'll need to brush up on your javascript as well to track the on change event. If you're bring in the images with ajax to begin with I would create an object for each and attach the event to element. Then on click you could post the image_id or what have you to the server. Alternatively you could use an attribute on the checkbox/image like data-imageid="1"
JSON or XML, both will work, it just depends how you want to design it. Though from my experience I would use JSON instead.
The JSON array you would return might look something like {1:true,2:false,3:true} etc, so foreach key value pair you would either check it be it true or not on false.
Consider editing your tags for javascript or jquery to see if you get some better answers. Or I could elaborate further if I'm on the right track.
I want to put Thumbs up/Thumbs down buttons on my website.
There will be quite a few of them displayed at once, so I don't want to have to do a POST and reload the page every time the user clicks on one.
I thought of using re-skinned radio buttons to choose Thumbs up/Thumbs down, but that would require the user to click a submit button.
So how do I do this? I am open to using JavaScript or some other form of Client-Side scripting, so long as it is built in to most/all web browsers.
Thanks!
YM
I would take a look at using jQuery, http://jquery.com/ It is a WIDELY used library and there is tons of support for it both here and # jQuery's website.
You could easily assign all those thumbs to do an ajax post to a save page with the correct id and the user would not know the difference
You're definitely going to need to use JavaScript on this. Well, there are other client-side languages that could technically do the job (ActionScript, for example), but JavaScript is definitely the best way to go.
Look into AJAX (Asynchronous JavaScript And XML). This is just a buzzwordy way of saying use the XMLHttpRequest() object to make page requests with JavaScript without reloading the page. Here's a good tutorial: http://www.w3schools.com/ajax/default.asp . Note that, despite the word "XML" being in the title, you don't have to use XML at all, and in many cases you won't.
What you'll basically do is this:
Have your thumbs-up and thumbs-down buttons linked to a JavaScript function (passing in whether it's a like or dislike via a function argument).
In that function, send a request to another page you create (a PHP script) which records the like/dislike. Optionally, you can have the PHP script echo out the new vote totals.
(optional) If you decided to have your PHP script output the new results, you can read that into JavaScript. You'll get the exact text of the PHP script's page output, so plan ahead according to that -- you can have the PHP script output the new vote totals in a user-friendly way and then just have your JavaScript replace a particular div with that output, for example.
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.