I could not find a good tutorial for how to generate tabs in html page. I would like to create a function that automatically generates a tab from database information.
I was thinking something along these lines.
Get categories from DB.
IF(!EMPTY(gategory))
{
create a new tab, named after the category.
}
Could somebody please link me to a good tutorial or maybe give an example.
Thank you.
Well, you know PHP is a server-side technology and there's no way for creating tabs in the client-side without JavaScript help!
In that case, check jQuery UI / Tabs:
http://jqueryui.com/demos/tabs/
You'll need to initialize your script by forming some JSON and iterating an array of tabs information so you should have enough for creating the whole markup that jQuery UI tabs needs in order to get initialized.
Related
I want to add custom PHP to my wordpress site.
I managed to do it but the result is displayed in another page and it is just simple text.
I created simple calculator, and when user hits submit I want a div with the result to occur right below this calculator.
What is the simple way to do it or where can I seek some advice? Couldn't find it on google.
PS I am using wordpress themes so I added the action for the form as another file.
You could use javascipt to toggle visibility of your calendar div after response or add your custom div into response. You didn't wrote much. At first you should check out what is AJAX and find out where your response is creating.
If you didn't choose to add that for response, you can simple add PHP block to your templates files with <?php ... ?>.
Good luck! :)
This is a bit more abstract than the usual questions which I know goes against the spirit of things, but I'm hoping that I can still get a good response.
Here's the issue. We have a fairly complex web application that is written in PHP. The purpose is relatively unimportant, but simply put: We are using Comet / AJAX / JSON / JavaScript / PHP / MySQL (NO jQuery, however, native JavaScript only) to render controls that display data in real time. Throughout this application we are rendering popup modals using native JavaScript. It's fairly complex logic that tests for the existence of a modal with the same name on the page and prevents creating new versions of the same, and of course once created a layer is created to prevent interacting with links beneath.
The issue is that we have at least one modal that can be called multiple times before it is rendered on the page due to the time it takes the AJAX call to collect data from the database and assemble it for presentation. If a user were to 'double click' on said link they would be presented with two modals, one on top of the other. I've been able to actually render 8-10 of these. Interacting with the topmost modal appears to be broken because the user is actually effecting collapsible headers on the bottom-most modal. Once you start closing the dialog boxes and get to the bottom you can see where you've clicked.
So, my issue is this: What is the best way to prevent this behavior?
I've considered simply adding a function to the onClick event that would remove the onClick attribute from the link after the first click with a minor timeout (say 500ms). I've also considered trying to implement bit testing logic that would count clicks and only actually first the event after the first click and reset when the modal is closed.
What I'm wondering is if someone has any thoughts or suggestions or even has tackled a similar issue and has some insight on best practices to accomplish my goal in this instance.
Thank you very much.
You can unregister the click handler once it fired:
var element = ...,
myClickHandler = function(event) {
// ...
element.removeEventListener('click', myClickHandler, false);
// ...
}
element.addEventListener('click', myClickHandler, false);
In this case, I found the simplest solution to be the best but I would still love to hear other feedback if'n it's out there.
In this case I found that the order of operations was the issue. I was awaiting the AJAX response to generate the body html for this modal. I changed the order to instead create the modal immediately using <p>Loading...</p> within the body of the modal. Then, when the AJAX was completed and I had my new body text, I just injected it into the modal's content area with a neat bit of code and Bob's your Uncle, we had jackpot.
I'm working on a self-made e-shop CMS and in the backend and I need to be able to create relations between products. When adding a new product I want to be able to open a popup window in which I can select the related products and then, when I close the window, I need the selected items to be sent back to a field on my page (ie comma delimited string with the selected values). It doesnt HAVE to be a popup window, I'll be glad to use any other method as well, as long as it does the above.
Which ways can I do this? I know Ajax/jQuery will probably do the trick but I don't have much experience with them.
There are a lot of ways to achieve that. One of these in the following scenario:
First: You have a PHP script that connects to the database and get your data.
$query = "your query";
$results = mysql_query($query);
$yourdata = array();
while ($row = mysql_fetch_array($results,MYSQL_ASSOC))
{
/* format the data in JSON format*/
}
echo json_encode(array("yourdata" => $yourdata));
Second: Using jQuery or JavaScript to make an ajax call to the script and then read the returned data from the PHP script and output it in HTML elements.
Or you you can format the data in your PHP script and use JavaScript to parse it and display it.
I can't show you a complete example here for all that but if you search around you will find a lot of examples.
I also highly recommend, if you want to get started with all of this, Head First jQuery, a fantastic book that gets you started with jQuery.
There are great chapters such as chapters 8 and 9 where you will find how you can use jQuery and ajax to get the data and pass it back.
You will find the example code in this link. Download the sample code for chapter 8 and 9 and try it.
For the popup window part there are a lot of plugins and there are also jQuery UI try this: Modal form.
I hope that will be helpful.
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 made a drag and drop utility that make it possible for users to drag and drop elements directly on a workplace and create their page, I wound how can I save the user's work as HTML page!
You mean the position of all elements? How about iterating through them and saving their position? If you use jQuery you could do something like this:
var positions = new Array();
function savePositionOfAllDivs() {
$('div').each( function(){
$this = $(this);
id = $this.attr('id');
position = $this.position();
left = position.left;
top = position.top;
positions[id] = new Array();
positions[id]['left'] = left;
positions[id]['top'] = top;
}
}
And then send the positions array to some server side script which turns it into CSS which you can then embed into the HTML page that the user can download.
(With more specefic information about what your trying to do this could be way more easy and effecient. Say it is a order drag 'n drop functionality then you only have to save the order of div s)
Uhhm,.. press the save button? Seriously though, I think you might want to put more information on your question, such as what's system that you're using, etc, etc..
document.getElementsByTagName("BODY")[0].innerHTML
Most jQuery drag & drop libraries have the ability to serialize the elements that are being moved into an array that you can save. If you give me the link to the specific library you're using, I can tell you how to harness that.
However, if you made it yourself, you're going to have to try one of the above suggestions.
Maybe using XPath.
You may find useful this discussion on SO.
EDIT:Or maybe you could do sth with Node.childNodes.
for more information check MDC here
Are you trying to figure out the best way to transfer the HTML & CSS from the front end to the server or the best way to save the HTML on the server (as in DB or File)?
I am using jquery , and I made a drag and drop utility that you can use to place some html elements inside the page , I need to know how to save the users work in HTML file that he can download , or can view his work after saving it
I need the same solution that porta is looking for.
My scenario is i'm building a drag and drop cms. Users can drag drop html elements to build their pages. Now how do i save these changes (to db or to a session var) and must be able to create a static page with all the above changes that the user made with php. Can someone shed some light. I'm totally new to jquery and wouldn't consider myself expert in php.