I have a gallery of products that is dynamically created using php and mysql on the load of my htlml page. I am to take all of the images in the gallery, and turn them into links that will produce a modal window with content that is dynamically generated depending on which product is clicked.
My first thought is to use Jquery to select all of products, place an <a><a/> around each image and pass some kind of identifier to the my php that will generate the content in the modal window. is this thought process correct for trying to achieve this, or is there a better way to look at accomplishing this. Can any one provide some sample code that i can look at for direction.
Yes, what you're describing will work.
However, I'd suggest you generate the wrapping in php and leave jQuery to handle only the click events, which would look something like:
$('a.product').click(function () {
$.get('/some/url.php', data: {id: 1234}, function (data) {
// Request is sent to /some/url.php?id=1234
// PHP responds with some HTML
// Output the HTML somewhere
$('#output').html(data);
});
});
If you're using a library for the modal, some of them support AJAX loading of content already, so you don't need the $.get, but instead just supply it a URL and the query params.
Related
I'm looking to load my site pages using AJAX, therefore saving on loading the header and footer every time and just changing the content.
How would I go about doing this as I am using smarty?
I'm aware that this may be the order it needs to go in:
--
Request PHP
parse TPL
make html
show in browser
--
I'm just not sure how to actually go about doing the second and third steps particularly.
Do what you would normally do.
For AJAX: Call some javascript function, retrieve to-show data, show data in some DOM location
For php/smarty: recieve request (from ajax, but who cares), do PHP stuff, fill smarty vars, call smarty show, return to-show data.
You can do it in two ways :
Call a jquery ajax function that change contents of div.
second :
Use iframe where you want change content.
How would I go about permanently add a class to a html element using jQuery.
I am planning on building a image gallery that is sorted into types/categories using the jQuery sorting plugin. I want to add a dropdown box below each image that allows the user to change the type (add/remove class) which permanently changes the HTML for next load. How would I go about this?
EDIT: Ok so from what I can put together I should use this approach:
Jquery add/removes class.
Send full HTML of source via AJAX request.
PHP writes full HTML to file or is there a way to replace only a particular part of a file in PHP?
You could use jQuery's ajax functionality to send back edited HTML to the server to be stored in your database after the user has made their changes.
You can then build up the relevant parts of your page from your database on the next load.
$('#mySelectBox').change(function(){
$.ajax({
url: "updateHtml.php",
data: $('#myEditedHtmlContainer').html(),
success: function(){
// do something on success
}
});
});
You first need to know the distinction between Client side scripting and Server side programming.
The server will return you a set of html on each response which is generated by the server side php in your case.
If you want to modify a class on a certain element, and you want this change to survive the next generated server side php response, you need to somehow inform the server of your change.
There are several options to send data from the client side to the server side.
Store the value in a hiddenfield
Make an ajax request and store the value somewhere on the server so it is aware of this change at the request.
Add it to the querystring of the url being requested.
One solution is to store user decision in cookie. The during very page load, you'll need to check for the appropriate value in the cookie and based on it apply the CSS.
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.
So I am trying to have a dynamic tabs kind of thing using both php and javascript. To make it much easier to understand, remember the two choices on facebook (Recent news and most recent) or something like that, when you click on one of them it just changes the content that you see in the middle without updating the page. i know how to delete the content in a div for example, but after deleting the content in the div (innerHTML = "") I want to populate it with the option chosen from the database.
So let's say I have an option (all) and an option (only this)
The default is all so when I run the page, I will just get all. However, if I click on only this, it will clear the div "my header" and will replace the content with the latest content from the database (database) and display it.
For that I need both php and javascript, is there a sample or an easy way to do this before i start digging around.
((Sorry if is not clear but the facebook example should be clear enough))
Whatyou are looking for a is AJAX/PHP approach.
Clicking on the tab
The current content gets removed. This is possible because it has a unique "id" attribute in the HTML code
The server is asked for the new content. This is the AJAX request that will be triggered after/while/... the content is removed.
The server sends back the code. This can be HTML, JSON, XML or similar.
You script recieves the answer, may "do" something with it (like some parsing or similar)
The content will be placed on the page (again, this is possible due to an unique "id"
This is basically the way it is done.
Check out the different JavaScript frameworks. They all come with nice AJAX support:
jQuery
MooTools
dojo
Prototype
And of course, SO is also a nice place to look at: https://stackoverflow.com/questions/tagged/ajax+php
What you're talking about is ajax.
I would suggest a javascript library to help leverage this, like jquery.
It can be as cool as
$.post('serverScript.php',
function(data) {
$('#idOfDivToUpdate').html(data); //shove script data into div
},'html' );
tutorial.
I would like to create a pagination system for comments in my website.So far, I have been able to create pagination using php/mysql and html but the page has to refresh every time we click on the next button(for the next set of comments) or previous or a particular page....
As far as my knowledge of jquery is concerned I am thinking that, when the user clicks on the next button we post data for the page number to comments.php then echo all the comments in comments.php, then the jquery data variable recieves all the data echo'd in the file and appends it to the #comments box...
Is my solution a valid one??? or anyone has a better solution.....thanks
Your question doesn't make much sense and is very jumbled.
You can either load the entire list when the page first loads, and use jquery to paginate it by hiding the extra entries, which will work fine for lists with a few pages worth of content.
The other option is to use AJAX to fetch the next or previous page when the appropriate link is clicked.
There are plenty of pagination add ons for jquery. Maybe check them out.
Don't use a POST request to get the next page as it looks like you might be, unless you are just using the wrong terminology.
Yes, when you click 'next', you send ajax request to comments.php and replace current comments with new ones.
You can do it with a get()/getJSON() call in jQuery.
Something like
$('#next').click(function(){
$.getJSON('url?withnextpage=number',
function(data){
//update variables or the DOM
});
});
Returning it in JSON may be quicker. I hope that helps