search result in ajax tab

1) Script Title: Ajax Tabs Content script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...axtabscontent/

3) Describe problem:
I'm going to create a game. I have a statistic page where you can do searches. I want to put the result in a new tab on the same page.

Any idea? track? or maybe solution if somebody has done this thing.

Thanks

Is it server side? If so, you should be able to just have a PHP (or whatever server side type you are using) page with the appropriate server side code on it. Make that be the external page, use either the default method for inserting it into the desired tab, or use the expandtab method.

I really want to do this with a new tab on the same page. It's like when you are on a search engine and the result of your search is on a new tab in the same page.

I have seen this on twerq, a search engine.

Help me to do in this way please.

Well, it would be on the same page. What do you mean by a new tab?

I'm french and I'm not sure about the traduction of the word "onglet", so tab is my traduction of "onglet", so I'm sorry if it isn't the best traduction for this word.

If this is the good traduction, I'm going to explain better than my last post.

Quote:

---

jscheuer1

Well, it would be on the same page. What do you mean by a new tab?

---

"new tab" :
For every search the user do, a tab/"onglet" is printing on the page. Then, he can view all searches he did.
Tell me if it's a better explication of "new tab".

Thanks for your help.

For that, you would need to create a new tab either via the DOM or by inserting the appropriate innerHTML to your target area. There could be problems with the DOM in some browsers - also with innerHTML but, that is less likely unless forms are being created. However you get your new tab onto the page, it will then have to be initialized to the script, or you might be able to create it already initialized. Once you get that taken care of, you would just have to fill it with your content page, as mentioned before.

This is quite a project though, really beyond a simple tweak to the script. To even test it out would require quite a bit of work owing to the fact that Ajax will not work cross domain and at least two pages, some server side and client side code would have to be developed.

Projects of this nature usually find no takers here in the forums but, you are welcome to wait and see if anyone else picks it up.

This really is more appropriate for the site owner and/or their employee(s) to develop.

An easier method might be to insert an iframe with the results page as its src. Then it would just be a matter of getting the design to look as desired:

Code:

---

function addResults(url){
var rf=document.createElement('iframe');
rf.src=url;
document.body.appendChild(rf);
}

---

Other attributes and/or style could be set for the iframe and it could be inserted virtually anywhere on the page.

Thanks for your help.

I made it, create tab with the name who is enter in the input tag!
I put the script here :

Quote:

---

.js (I add some function in ajaxtabs.js)
function recup_donnee()
{
test = document.forms[0].elements["nom"].value;
create_li_in_ul();
startajaxtabs("maintab");
}

function create_li_in_ul()
{
//deselect all tabs
ul_child_list = document.getElementsByTagName("li");
for (var i=0; i<ul_child_list.length; i++)
ul_child_list[i].className="";

// create tag 'li' and attributes
ul_liste = document.getElementById("maintab");
create_li = document.createElement("li");
ul_liste.appendChild(create_li);
create_li.setAttribute("class", "selected");

// create tag 'a' and attributes
li_liste = ul_liste.lastChild;
create_a = document.createElement("a");
li_liste.appendChild(create_a);
create_a.setAttribute("href","external.htm");
create_a.setAttribute("rel","ajaxcontentarea");
create_a.innerHTML = test;
}

---

Quote:

---

.htm (I add this in the demo.htm)

<form action="javascript:recup_donnee();">
Recherche:<input type="text" name="nom" value="" />
<input type="submit" name="button" value="Rechercher" />
</form>
<br />
<ul id="maintab" class="shadetabs"></ul>
<div id="ajaxcontentarea" class="contentstyle"></div>

---

Now I want to increase the power of this script with three things.
- I want to make a function to close tab like firefox or IE with a cross on the tab.
- I want to move dynamically and horizontally my tabs (maybe drag and drop script?)
- Make a limit of the tab, because when I have a lot of tab, there is this PROBLEM

PS: Tell me if you think that I must create a new Post for this question.

Somebody can help me?
Thanks

I've had some experience that would be useful with the first item, closing a tab. Be a little careful. You should be able to just fetch the element by id or whatever method and do:

Code:

---

element.parentNode.removeChilld(element)

---

However, if the element or its children you are eliminating has events attached to it, these should be set to null first, before removing it:

Code:

---

element.onclick=null

---

to prevent a memory drain.

And, if the element is an li, you should do some tests to make sure it has been removed in all target browsers from the getElementsByTagName('li').length of the parent ul element. If it has not been removed from that length, it will mess up any future script operations that use that length property in their calculations.

Dragging and dropping in this environment should be able to be done but, it will be tricky as, you will want the items to snap into place, while displacing (moving) other items, and to be limited to a certain range as to where they can go. Calculating that will be tricky.

Limiting the number of tabs is easy, for example - if these are li's added to a parent ul, just check the getElementsByTagName('li').length of the parent ul element prior to adding more, if too many are already open, pop up an alert telling them to close one first.

This is the code of my tabs after I have created four tabs : home/game/book/text.
So I need to close a tab. I need to put a cross image on every tab with an onclick event. After that, write a function who closed my tab.
Tell me if it is the right way?

Code:

---

<ul id="maintab" class="shadetabs">

<li style="left: 0px; top: 0px;" class="">
<a rel="ajaxcontentarea" href="external.htm">home</a>
</li>

<li class="">
<a rel="ajaxcontentarea" href="external.htm">game</a>
</li>

<li class="">
<a rel="ajaxcontentarea" href="external.htm">book</a>
</li>

<li class="selected">
<a rel="ajaxcontentarea" href="external.htm">text</a>
</li>

</ul>

---

I have update my code :
I need some help to code the function close_tab please.


.js

Quote:

---

function recup_donnee() (always the same)
{
test = document.forms[0].elements["nom"].value;
create_li_in_ul();
drag();
startajaxtabs("maintab");
}

function close_tab()
{
//I need some help for this function now :D
}

function create_li_in_ul()
{
// create tag 'li' and attributes
ul_liste = document.getElementById("maintab");
create_li = document.createElement("li");
ul_liste.appendChild(create_li);


//deselect all tabs
ul_child_list = document.getElementsByTagName("li");
for (var i=0; i<ul_child_list.length; i++)
ul_child_list[i].className="";

// put the class selected to li
create_li.setAttribute("class", "selected");
create_li.setAttribute("id","drag");

// create tag 'a' and attributes
li_liste = ul_liste.lastChild;
create_a = document.createElement("a");
li_liste.appendChild(create_a);
create_a.setAttribute("href","external.htm");
create_a.setAttribute("rel","ajaxcontentarea");
create_a.innerHTML = test;

*************NEW************
// create tag 'img' in tag 'a' and attributes , fermeture d'onglet
a_liste = li_liste.lastChild;
create_img = document.createElement("img");
a_liste.appendChild(create_img);
create_img.setAttribute("src","ajaxtabs/close.jpg");
create_img.setAttribute("name","cross");
create_img.setAttribute("onmouseover","document.cross.src='ajaxtabs/close_onclick.jpg'");
create_img.setAttribute("onmouseout","document.cross.src='ajaxtabs/close.jpg'");
create_img.setAttribute("onclick","close_tab()");
}
*************END NEW********

---

.css (I have added some css too for tag "img"

Quote:

---

.shadetabs li img{
border : none;
margin-left: 10px;
margin-bottom:-2px;
}

---

Well, to close a tab:

Code:

---

<ul id="maintab" class="shadetabs">

<li>
<a rel="ajaxcontentarea" href="external.htm">home</a><img style="cursor:pointer;" src="x.gif" onclick="this.parentNode.this.parentNode.removeChild(this.parentNode)">
</li> . . .

---

But, as I was saying, you need to get rid of the li's event (an onclick was assigned to it by the Ajax Tabs script) so let's do this:

Code:

---

<ul id="maintab" class="shadetabs">

<li>
<a rel="ajaxcontentarea" href="external.htm">home</a><img style="cursor:pointer;" src="x.gif" onclick="closeTab(this.parentNode);">
</li> . . .

---

Code:

---

function closeTab(el){
el.onclick=null;
el.parentNode.removeChild(el);
}

---

But, its content will still be in the content area so:

Code:

---

function closeTab(el){
var id=el.parentNode.id;
el.onclick=null;
el.parentNode.removeChild(el);
expandtab(id, document.getElementById(id).getElementsByTagName('li').length);
}

---

Untested

Thanks Im' going to try this script ! I'll be back in a few hours.

I'm back, thanks for your Help, the script is OK !
Now, I'm going to limit the number of tab that it's possible to open. (10 tabs)
If you want to open the eleventh tab, an alert window is open to say to the user that the first tab will be closed if he wants to continue.


So in my function recup_donnee(), I have added some line :

Code:

---

function recup_donnee()
{
****************NEW**************************
        nombre_li = document.getElementsByTagName('li').length;
        if (nombre_li >= 10)
        {       
                alert('too much tabs, we are going to close the first tab');
                ul_liste = document.getElementsById('maintab');
                li_id = ul_liste.firstChild;
                close_tab(li_id);
                startajaxtabs("maintab");

        }
****************END NEW***********************
        test = document.forms[0].elements["nom"].value;
        create_li_in_ul();
        startajaxtabs("maintab");
}

---

You might actually want to use a confirm then:

Code:

---

var ctabclose=true;
if (nombre_li >= 10){
ctabclose=false;
ctabclose=confirm('too much tabs, do you want to close the first tab?');
if(ctabclose){
ul_liste = document.getElementsById('maintab');
li_id = ul_liste.firstChild;
close_tab(li_id);
startajaxtabs("maintab");  //this call may not be required
}
}
if(ctabclose) {
test = document.forms[0].elements["nom"].value;
create_li_in_ul();
startajaxtabs("maintab");
}

---

I think your code is good but :

Code:

---

ul_liste = document.getElementsById('maintab');
li_id = ul_liste.firstChild;
close_tab(li_id);

---

This code, in my opinion is false. It's me who have wrote this lol. So the function doesn't work yet. I'm going to find the problem.

I have resolved the problem :

Code:

---

ul_liste = document.getElementsByTagName("li");
ul_liste[0].onclick = null;
ul_liste[0].parentNode.removeChild(ul_liste[0]);

---

I have put this code instead of the previous and it works !

In fact, there is one problem, if I have three tabs and I want to put another one, it works. The script remove the first tab if the user is OK. When the user have 3 tabs and close one or more tabs, the variable "nombre_li" isn't update, so even if the user have closed 2 tabs, the javascript alert is already run :confused: (or javascript confirm)

I'm going to find where is the problem but if somebody can see the answer before I update this post.
Well, I fix it. I have added a global variable in the beinning of my script.

Code:

---

var nombre_li = 0;

function recup_donnee()
{
        var para = document.getElementById("var");
        nombre_li = document.getElementsByTagName("li").length;
        para.innerHTML = nombre_li;
        var ctabclose = true;
        if (nombre_li > 3)
        {
                ctabclose = false;
                ctabclose = confirm('too much tabs, do you want to close the first tab?');
                if (ctabclose)
                {
                        ul_liste = document.getElementsByTagName("li");
                        ul_liste[0].onclick = null;
                        ul_liste[0].parentNode.removeChild(ul_liste[0]);
                        nombre_li = document.getElementsByTagName("li").length;;
                }
        }       
        if (ctabclose)
        {
                test = document.forms[0].elements["nom"].value;
                create_li_in_ul();
                startajaxtabs("maintab");
        }
}



function close_tab(el)
{
        var id = el.parentNode.id;
        el.onclick = null;
        el.parentNode.removeChild(el);
        nombre_li = document.getElementsByTagName("li").length; // NEW LINE
        expandtab(id, document.getElementById(id).getElementsByTagName("li").length);
}

---

And now, I will go to the last item(I hope) : Drag and Drop function
If you have any idee, they will be welcome.

I have seen another problem on my script, the ONMOUSEOVER works the first time I create a tab, after that for the next tab this event doesn't work, and I don't understand why :confused:

You think that the drag and drop script could be integrate into my script?
Thanks