SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 43

Thread: jQuery help!

  1. #1
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    jQuery help!

    hey folks,
    i have created a login page, where i wanna implement jQuery if the user name and password is wrong, it should popup a alert msg box which fades away after prompting of wrong password. how can i do it?
    All those who wander aren't lost.

  2. #2
    SitePoint Enthusiast
    Join Date
    Aug 2010
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    step 1: you will need ajax to verify the correctness of the username/password (using a server script). $.ajax is the jQuery function to use.

    step 2: when you receive a response from the server that username/password are incorrect you can do one of the following:
    - have a hidden absolutely positioned div in the middle of the page. Once you get a response, you can use:
    Code:
     $(divID).show(); //divID is the id of the div you want to show
     $(divID).fadeTo(0,3000); //this will fade the div in 3 seconds
    - OR you can create the div on the fly using :
    Code:
    $("<div id='invalid'>Invalid username/password</div>").appendTo($('body')); //this creates the div and attaches it to body
    $('div#invalid').fadeTo(0,3000); //this fades the div in 3 seconds

    That's it.

  3. #3
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,189
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    In my personal opinion i would NOT recommend using ajax to send passwords unless you have an SSL certificate and https:// active on the page as anyone could just grab the password from thin air and use it

  4. #4
    SitePoint Enthusiast
    Join Date
    Aug 2010
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ajax and normal http get/post both need an SSL certificate and https:// to ensure security, because both are vulnerable and can be caught from thin air.

  5. #5
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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,
    All those who wander aren't lost.

  6. #6
    SitePoint Enthusiast
    Join Date
    Aug 2010
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  7. #7
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    ok here is a little code i made
    Code HTML4Strict:
    <html>
    	<head>
    		<title>Enter Information</title>
    	</head>
    	<body>
    	<form action="summary.php" method="post">
    		First Name:<input type="text" name="fname" />
    		<br/>
    		Last Name:<input type="text" name="lname" />
    		<br/>
    	<button type="submit">Go!</button>
    	</form>
    	</body>
    </html>
    and this page
    Code HTML4Strict:
    <html>
    	<head>
    		<title>summary</title>
    	</head>
    	<body>
    	<?php
    	$_POST['fname'];
    	$_POST['lname'];
    	$fname = $_POST['fname'];
    	$lname = $_POST['lname'];
    	?>
    	<?php
    	if($fname == "Adam"){
    	echo "welcome ". $fname;
    	}
    	else{
    	echo "Hello There!";
    	}
    	?>
    	</body>
    </html>
    this is fairly a very easy script of passing variables for my example. now what i want is the echo statement to be showed in alert box or dialog box. which after prompting disappears (if applicable).
    Off Topic:

    I am new to php, so i am learning and applied what i have learned till now
    All those who wander aren't lost.

  8. #8
    SitePoint Enthusiast
    Join Date
    Aug 2010
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  9. #9
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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
    Code PHP:
    <?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
    All those who wander aren't lost.

  10. #10
    SitePoint Enthusiast
    Join Date
    Aug 2010
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Forgive my messy code

    HTML Code:
    <html>
        <head>
            <title>Enter Information</title>
     		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    		<script type="text/javascript">
    		$(document).ready(function(){
    				
    			 $("#ajax-form").submit(function(event){  
    			 			event.preventDefault();
    					  $.ajax(  {
    					  			type:"post",
    						   		url:"summary.php",  
    								 data:$("#ajax-form").serialize(),  
    								success: function(data){showAlert(data);}
    						  });
    						
    						});
    		});
    		function showAlert(data)
    		{
    			$('#alert label').html(data);
    			$('#alert').show().fadeTo(0,1).fadeTo(5000,0);
    		
    		}
    		</script>
    
            <style>
    			#alert {
    			width:400px;
    			height:90px;
    			position:absolute;
    			left:100px;
    			top:100px;
    			border:solid 10px black;
    			display:none;
    			text-align:center;
    			padding-top:80px;
    			background:#cccccc;
    			}
    		</style>
        </head>
        <body>
        <div id="alert"><label></label></div>
        <form id="ajax-form" action="summary.php" method="post">
            First Name:<input type="text" name="fname" />
            <br/>
            Last Name:<input type="text" name="lname" />
            <br/>
        <button type="submit">Go!</button>
        </form>
        </body>
    </html>

    PHP Code:
    <?php
    $fname 
    $_POST['fname'];
    $lname $_POST['lname'];

    if(
    $fname == "Adam")
    echo 
    "welcome "$fname;
    else
    echo 
    "Hello There!";
    ?>
    Let me know if that's what you want

  11. #11
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    totally, wicked!, but i am all lost as i am newbie to jQuery, all i understand is
    Code JavaScript:
    $("p").dialog(){
    });
    kind of thing, can u explain me what's going on
    All those who wander aren't lost.

  12. #12
    SitePoint Enthusiast
    Join Date
    Aug 2010
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Below is the same code but with comments. Maybe this helps you understand what's going on.

    HTML Code:
    <html>
        <head>
            <title>Enter Information</title>
     		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    		<script type="text/javascript">
    		/*
    		 * The following performs ajax request and shows the alert.
    		 * I recommend it is placed in a seperate file and be referenced from here
    		 */
    		$(document).ready(function(){  //this function is used to make sure that dom is loaded before any action is taken
    			 $("#ajax-form").submit(function(event){   //used to modify the behavior of the form when submitted
    			 			event.preventDefault(); // prevents default behavior of the submit button so that we can take matter into our own hands
    					  $.ajax(  {				//submits ajax request (i.e. request without changing the web page)
    					  			type:"post",	//we want the ajax request to be a "post"
    						   		url:"summary.php",  //this is self-explanatory
    								 data:$("#ajax-form").serialize(),  //the data we want to send to the php file is found in the inputs of the form of id: ajax-form
    								success: function(data){showAlert(data);} //on success, call function showAlert and supply it with the data returned from the php file summary.php
    						  });
    						
    						});
    		});
    		function showAlert(data)  //function we created to show the alert box (which in this case is the div with id:alert
    		{
    			$('#alert label').html(data);	//fill the label inside the div of id:alert with the data returned from php
    			$('#alert').show().fadeTo(0,1).fadeTo(5000,0);  //show the div of id:alert, then fade it out in 5 seconds (5000 milliseconds)
    		}
    		</script>
    
            <style>
    			/*
    			* This is to style the div of id:alert which in this case is our alert
    			* it's simple css. You can modify it any way you like 
    			* Of course i would recommend it to be in a seperate css file and references from here
    			*/
    			#alert {
    			width:400px;
    			height:90px;
    			position:absolute;
    			left:100px;
    			top:100px;
    			border:solid 10px black;
    			display:none;
    			text-align:center;
    			padding-top:80px;
    			background:#cccccc;
    			}
    		</style>
        </head>
        <body>
        
        <!-- This is the div used to display the "alert" -->
        <div id="alert"><label></label></div>
        
        <form id="ajax-form" action="summary.php" method="post">
            First Name:<input type="text" name="fname" />
            <br/>
            Last Name:<input type="text" name="lname" />
            <br/>
        <button type="submit">Go!</button>
        </form>
        </body>
    </html>

  13. #13
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Angry

    thnx wolken, i need some help jQuery. as i totally a new person to JS and jQuery, i been trying to this work
    Code JavaScript:
    <!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
    All those who wander aren't lost.

  14. #14
    SitePoint Enthusiast
    Join Date
    Aug 2010
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you have 2 mistakes:

    1. You should hide the div before displaying the page. This is done using css (in the <style> tag in the code below.

    2. 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:

    HTML 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>

  15. #15
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Ah, cool thanks alot!!! btw i want to learn Jquery in detail. what will u recommend?
    All those who wander aren't lost.

  16. #16
    SitePoint Enthusiast
    Join Date
    Aug 2010
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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)

  17. #17
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    i think my porblem lies in not knowing JS. is that what my problem of comprehending jQuery lies?
    All those who wander aren't lost.

  18. #18
    SitePoint Enthusiast
    Join Date
    Aug 2010
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  19. #19
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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?
    All those who wander aren't lost.

  20. #20
    SitePoint Enthusiast
    Join Date
    Aug 2010
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't know, haven't read it.

  21. #21
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by wolken View Post
    You should hide the div before displaying the page. This is done using css (in the <style> tag in the code below.
    If he does that, won't the non-scripting environments be unable to see it? It's a false assumption that JavaScript will always be available.

    The standard way is to have the content normally shown on the page, and then to use scripting to hide it, on or before page load. Then you can attach the mechanisms to show it. Isn't that right?

    Code javascript:
    $(function(){
        $("#myDiv").hide();
        $("button").click(function(){
            $("#myDiv").show("normal");
        });
    });

    With no CSS styling to hide it, which prevents problems when JavaScript is not available.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  22. #22
    SitePoint Enthusiast
    Join Date
    Aug 2010
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Good point pmw

  23. #23
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    hi again folks,
    i am in another problem again (forgive me for asking it, i m learning JS). here i have created a code
    Code JavaScript:
            <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?
    All those who wander aren't lost.

  24. #24
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Which web browser are you using? We'll help you find its error console so that you can find out where the error is, though it's likely to be with the premature closing of the object just before the open line.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  25. #25
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    i use mainly all browsers. coz i have check for compatibility personal i like firebug. so whatever firebug comes in handy i use that
    All those who wander aren't lost.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •