homepage Welcome to WebmasterWorld Guest from 54.234.2.94
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
hide onload and show onclick
skoff




msg:4418221
 1:17 am on Feb 16, 2012 (gmt 0)

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




msg:4418259
 5:39 am on Feb 16, 2012 (gmt 0)

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




msg:4418339
 2:17 pm on Feb 16, 2012 (gmt 0)

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

skoff




msg:4418396
 4:40 pm on Feb 16, 2012 (gmt 0)

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




msg:4418430
 6:21 pm on Feb 16, 2012 (gmt 0)

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




msg:4418431
 6:27 pm on Feb 16, 2012 (gmt 0)

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




msg:4418594
 1:51 am on Feb 17, 2012 (gmt 0)

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

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved