edit: i found a solution using jquery and append()
from php, i build the array that contains all the information i want to insert into the tab divs. Then i send this array to jquery by encoding the array into json end echoing it, and catching the array using getJSON. Now i can successfully add my data into the respective divs. Thanks for the help
Here is my situation: on my main page, a user can input a link and send it to the database alongside the link's type (if it's a link about nature, news, technology, entertainment..)
Now on the same page, i have a div that is loaded up without refreshing the entire page, and inside this div i have a tabbed interface where each tab represents a link's type. Inside each tab resides a link of the respective type.
In my database, i store the link and the link's type
Here is my problem: how can i correctly fill the tabs with the links, knowing that the ID of a tab to fill is only known when reading the database in the PHP script
Here is the div with the tab interface
<div class="tabs">
<ul class="tab_nav">
<li>News</li>
<li>Technology</li>
<li>Sport</li>
</ul>
<div id="News">
</div>
<div id="Technology">
</div>
<div id="Sport">
</div>
</div>
What i want to do is insert a link of a certain type into the div with the corresponding ID. The link's type (and the div's ID) is only known when fetching the database.
I'm new to making websites, and i am completely stuck here. I don't know how to deal with this.
Thank you!
try this:
$('a').each(function(){
t = $(this).text();
$("#" + t).text($(this).attr("href"))
})
Is this what you want?
$('a').each(function(){
$(this).clone().appendTo("#" + $(this).text());
})
Here is the whole code: Click here!
Note: It uses jquery. Just want to say that since you said your new to the web thingy.
Related
I would like to make a website with one page that has inside other pages.
To go from one page to another there's a tab or similar menu, so the page doesn't change, only the inner content.
The inner content has a lot of jquery and php: one has a form to make a search on the left and the results are shown in the center with datatables, so you can search inside the results, order them, etc, etc. When you switch from one content to another I don't want the content to be reset ( example: you make a search and then you go to another page/inner content , when you come back the results of the search have to be still there). One of the tabs has a list( a submenu). When you select something from that list every page has to know and to use that selected value.
I thought the I can make all this with a lot of ajax, jquery ui tabs and php.
My questions are: it's good to make something like that? Is there another way to achieve what I want? Would it be better to make a normal menu with a lot of pages( no more inner content, but diffrent pages) and keep the selected value in session?In this case how can I keep the results?(session again?)
I hope that this question is allowed. Thank you all!
EDIT: I'm not asking the code( I know how jquery tabs and I searched google). I'm asking if it's a good practice to make something like that( one page with a lot of content) or it's better to use more pages?
EDIT 2: I'll refrase my question. I have to make something like this: 10 pages with different content that have php, jquery inside with a menu to navigate from one page to another. When you go from one page to another the searches and options selected in the pages that you left have to be still there, so that when you go back you can see them. One menu has a submenu with a list. When you select something from that list the selected value changes things in half of the pages(what you see inside). How should I do this?(don't show me code, tell me only what should I use to accomplish this)
EDIT3: I looked online and yahoo mail has what I want. The top of the page is allways the same. Then you have a menu: inbox, contacts, calendar. When you click on contacts only part of the page changes ( my inner content as I called it) and the same happens when you click on the other voices in the menu. Inside contacts, if you click on one contact you can see details about that contact, then if you click on inbox and again contacts you can still see the contact that you selected before. How can I achieve this?
You can simple achieve this by using jquery Tab plugin .
or you should create your website template in which you replace content through ajax call.
<html>
....
<body>
<div class="tab_container">
<ul>
<li> Tab 1</li>
<li> Tab 2</li>
</ul>
<!-- integrate nested menu here -->
</div>
<div id="content">
onclick on tab selection display appropriate content here
</div>
</body>
</html>
I would suggest you if simply display content on the basis of tab selection than go for Ui-tabs
If you are developing complex website. and you need multiple menu. than try jquery dropdown menu. For displaying content, overwrite content div on the basis of tab selection using ajax as I have mention in my example.
Here is link for jquery drop-down menu
http://codecanyon.net/item/jquery-css3-dropdown-menu-plugin/996815?ref=jared501
Live Example
HTML is for structure and some simple data explanation.
If you want to make some data you should use something like PHP, ASP...
If you want to have some nice pages with effects use JavaScript and common this languages.
But you don't have exact question so the answer is the common
I have simple buttons in my web page. What i want is when anybody clicks a button, the paragraph below it gets populated with the results from a database query (that returns two columns). The list text includes elements of the first column. The list items act as hyperlinks with the source document being pointed to by elements of the second column.
For eg :
if the database table is
Name Link
Video1 url1
Video2 url2
Video3 url3
i want there to be the equivalent html code to be dynamically generated (after a button is pressed)
<ul>
<li>Video1
<li>Video2
<li>Video3
<ul>
ive been reading around and i guess AJAX is the man for the job. but i ust cant seem to figure it out
Here is a nice example of how to use ajax to grab data:
Performing GET and POST requests using Ajax
The PHP side is pretty basic. Just list the content you need from the database.
Also make sure you are protected against SQL injections.
I've got a main page with alot of "onclick" elements which use ajax to replace the content of different divs.
Most of these onclick elements are contained within the div that they change, thus they remove themselves and bring up new onclick options.
The problem I'm having is that a few of my onclick elements are meant to change the contents of OTHER divs, however the change they make should be dependent on the category already presented in the div it's trying to change (like A search filter).
So:
Example 1:
<div id="1">
HEALTH
<span onclick="ajaxfunction(div1)"> Doctors </span>
<span onclick="ajaxfunction(div1)"> Dentists </span>
<span onclick="ajaxfunction(div1)"> FItness Clubs </span>
<div id="2">
ELECTRONICS
<span onclick="ajaxfunction(div2)"> Video Games </span>
<span onclick="ajaxfunction(div2)"> Computers </span>
<span onclick="ajaxfunction(div2)"> Televisions </span>
<div id="filter">
Select max distance from store
<form>
Radio buttons, options 0, 5, 10 miles
<input type="submit" **onclick="query(div1)**> Refine Results </input>
So the important thing I'm trying to do here is that in the bolded js function, "query" I'm going to use mysql select statements to do a subquery of the current div1 results.
My question is, how do i get my js function "query" to know that the div 1 search value is currently "HEALTH"?
Should i make a PHP session variable holding the current value of the div whose value gets assigned to a javascript variable?
Is that possible?
use a global javascript var to save the div status
<script>
var current_stat = 'HEALTH';
function query()
{
// check the current_Stat
// do stuff based on the current staff
// change the current staff if the div contents chang
}
</script>
Instead of using <span onclick... you can also use a normal <a href, with the actual url to request as the href attribute. You can generate this url from PHP.
Then, (using JQuery, if you like) you can add the onclick event to those links, making them AJAX the url of the clicked link.
If you implement that search page correctly, it will render just the search results when it is an AJAX request, but the full page with the results in it, if it is not an AJAX request. With a proper PHP backend, this should be as simple as a single if in your backend code.
The advantages are (in random order):
You've found your answer (the info you need is already in the url).
The site will work without javascript too (not only for older browsers, but also for accessibility).
Screen readers will actually recognise the links, whether they support javascript or not.
The page is indexed better by search engines (it can follow the links).
The link behaves like a link, including hover, cursor, etc.
The link works when someone wants to 'open in new tab/window'
I have DIV on this forum page which has a variable ID. The ID is generated every time a new post is made. I would like to have this DIV push down the page a certain amount everytime a new ID is generated. Is there a way to do this?
I am using PHP to assign the ID to the DIV. Here is the code to assign ID to DIV whic works. But I still down know how to push this DIV down the page everytime a new ID is assigned. Any help will be highly appreciated...
<!-- PHP --> $post_id = $_SESSION['POST_ID']; <!-- ENDPHP -->
<div id="<!-- PHP -->echo p,$post_id; <!-- ENDPHP -->" style="position:absolute;"></div>
If you are using "ajax" to feed the entry in your php page, then just add prepend function in jQuery to add the current content in the top.
$("#maincontentid").prepend("HTML");
or if you are using page refresh, the try to fetch the data using descending order in your SQL query.
I am trying to create a popup when my link is clicked. I have been looking all over and all I could find was a html code like this
<p onClick="confirm('Correct?')" </p>
What I am trying to create is a popup that display a table with name, zip code e.t.c
so basically instead of the popup displaying correct like the code above does?, I want it to display somethings of my own choosing. I am looking for one that has a close button at the top it.
Thanks everyone.
So. You'll need a javascript function named showTable() and a div having an id: popup.
Change code to: <p onClick="ShowTable(ID)" </p>, where ID is the table's ID.
Store the table's values in a javascript array.
The ShowTable should consist of:
function showTable(id){document.getElementById("popup").style.display=block;
document.getElementById("popup").innerHTML=table[id];}
Also, the table[id] should conatin this too: Close popup
And add this function:
function closePopup(){
document.getElementById("popup").style.display=none;
}
To make it more designed, you could use jQuery animations.
Perhaps the option that requires the least amount of work on your end would be using jQuery UI, which has a Dialog plugin. You would need to be somewhat familiar with jQuery, though. Here's the link: http://jqueryui.com/demos/dialog/