jQuery Modal doesn't show up

Hampe · September 29, 2013

Good Morning from sunny Sweden!

I'm trying to use jQuery and the Reveal Modal jQuery plugin to create modals, base on this example.

My PHP code:

IF ($q3)
    {
        IF ($admin_default_activate == 0)
        {
            echo "<span style=\"color:green\">Your account is created, but an Administrator must activate it!</span>";
        }
        ELSE
        { echo "

            <div id=\"modal\">
                <div id=\"heading\">
                    Your mailaccount is activated!
                </div>

                <div id=\"boxcontent\">
                    <p><b>Account Details:</b><br><b>Email:</b> $user<br /><b>Password:</b> $userpass1<br><br><b>Settings:</b><br><b>POP3:</b> mail.website.se (Port 110)<br><b>IMAP:</b> mail.website.se (Port 143)<br><b>SMTP:</b> mail.website.se (Port 25/587)</p>

                    <a href=\"#\" class=\"button red close\"><img src=\"popup/images/cross.png\">Close window</a>
                </div>
            </div>


            ";
        }
    }
    ELSE
    {
        //echo "<span style=\"color:red\">Database error: Could not create the account. Contact an Administrator!</span>";
    }

The Javascript code is inside the tag, but it still dont work.

The original button code is:

<a href="#" id="button">Click me</a>

And the one I use now is:

<input type="submit" id="button" name="submit" value="Create">

I dont know if that makes any difference.

Hampe · September 29, 2013

This is the Javascript code:

<!--jQuery-->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script src="js/jquery.reveal.js"></script>

	<script type="text/javascript">
		$(document).ready(function() {
			$('#button').click(function(e) { // Button which will activate our modal
			   	$('#modal').reveal({ // The item which will be opened with reveal
				  	animation: 'fade',                   // fade, fadeAndPop, none
					animationspeed: 600,                       // how fast animtions are
					closeonbackgroundclick: false,              // if you click background will modal close?
					dismissmodalclass: 'close'    // the class of a button or element that will close an open modal
				});
			return false;
			});
		});
	</script>

Ch0cu3r · September 29, 2013

As you're using javascript are there any errors reported in the browser console when you press the button.

To access the console open your page press F12. This bring up the Development Tools, select the console tab, refresh your page and click your button. Any javascript errors reported?

Hampe · September 29, 2013

There are no errors.

All I did was to download the sourcecode of the "Popup Modal Window". Then I just copy and paste the code where I wanted it, but it wont work ...

Ch0cu3r · September 29, 2013

All I did was to download ...Then I just copy and paste

That might just be the problem.

Post full your code here

Hampe · September 29, 2013



			<?php 

			$a = mt_rand(10000000,99999999);

			?>


<?php

$useragent=$_SERVER['HTTP_USER_AGENT'];

if(preg_match('/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i',$useragent)||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i',substr($useragent,0,4)))

header('Location: http://www.Website.se/mobil/mail.php');

?>


<?php


if ($_REQUEST['id'] == "faq") {

		include('submeny/faq.php');

	}

else {


?>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >

<head>



	<link rel="icon" type="image/png" href="http://www.Website.se/img/favicon.ico">


	<title>Website.se</title>


	<style type="text/css" media="all">

		@import "css/global.css";

		@import "css/toprightheader.css";

		@import "css/anslutning.css";

		@import "css/tooltip.css";

		@import "popup/css/styles.css";

	</style>



<!--jQuery-->

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

	<script src="popup/js/jquery.reveal.js"></script>


	<script type="text/javascript">

		$(document).ready(function() {

			$('#button').click(function(e) { // Button which will activate our modal

			   	$('#modal').reveal({ // The item which will be opened with reveal

				  	animation: 'fade',                   // fade, fadeAndPop, none

					animationspeed: 600,                       // how fast animtions are

					closeonbackgroundclick: false,              // if you click background will modal close?

					dismissmodalclass: 'close'    // the class of a button or element that will close an open modal

				});

			return false;

			});

		});

	</script>



</head>


<body>

<div id="wrapper">

	<div id="header">

		<img src="img/logo.png">

		<!--<h1><span class="black">Web</span><span class="orange">Site</span><span class="black">.se</span></h1>-->

		<!--<h2>Your Slogan</h2>-->

	</div>

	<div id="anslutning">

		<div id="anslutningnavi">

			<ul>

				<!--<li><a href="#">Logga in - Kontrollpanel</a></li>-->

					<?php


					$portstatus = $_SERVER['SERVER_PORT'];

					if ($portstatus==80) {

					echo'<li><a href="https://www.Website.se' . $_SERVER['REQUEST_URI'] . '">Byt till Säker Anslutning (HTTPS)</a></li>';


					} else {


					echo'<li><a href="http://www.Website.se' . $_SERVER['REQUEST_URI'] . '">Byt till Osäker Anslutning (HTTP)</a></li>';


					}


					?>

			</ul>

		</div>

	</div>

	<div id="rightheader">

		<div id="rightheadernavi">

			<ul>

				<!--<li><a href="#">Logga in - Kontrollpanel</a></li>-->

				<li><a href="../webmail" target="_blank"><img src="img/email-logo.png" width="20" height="20">Webmail</a></li>

			</ul>

		</div>

	</div>

	<div id="navi">

		<ul>

			<li><a href="/">Start</a></li>

			<li class="active"><a href="?p=mail">Mail</a></li>

			<li><a href="?p=driftstatus">Driftstatus</a></li>

			<li><a href="?p=kontakt">Kontakta oss</a></li>

		</ul>

	</div>

	<div id="subnavi">

		<ul>

			<li><a href="?p=mail&id=faq">FAQ</a></li>

		</ul>

	</div>

	<div id="main">

		<div class="ic"></div>

		<div id="content">

			<h1><span>Skapa Email-konto</span></h1>



			<div id="content">


			<!-- <h2>Funktionen är avstängd tills vidare</h2> -->



<script type="text/javascript" src="js/jquery.js"></script>

<script>


$(document).ready(function(){

$('#user').keyup(user_check);

$('#domain').change(user_check);

});


function user_check(){	

var user = $('#user').val();

var domain = $('#domain').val();

var email = user + '@' + domain;

$('#output').text(email); 

if(email === "" || user.length < 4){

$('#email').css('border', '3px #CCC solid');

$('#tick').hide();

}else{


jQuery.ajax({

   type: "POST",

   url: "mail/check/check.php",

   data: 'email='+ email,	

   cache: false,

   success: function(response){

if(response == 1){

	$('#email').css('border', '3px #C33 solid');	

	$('#tick').hide();

	$('#cross').fadeIn();

	}else{

	$('#email').css('border', '3px #090 solid');

	$('#cross').hide();

	$('#tick').fadeIn();

}


}

});

}




}


</script>


<style>


#tick{display:none}

#cross{display:none}



</style>


<?php


//MySQL Information:

$mysql_host = "localhost"; //Host Name

$mysql_user = "user"; //Username

$mysql_pass = "password"; //Password

$mysql_db = "database"; //Database


//General Configuration:

$account_max = "10"; //Maximum size per account (MB)


$admin_notify = 0; //1 = yes & 0 = no

$admin_email = "email@Website.se"; //Administrators email to send notifications)

$admin_default_activate = 1; //1 = yes & 0 = no -> If no, the administrator has to authorise the account

$encryption = 2; //Password encryption level


//DO NOT EDIT BELOW!//


// Protect the Database and MD5 the password.

$strName    = addslashes( $_POST['name'] );

$strUser    = addslashes( $_POST['user'] );

$strDomain  = addslashes( $_POST['domain'] );

$strPass1   = addslashes( $_POST['pass1'] );

$strMD5Pass = md5( $strPass1 );

$kod    = addslashes( $_POST['kod'] );


error_reporting(E_ALL ^ E_NOTICE);

//Next two lines connect to database using information from above.

$open = mysql_connect($mysql_host, $mysql_user, $mysql_pass);

$select = mysql_select_db($mysql_db);


IF (!$open || !$select) 

{ 

    echo 'Databasfel! Felkod: "DB_NoConn"'; 

}

ELSE

{

    //Decide On What Path To Take

    SWITCH ($_GET['atgard'])

    {

    CASE "skapa":

        //#### PAGE IF FORM FILLED OUT ####//

        $q=mysql_query("SELECT * FROM `hm_domains` WHERE `domainid` = '{$strDomain}' LIMIT 1"); //Load Domain Into memory (internal use)

        WHILE ($v=mysql_fetch_array($q)) 

        { 

            $temp_domain = $v['1']; 


        } //Apply information


        $q2=mysql_query("SELECT * FROM `hm_accounts` WHERE `accountaddress` = '{$strUser}@$temp_domain' LIMIT 1"); //Check if account exists

        $v2=mysql_num_rows($q2); //Gets number of accounts that exist with that profile (should be less than or equal to one)


        IF ($v2 == 1) 

        { 

            echo "<span style=\"color:red\">Email-adressen finns redan! <a href=\"javascript:history.go(-1)\">Tillbaka</a><br /></span>"; 

        }

        ELSE

        {

            IF (!$_POST['pass1'] || !$_POST['pass2']) 

            { 

                echo "<span style=\"color:red\">Du fyllde inte i båda lösenorden! <a href=\"javascript:history.go(-1)\">Tillbaka</a><br /></span>"; 

            }

            ELSEIF ($_POST['pass1'] <> $_POST['pass2']) 

            { 

                echo "<span style=\"color:red\">Lösenorden matchade inte varandra! <a href=\"javascript:history.go(-1)\">Tillbaka</a><br /></span>"; 

            }

            ELSE

            {

                $q3=mysql_query("INSERT INTO `hm_accounts` (`accountdomainid`,`accountaddress`,`accountpassword`,`accountactive`,`accountisad`,`accountmaxsize`,`accountpwencryption`,`kod`) VALUES ('1','$strUser@Website.se','$strMD5Pass','$admin_default_activate','0','$account_max','$encryption','$kod')") or die(mysql_error());

            }

        }


        IF ($q3)

        {

            IF ($admin_default_activate == 0)

            {

                echo "<span style=\"color:green\">Ditt konto är skapat, <b>men kräver att administratören aktiverar det.</b> Du får snart en bekräftelse om detta.</span>";

            }

            ELSE

            {

                echo "


				<div id=\"modal\">

						<div id=\"heading\">

						Ditt mailkonto är aktiverat!

						</div>


						<div id=\"boxcontent\">

						<p><b>Uppgifter:</b><br>Email: $strUser@Website.se<br />Lösenord: (Dolt av säkerhetsskäl)</p>


						<a href=\"#\" class=\"button red close\"><img src=\"popup/images/cross.png\">Stäng</a>

						</div>

					</div>


				";

                $subject = "<span style=\"color:green\">Välkommen till Website!</span>";

                $message = "<span style=\"color:green\">Detta är en bekräftelse på att ditt email-konto är skapat.</span>";


                //mail("$strUser@Website.se", $subject, $message); //Send welcome message

            }

        }

        ELSE

        {

            //echo "<span style=\"color:red\">Database fel, kunde inte skapa email-kontot. Kontakta administratören!</span>";

        }


        IF ($admin_default_activate == 0 && $admin_notify == 0)

        {

            $admin_mail_subject = "Account Requires Activation!";

            $admin_mail_message = "{$_POST['user']}@$temp_domain has been created by {$_POST['name']} and needs to be activated!";

            mail($admin_email, $admin_mail_subject, $admin_mail_message);

        }

        ELSEIF ($admin_default_activate == 1 && $admin_notify == 1)

        {

            $admin_mail_subject = "New Account Created!";

            $admin_mail_message = "{$_POST['user']}@$temp_domain has been created by {$_POST['name']}!";

            mail($admin_email, $admin_mail_subject, $admin_mail_message);

        }

         ELSEIF ($admin_default_activate == 0 && $admin_notify == 1)

        {

            $admin_mail_subject = "New Account Created!";

            $admin_mail_message = "{$_POST['user']}@$temp_domain has been created by {$_POST['name']}!";

            mail($admin_email, $admin_mail_subject, $admin_mail_message);

        }

        break;


    DEFAULT:

    }



//#### KOD SOM VISAS OM FÄLTEN INTE ÄR IFYLLDA ####//

echo "

<span style=\"color:red\">*</span> = Obligatoriska fält, måste fyllas i

<form action=\"?p=mail&atgard=skapa\" method=\"POST\">

 <table style=\"font-size:14px;color:#535353;\">

   <tr>

  <td><b>Ditt namn:</b></td><td><input type=\"text\" name=\"name\" size=\"10\"> </td></tr><tr><td></td></tr>

      <tr><td><b>E-Mail: <span style=\"color:red\">*</span></b></td><td><input type=\"text\" name=\"user\" id=\"user\" size=\"10\"><b> @ <select name=\"domain\" id=\"domain\">

			<option id=\"1\" value=\"Website.se\">Website.se</option>

	  </select></b> <label id=\"output\"></label> <img id=\"tick\" src=\"mail/check/tick.png\" width=\"16\" height=\"16\" title=\"Adressen är ledig\"/><img id=\"cross\" src=\"mail/check/cross.png\" width=\"16\" height=\"16\" title=\"Adressen är upptagen\"/> </td></tr>

      <tr><td><b>Lösenord: <span style=\"color:red\">*</span></b></td><td><input type=\"password\" name=\"pass1\" size=\"10\"> </td></tr>

      <tr><td><b>Lösenord igen: <span style=\"color:red\">*</span></b></td><td><input type=\"password\" name=\"pass2\" size=\"10\"> (Bekräftelse)</td></tr>

	  <tr><td><b>Kod:</b></td><td><input type=\"text\" name=\"kod\" size=\"8\" value=\"$a\" readonly=\"readonly\"> Spara koden! Används när du requestar nytt lösenord</td></tr>";


  echo "<tr><td> <div align=\"left\"><input type=\"submit\" id=\"button\" name=\"submit\" value=\"Skapa\"></div></tr></table> </fieldset>

</form>

";

}

?>



		</div>


		</div>


		<div id="news">

			<h1>Nyheter</h1>


				<?php include('include/nyheter-box.php'); ?>


		</div>

	</div>

	<div id="footer">

		<p>© Copyright 2013 Website.se. Alla Rättigheter Reserverade.</p>

	</div>

	<div class="cleaner"></div>

</div>

</body>

</html>







<?php

}

?>

Edited September 29, 2013 by Hampe

Ch0cu3r · September 29, 2013

You need to give this submit button the id of button

<input type=\"submit\" id=\"button\" name=\"submit\" value=\"Skapa\">

Like so

<input type=\"submit\" id=\"button\" name=\"submit\" id=\"button\" value=\"Skapa\">

Edited September 29, 2013 by Ch0cu3r

Hampe · September 29, 2013

There already is an id on the input. Thats why it is wierd..

Ch0cu3r · September 29, 2013

Scrap that didn't read your submit button properly.

The model should be located in the same place as your form.

Can you tell what you're wanting to do with the modal? When do you want the modal to display?

Edited September 29, 2013 by Ch0cu3r

Hampe · September 29, 2013

Right now, when you press the button "Skapa" (Create), the mailaccount is created and the Account Details & Settings are printed on the page.

But instead I want the Modal (Popup box) to handle that information. So, when you press "Skapa" (Create), the Modal should popup like this without refreshing the page:

Ch0cu3r · September 29, 2013

How you got it set-up right now that is what will happen.

You'll need to submit the form with ajax. Then pass the response from ajax to your modal to display the details.

The ajax call need to be made here

			$('#button').click(function(e) { // Button which will activate our modal
			   	/* AJAX CALL REQUIRED TO SUBMIT DETAILS TO YOUR SCRIPT*/
			   	/* ADD RESPONSE FROM AJAX TO #MODEL */
			   	/* REVEAL MODEL BELOW */
			   	$('#modal').reveal({ // The item which will be opened with reveal
				  	animation: 'fade',                   // fade, fadeAndPop, none
					animationspeed: 600,                       // how fast animtions are
					closeonbackgroundclick: false,              // if you click background will modal close?
					dismissmodalclass: 'close'    // the class of a button or element that will close an open modal
				});
			return false;
			});

Your PHP script will just need to return just the details you want to be displayed in the model

Edited September 29, 2013 by Ch0cu3r

Hampe · September 29, 2013

Hm, I see. The problem is that I´ve only worked with AJAX maybe 2-3 times, so I´m stuck on that.. :/

Ch0cu3r · September 29, 2013

Here some example code. I have cut most of your PHP code out.

form page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>

	
	<link rel="icon" type="image/png" href="http://www.Website.se/img/favicon.ico">

	<title>Website.se</title>

	<style type="text/css" media="all">
		@import "css/global.css";
		@import "css/toprightheader.css";
		@import "css/anslutning.css";
		@import "css/tooltip.css";
		@import "popup/css/styles.css";
	</style>


<!--jQuery-->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script src="http://malsup.github.com/min/jquery.form.min.js"></script> <!-- using AjaxForm JQuery plugin
	<script src="popup/js/jquery.reveal.js"></script>
	
	<script type="text/javascript">
		$(document).ready(function() {

			var options = { 
			url: 		"form_process.php", // where to submit form to
		        type: 		"post",             // submit method
		        dateType:	"html",             // returned dataType
		        success:	showResponse        // function to call on successful form submittion
		    }; 
 
		    // bind form using 'ajaxForm' 
		    $('#mailSetupForm').ajaxForm(options);


		});

		function showResponse(responseText) {
	        console.log('success');
	        $('#wrapper').prepend(responseText); // prepend the modal to #wrapper dib

                        // display modal
		   	$('#modal').reveal({ // The item which will be opened with reveal
			  	animation: 'fade',                   // fade, fadeAndPop, none
				animationspeed: 600,                       // how fast animtions are
				closeonbackgroundclick: false,              // if you click background will modal close?
				dismissmodalclass: 'close'    // the class of a button or element that will close an open modal
			});

		}
	</script>


</head>

<body>
<div id="wrapper">

<span style="color:red">*</span> = Required fields must be filled in
<form action="?p=mail&atgard=skapa" method="POST" id="mailSetupForm">
 <table style="font-size:14px;color:#535353;">
   <tr>
  <td><b>Your name:</b></td><td><input type="text" name="name" size="10"> </td></tr><tr><td></td></tr>
      <tr><td><b>E-Mail: <span style="color:red">*</span></b></td><td><input type="text" name="user" id="user" size="10"><b> @ <select name="domain" id="domain">
			<option id="1" value="Website.se">Website.se</option>
	  </select></b> <label id="output"></label> <img id="tick" src="mail/check/tick.png" width="16" height="16" title="Adressen är ledig"/><img id="cross" src=\"mail/check/cross.png" width="16" height="16" title="Adressen är upptagen"/> </td></tr>
      <tr><td><b>Password:: <span style="color:red">*</span></b></td><td><input type="password" name="pass1" size="10"> </td></tr>
      <tr><td><b>Password again: <span style="color:red">*</span></b></td><td><input type="password" name="pass2" size="10"> (Confirmation)</td></tr>
	  <tr><td><b>Code:</b></td><td><input type="text" name="kod" size="8" value="$a" readonly="readonly"> Save this code! Used when requestar new password</td></tr>";

	  <tr><td> <div align="left"><input type="submit" name="submit" id="button" value="Skapa"></div></tr></table> </fieldset>
</form>

</body>
</html>

form_process.php (this is very cut down version of your).

<?php
//DO NOT EDIT BELOW!//

// Protect the Database and MD5 the password.

if(isset($_POST['submit']))
{
	$strName    = addslashes( $_POST['name'] );
	$strUser    = addslashes( $_POST['user'] );
	$strDomain  = addslashes( $_POST['domain'] );
	$strPass1   = addslashes( $_POST['pass1'] );
	$strMD5Pass = md5( $strPass1 );
	$kod    = addslashes( $_POST['kod'] );

//printf('<pre>%s</pre>', print_r($_POST, true));

// only return the modal. Do not return any other html
echo <<<HTML
<div id="modal">
		<div id="heading">
			Ditt mailkonto är aktiverat!
		</div>

		<div id="boxcontent">
		<p><b>Uppgifter:</b><br>Email: $strUser@Website.se<br />Lösenord: (Dolt av säkerhetsskäl)</p>

		<a href="#" class="button red close"><img src="popup/images/cross.png">Stäng</a>
	</div>
</div>
HTML;
// DO NOT MODIFY LINE ABOVE

}
?>

Edited September 29, 2013 by Ch0cu3r

Hampe · September 29, 2013

Well, it returns the information in the Modal Popup. Thats very good. But right now I dont know how to put this code together.. Hahaha

Ch0cu3r · September 29, 2013

Have an attempt at it. See what you can come up with.

Basically the php code that processes the form data goes in form_process.php.

Oh I forgot to link documentation for formAjax http://jquery.malsup.com/form/#api

Edited September 29, 2013 by Ch0cu3r

Hampe · September 29, 2013

I´m already on it. The most confusing is that you took

// Protect the Database and MD5 the password.
$strName    = addslashes( $_POST['name'] );
$strUser    = addslashes( $_POST['user'] );
$strDomain  = addslashes( $_POST['domain'] );
$strPass1   = addslashes( $_POST['pass1'] );
$strMD5Pass = md5( $strPass1 );
$kod    = addslashes( $_POST['kod'] );

away from the form page. Everything was 1 complete file, and now its 2 files with a little code here and a little code there.. Hahaha

Ch0cu3r · September 29, 2013

Yes, it needs to be separate.

If you had the ajax form submit to itself as your orginal code does you may find the page will duplicate itself within itself. You only want the response form the ajax call to contain the modal html and nothing else. The ajax calls form_process.php and parses the PHP code sending it the data from the form. The PHP code is processed and it returns the HTML code for the modal. If the response from the ajax call is successful then it'll add the modal to the div#wrapper element and it'll be displayed on screen.

Hampe · September 29, 2013

Holy smoke.. I will never be able to fix this. if I do one way, it dont work. If I do it the other way, it still dont work. What a h*ll is going on??? :facewall:

Ch0cu3r probably laugh at me right now

Hampe · September 29, 2013

Now I know why it doesn´t work. It is the code that checks if the email that has been input in the field is free or taken..

<script type="text/javascript" src="js/jquery.js"></script>
<script>

$(document).ready(function(){
$('#user').keyup(user_check);
$('#domain').change(user_check);
});
	
function user_check(){	
var user = $('#user').val();
var domain = $('#domain').val();
var email = user + '@' + domain;
$('#output').text(email); 
if(email === "" || user.length < 4){
$('#email').css('border', '3px #CCC solid');
$('#tick').hide();
}else{

jQuery.ajax({
   type: "POST",
   url: "mail/check/check.php",
   data: 'email='+ email,	
   cache: false,
   success: function(response){
if(response == 1){
	$('#email').css('border', '3px #C33 solid');	
	$('#tick').hide();
	$('#cross').fadeIn();
	}else{
	$('#email').css('border', '3px #090 solid');
	$('#cross').hide();
	$('#tick').fadeIn();
}

}
});
}



}

</script>

<style>

#tick{display:none}
#cross{display:none}
	

</style>

So if I remove that code, it works to 50%. The Modal popups, but the email wont be created to the database..

I am really stuck right now! $:-\$

Ch0cu3r · September 29, 2013

Ok. Ignore the ajax and modal for now, by commenting out the javascript.

First lets make sure form_process.php is processing the data correctly. Modify your form so it just submits to form_process.php. When your fill in the form does form_process.php give any errors and is it doing what you want it to do. It should be adding the user to database and only showing the HTML for the modal.

Edited September 29, 2013 by Ch0cu3r

Hampe · September 29, 2013

READ THE NEXT POST

The Javascript for "email available check" is disabled. Now the popup shows again, with the information that was put in the form.

But the problem still is that the user is not created. I think the form page and form_process.php not working together.

This code:

if(isset($_POST['submit']))
{
	$strName    = addslashes( $_POST['name'] );
	$strUser    = addslashes( $_POST['user'] );
	$strDomain  = addslashes( $_POST['domain'] );
	$strPass1   = addslashes( $_POST['pass1'] );
	$strMD5Pass = md5( $strPass1 );
	$kod    = addslashes( $_POST['kod'] );

is in both the .php files... I really dont know why its not working.

BUT! "create.php" handles both the database INSERT and the form, so there is some conflict between the files..

Edited September 29, 2013 by Hampe

Hampe · September 29, 2013

Lets start from the beginning. We have 1 file (create.php) that works perfect. Can we (you or me.. I dont know) make the Modal Popup work in that file, or there must be a "form_process.php" ?

Ch0cu3r · September 29, 2013

If you want the modal to appear without the page reloading when the submit button is pressed you'll need to use ajax. PHP is ran on the server. Javascript is ran in the browser which is executed way after PHP has finished processing the script. You cannot send data to and from the server without the page reloading, unless you use ajax.

If you implement my ajax method (just the javascript code) in post#13 to your code in post #6 (which I assume is create.php. and give the form an id of mailSetupForm)). and set the ajax request to create.php it should run as you expect, but the page will duplicate!. You only want the modal returned from the ajax request. This is happening because you process the form data from lines ~160 to ~280. You output the modal on line ~298. Any html/text outputted before that line will be sent back to the ajax request and this why the page duplicates.

Moving the PHP code on lines 160 - 280 in create.php to form_process.php will prevent this from happening,as that file is only returning the html for the modal when the user has been added to the database not the entire page of create.php!

form_process.php can be named to any thing just like any other php file you create. You just reference that file in the ajax request, like you would with any file you link to.

Hope I have made it clearer now what I'm trying to get your to implement. if you're not happy with this then please say.

Edited September 29, 2013 by Ch0cu3r

Hampe · September 30, 2013

Good morning!

I start this day and thread by say thank you for all the help! I really appreciate it.

I did what you told me to do, but it just wont create the user. As before, I get the Popup with the information but nothing more then that. I have test with all-in-one code in "create.php", and with separate files, where line ~160 - ~280 were moved to "form_process.php". And I have been testing with 2-3 other things too...

There is some sort of conflict in the code, I just dont know what it is!

I´ll go nuts soon!! $:-\$

Edited September 30, 2013 by Hampe

Ch0cu3r · September 30, 2013

Okay. Post create.php and form_process.php here I will check it out

Sign In

jQuery Modal doesn't show up

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information