hide onload and show onclick

[skoff]

hi everyone! so the only thing im trying to do is to hide onload of the page a div that will come up on a click of a link

<script type="text/javascript">
function showUser(str)
{
if (str=="")
 {
 document.getElementById("txtHint").innerHTML="";
 return;
 } 
if (window.XMLHttpRequest)
 {// code for IE7+, Firefox, Chrome, Opera, Safari
 xmlhttp=new XMLHttpRequest();
 }
else
 {// code for IE6, IE5
 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 }
xmlhttp.onreadystatechange=function()
 {
 if (xmlhttp.readyState==4 && xmlhttp.status==200)
  {
  document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
  }
 }
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}
</script>


<script>
$(function() {
// a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
$( "#txtHint" ).dialog({
open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); },
modal: true,
autoOpen: true,
      resizable: false,
      width: '500px',
buttons: {
Ok: function() {
$( this ).dialog( "close" );

}
}
});
});
</script>

so on the load of the page i want my div "txtHint" to be hidden. And when i hit a link i want it to pop. But everytime i run my page with that code on it the div always come up. I tried with autoOpen set to false but it wont come up on the click of my link.. so im pretty much stuck right now!

Thanks for your help, i hope i was clear!

[daveVk]

See blue line

Also as you are using query red can be replaced by green

<script type="text/javascript">
function showUser(str)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}

if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}

$("#txtHint").load("getuser.php?q="+str);
</script>


<script>
$(function() {
$('#txtHint').hide();
// a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
$( "#txtHint" ).dialog({
open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); },
modal: true,
autoOpen: true,
resizable: false,
width: '500px',
buttons: {
Ok: function() {
$( this ).dialog( "close" );

}
}
});
});
</script>

[skoff]

thanks! im going to try this tonight! thanks a lot

[skoff]

i tried it and the div come up on the load of the page when i click ok it hide. what i want is that when i click on a link this call my function showUser and put the content of my "GET" in my div and make it show. maybe i wasnt clear i hope i am now! thanks again for your patience and your help! :)

also when i tried to replace what you said the red by the green i wasnt able to get my information from my getuser.php to be shown in the div

[skoff]

ok so i worked on this a bit and came up with this :

<img src="teamA.png" onclick="showUser('a')"/> for this :

<script type="text/javascript">
function showUser(str)
{
if (!str=="")
{
$('#txtHint').show(); 
 $("#txtHint").load("test.php?q="+str);
} 
}
</script>

This part works great, so onclick of this image it loads what i want in the div. The only thing that is not working is that if i use this code :

<script> 
$(function() { 
$('#txtHint').hide(); 
// a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore! 
$( "#txtHint" ).dialog({ 
open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); }, 
modal: true, 
autoOpen: true, 
resizable: false, 
width: '500px', 
buttons: { 
Ok: function() { 
$( this ).dialog( "close" ); 

} 
} 
}); 
}); 
</script>

for the div "txtHint" it wont show up the div with the data from my showUser(str) function. But if its a normal div without that code above it works. So this is where im stuck right now! Any help would be appreciate! thanks!

[skoff]

found it.. -_- just include this part :

<script> 
$(function() { 
$('#txtHint').hide(); 
// a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore! 
$( "#txtHint" ).dialog({ 
open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); }, 
modal: true, 
autoOpen: true, 
resizable: false, 
width: '500px', 
buttons: { 
Ok: function() { 
$( this ).dialog( "close" ); 

} 
} 
}); 
}); 
</script>

in my if condition.. should have think about that ahah!

[daveVk]

Did not quite follow that, but glad it is working.

Consider using (str!=="") instead of (!str=="") ?