jQuery help!

nofel · August 21, 2010, 12:12pm

hi again folks,
i am in another problem again (forgive me for asking it, i m learning JS). here i have created a code


        <script type="text/javascript">
        $(function(){
			$("#viewlog").dialog({
			autoOpen:false,
			modal:true,
			height: 400,
            width: 400,
            title: 'Dynamically Loaded Page'
        });
            open: function ()
            {
                $(this).load('log.php');
            }      

		})
		</script>
        <button id="viewlog">Click here</button>

now that button appears but it doesn’t do anything when button is clicked. what am i missing? when i do autoOpen:false; it opens on load, meaning something on button isn’t right?

nofel · August 23, 2010, 2:35pm

i hope u bare with me the learning process. i know that option for dialog goes in {} but i am trying to achieve a slide/fade effect when second dialog box is called. i know its .fadeIn(“slow”) what i don’t understand is where to put it, either in the {} or make a new function for dialog with same id and append it with .fadeIn ?

nofel · August 23, 2010, 2:33pm

basically, what i am doing is calling a dialog box inside from a dialog box.it work fine from the dummy page i created but here i m working on this page but its not working, nor i been prompted for any errors


<link href="../stylesheets/jquery-ui-1.8.4.custom.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.widthholder{width:300px; height:50px; overflow-x:auto;overflow-y:auto;}
.left{width:500px; float:left; border-right:2px solid #C60;}
</style>

<script language="JavaScript" src="../scripts/calendar_us.js"></script>
	<link rel="stylesheet" href="../scripts/calendar.css">
    <script language="text/javascript" src="../scripts/functions.js">
</script>
<script language="javascript" type="text/javascript">
function checkDates()
{
	
}
</script>
<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../js/jquery-ui-1.8.4.custom.min.js"></script>
<script type="text/javascript">
	$(function(){
		$('#addpage').dialog({
			autoOpen :false,
			width: 1200,
			height:100,
			open : function(){
				$(this).load('GenAddLog.php')
			}
		})//function dialog
		$("#AddNew").click(function(){
			$("#addpage").dialog("open")
		});
	});
</script>
</head>

<!--<body onload="showHideDiv('1');">-->
<body>
<form name="ActionLog" method="post" >                                
			<table width="1200" border="0" class="log">
             <thead>
                <tr>
                        <th width="50"><p>S.No.</p></th>
                        <th width="100"><p>Fault Date</p></th>
                        <th width="300"><p>Fault Description</p></th>
                        <th width="100"><p>Reported By</p></th>
                        
                        <th width="200"><p>Resolution Date</p></th>
                        <th width="300"><p>Action Taken</p></th>
                        <th width="100"><p>Resolved By</p></th>
                        <th width="50"><p>Edit/Save</p></th>
            </tr>
            </thead>
                         	<?php
					$count=0;
					$query="select log_id,fault_date,fault_description,reported_by,resolution_date,action_taken,resolved_by,is_updated from genset_log where gensetid_fk='$GensetId' order by fault_date desc";
					
					$cursor = OCIParse ( $connection, $query);
					$result=ociexecute($cursor);
					while(ocifetchinto($cursor,$values))
					{
						$count=$count+1;
					?>
                   	<tbody> 
                     <tr>
                     
                            <td  align="center" width="50px"><?php echo $count;?></td>
                            <td align="center"  width="100px"><?php if($edit == "1" && $lid==$values[0]){?><input type="text"  name="txtPass" id="txtPass" size="8" readonly="readonly" value="<?php echo convertTime($values[1]);?>" /><?php }else {echo $values[1];}?></td>
                            <td align="center"  width="300px"><div class="widthholder"><?php echo $values[2];?></div></td>
                            <td  align="center" width="100px"><?php echo $values[3];?></td>
                            <td  align="center" width="200px"><?php if($edit == "1" && $values[4] == "" && $lid==$values[0]){?><input type="text"  readonly="readonly" class="txtfield"  id="txtResolution" name="txtResolution"   />
                            <script language="JavaScript" type="text/javascript">
                                new tcal ({
                                    // form name
                                    'formname': 'ActionLog',
                                    // input name
                                    'controlname': 'txtResolution'
                                });
                                </script>
                            
                            <?php }else{echo $values[4];} ?></td>
                            <?php if($edit == "1" && $values[5] == "" && $lid==$values[0]){?><td  align="center" width="300px"><input type="text"  id="txtAction" class="txtfield" name="txtAction"  /></td><?php }else{?><td  align="center" width="300px"><div class="widthholder"><?php echo $values[5];} ?></div></td>
                            <td  align="center" width="100px"><?php if($edit == "1" && $values[6] == "" && $lid==$values[0]){?><input type="text"  id="txtResolvedBy" class="txtfield" name="txtResolvedBy"  /><?php }else{echo $values[6];} ?></td>
                            <td  align="center" width="50px"><?php if($edit == "1" && $lid==$values[0]){?><img onclick="return saveGenLog(<?php echo $GensetId;?>,<?php echo $values[0];?>,0)" src="../images/save.png"  alt="Save" border="0" /><?php }elseif($values[7] == "1"){}else{?><a href="javascript:saveGenLog(<?php echo $GensetId;?>,<?php echo $values[0];?>,1)" ><img src="../images/edit_16.png" alt="edit" border="0" /></a><?php }?></td>
                    	
                     </tr>
                     </tbody>
                     <?php
					}
					 ?>
                 </table>
			<div class="mainButtonFlow">
              <button  class="buttons"  name="AddNew" id="AddNew">Add</button>
			<input type="submit" value="Close" class="buttons"  id="Close" name="Close"  onclick="javascript:window.close();"/>
              <input type="hidden"  name="lid"  id="lid" >
                <input type="hidden"  name="edit"  id="edit" >
               <input type="hidden"  name="gid"  id="gid" >
            </div>

</form>
</body>
</html>

p.s i know the code is badly written but its not my code :p, the first dialog work fine. i think something is wrong here

wolken · August 23, 2010, 1:29pm

ok, can you please show all the code you have until now ?

nofel · August 23, 2010, 12:22pm

lol, nice example but when i have presure on my head i tend to forget thing, anyhow this is code i created in log.php which is opened in dialog box


	$(function(){
		$('#addpage').dialog({
			autoOpen :false,
			width: 1200,
			height:100,
			open : function(){
				$(this).load('GenAddLog.php')
			}
		})//function dialog
		$('#AddNew').click(function(){
			$('#addpage').dialog("open")
		});
	});


<button  type="button" class="buttons"  name="AddNew" id="AddNew">Add</button>

but when i click button, nothing happens. does dialog box support opening of another dialog besides it? in my case i need it to slide down from bottom, am i missing something or what,

Off Topic:

i am learning fishing but i need help to catch some before i am on my own

nofel · August 23, 2010, 10:28am

thanks wolken & pwn57. i spended the weekend studying about JS and i had many thing cleared. i do need something else. i have a Add button in my log.php page which open a new form, which it does now correctly. but what i want is to load log.php below the opened log.php, like slide from behind at the bottom. how can i do that? is it possible?

nofel · August 16, 2010, 7:10pm

on the same page.
this is just a example, the real case in this guy code, whom i wanna apply it on. for now he is printing ‘incorrect username and password’ in td. which i think is boring, this is what is chunk of his code, which prints on the same page

<?php if($invalid){?> style="color:#FF0000" <?php }?>><?php if($invalid){?> Error: Invalid username or password.<?php }?>

so i wanna spice it up with jQuery alertbox

nofel · August 21, 2010, 2:51pm

well as i am new to JS, what does dialog(“open”) does? is it calling the open parameter in dialog

wolken · August 21, 2010, 3:11pm


$("#dialog").dialog({
		autoOpen:false,
		modal:true,
		height: 400,
		width: 400,
		title: 'Dynamically Loaded Page',
		open: function ()
		{$(this).load('log.php');}  
	});

The code above initializes the dialog (i.e. it assigns it to the div with id “dialog”, and sets its properties and behavior).

Whenever you want the dialog you described above to show and perform the described behavior, you call dialog(“open”).

wolken · August 18, 2010, 10:25pm

I don’t know, haven’t read it.

nofel · August 18, 2010, 10:22pm

i was following a video tutorial by Dori Smith of JS and man she just got started on creating a bingo card on just starters chapters. total show off. lol, mosty my learning are via sitepoint or w3school. do u recommend JS from w3school. i mean does it cover what is needed?

wolken · August 18, 2010, 10:17pm

Could be, it’s always good to know the language before getting to know the library.
Start with javascript, forget about jQuery.
When you’re done, start learning jQuery and you’ll see how easy and user friendly it is.

wolken · August 16, 2010, 7:04pm

One more question:

Do you want the alert box to be shown in the same page where you entered the first name and last name, or do u want it to show on a new page?

The reason i’m asking this is if you want option 1, you will need to use ajax. If you want option 2, it’s a simpler step.

Let me know.

wolken · August 18, 2010, 10:00pm

If you want a book i’d go with “jQuery in Action (2nd edition)”.
If you want to learn online just use the documentation on the jQuery official website (http://docs.jquery.com/Main_Page)

nofel · August 18, 2010, 10:04pm

i think my porblem lies in not knowing JS. is that what my problem of comprehending jQuery lies?

nofel · August 18, 2010, 9:55pm

Ah, cool thanks alot!!! btw i want to learn Jquery in detail. what will u recommend?

wolken · August 18, 2010, 9:48pm

you have 2 mistakes:

You should hide the div before displaying the page. This is done using css (in the <style> tag in the code below.
You should place the function that adds the click to the button inside another function that ensures that the code will be executed AFTER the dom is loaded.

Note: you should also write something inside the div to see it show…

below is the modified code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("button").click(function(){
    $("#myDiv").show("normal")
});
});
</script>
<style>
#myDiv {
display:none;
}
</style>
</head>
<body>
<div id="myDiv" >
test
</div>
    <button>Show</button>
</body>
</html>

nofel · August 18, 2010, 9:34pm

thnx wolken, i need some help jQuery. as i totally a new person to JS and jQuery, i been trying to this work


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.4.custom.min.js"></script>
<script type="text/javascript">
$("button").click(function(){
	$("#myDiv").show("normal")
});
</script>
</head>


<body>
<div id="myDiv">
</div>
	<button>Show</button>

</body>
</html>

its fairly a normal show function. but its not working, the div shows up before i even press click. i am just being so fustrated making it work. i don’t know where to start to get a good grasp of jQuery, i did got a fair hold of selectors and filter is jQuery but i can’t make anything like this work. as i want on my button to perform the function i wrote in JS. where am i going wrong

wolken · August 16, 2010, 5:22pm

can you please give all the details?

i.e.: The whole process of what you want exactly, and the html,javascript, and php code you already have.

Then i will be able to give you the correct code.

nofel · August 16, 2010, 5:16pm

thats too advance for me. for starter, can u guys tell me what if i want to echo a php value in a dialogbox or alert box. how do i do that,