Website At 100: Ajax

HOW TO LOAD AND REFRESH DIV EVERY X SECONDS WITH JQUERY AND AJAX

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
As of these days most social networking sites are using this event to load most recent posts every second without refreshing page, stream and tweets like Facebook, Google+ and Twitter, it loads in the top part of the page and I’d try developed one with <a href="http://websiteat100.com/blog/category/jquery/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Jquery blog by websiteat100.com">jQuery </a>and Ajax to mimic this functionality, it’s really simple and easy to use.</div>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
Okay let’s start.</div>
<h3 style="background-color: white; color: #333333; font-family: 'Droid Sans'; font-size: 16px; font-weight: 200; letter-spacing: -0.1px; line-height: 20px; margin-top: 0px; padding: 0px; text-align: justify;">
Index.html</h3>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
This contains <a href="http://websiteat100.com/blog/category/html5-and-css3/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Html blog by websiteat100.com">html </a>and <a href="http://websiteat100.com/blog/category/jquery/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Javascript blog by websiteat100.com">javascript </a>code. <code style="font-family: monospace, monospace; font-size: 1em; white-space: pre-wrap; word-wrap: break-word;">load('load_post.php');</code></div>
<div data-settings=" minimize scroll-mouseover" id="crayon-52a6c54637f2e428247366" style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; text-align: justify;">
<div data-settings=" show">
XHTML</div>
<div>
</div>
<div>
<table style="border-collapse: collapse; border-spacing: 0px;"><tbody>
<tr><td data-settings="show" style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div data-line="crayon-52a6c54637f2e428247366-1">
1</div>
<div data-line="crayon-52a6c54637f2e428247366-2">
2</div>
<div data-line="crayon-52a6c54637f2e428247366-3">
3</div>
<div data-line="crayon-52a6c54637f2e428247366-4">
4</div>
<div data-line="crayon-52a6c54637f2e428247366-5">
5</div>
<div data-line="crayon-52a6c54637f2e428247366-6">
6</div>
<div data-line="crayon-52a6c54637f2e428247366-7">
7</div>
<div data-line="crayon-52a6c54637f2e428247366-8">
8</div>
<div data-line="crayon-52a6c54637f2e428247366-9">
9</div>
<div data-line="crayon-52a6c54637f2e428247366-10">
10</div>
<div data-line="crayon-52a6c54637f2e428247366-11">
11</div>
<div data-line="crayon-52a6c54637f2e428247366-12">
12</div>
</td><td style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div id="crayon-52a6c54637f2e428247366-1">
<script type=”text/javascript”></div>
<div id="crayon-52a6c54637f2e428247366-2">
   var autoLoad = setInterval(</div>
<div id="crayon-52a6c54637f2e428247366-3">
   function ()</div>
<div id="crayon-52a6c54637f2e428247366-4">
   {</div>
<div id="crayon-52a6c54637f2e428247366-5">
      $(‘#load_post’).load(‘load_post.php’).fadeIn(“slow”);</div>
<div id="crayon-52a6c54637f2e428247366-6">
   }, 10000); // refresh page every 10 seconds</div>
<div id="crayon-52a6c54637f2e428247366-7">
</script></div>
<div id="crayon-52a6c54637f2e428247366-8">
</div>
<div id="crayon-52a6c54637f2e428247366-9">
<body></div>
<div id="crayon-52a6c54637f2e428247366-10">
    <!–append load-post.php echo value here–></div>
<div id="crayon-52a6c54637f2e428247366-11">
    <div id=”load_post”></div></div>
<div id="crayon-52a6c54637f2e428247366-12">
</body></div>
</td></tr>
</tbody></table>
</div>
</div>
<h3 style="background-color: white; color: #333333; font-family: 'Droid Sans'; font-size: 16px; font-weight: 200; letter-spacing: -0.1px; line-height: 20px; margin-top: 0px; padding: 0px; text-align: justify;">
Load_post.php</h3>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
This contains <a href="http://websiteat100.com/blog/category/php/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Php blog by websiteat100.com">php </a>script to get data from the database.</div>
<div data-settings=" minimize scroll-mouseover" id="crayon-52a6c54637f38329895438" style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; text-align: justify;">
<div data-settings=" show">
PHP</div>
<div>
</div>
<div>
<table style="border-collapse: collapse; border-spacing: 0px;"><tbody>
<tr><td data-settings="show" style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div data-line="crayon-52a6c54637f38329895438-1">
1</div>
<div data-line="crayon-52a6c54637f38329895438-2">
2</div>
<div data-line="crayon-52a6c54637f38329895438-3">
3</div>
<div data-line="crayon-52a6c54637f38329895438-4">
4</div>
<div data-line="crayon-52a6c54637f38329895438-5">
5</div>
<div data-line="crayon-52a6c54637f38329895438-6">
6</div>
<div data-line="crayon-52a6c54637f38329895438-7">
7</div>
<div data-line="crayon-52a6c54637f38329895438-8">
8</div>
<div data-line="crayon-52a6c54637f38329895438-9">
9</div>
<div data-line="crayon-52a6c54637f38329895438-10">
10</div>
<div data-line="crayon-52a6c54637f38329895438-11">
11</div>
<div data-line="crayon-52a6c54637f38329895438-12">
12</div>
</td><td style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div id="crayon-52a6c54637f38329895438-1">
// include db configuration file</div>
<div id="crayon-52a6c54637f38329895438-2">
include_once(‘config.php’);</div>
<div id="crayon-52a6c54637f38329895438-3">
</div>
<div id="crayon-52a6c54637f38329895438-4">
$sql = mysql_query( “SELECT * FROM tblpost LIMIT 0, 5″ ) or die(mysql_error().’ Error loading data.’);</div>
<div id="crayon-52a6c54637f38329895438-5">
$num_post = mysql_num_rows($sql); // count the number of rows</div>
<div id="crayon-52a6c54637f38329895438-6">
</div>
<div id="crayon-52a6c54637f38329895438-7">
// check if there is data</div>
<div id="crayon-52a6c54637f38329895438-8">
if( $num_post ) {</div>
<div id="crayon-52a6c54637f38329895438-9">
   //this contains data to load into a page.</div>
<div id="crayon-52a6c54637f38329895438-10">
} else {</div>
<div id="crayon-52a6c54637f38329895438-11">
   echo ‘<p>There are no added post yet, please try to add to start sharing.</p>’;</div>
<div id="crayon-52a6c54637f38329895438-12">
}</div>
</td></tr>
</tbody></table>
</div>
</div>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
This is very helpful if you want to get and load data from database in every x seconds without refreshing your page.</div>
</div>

HOW TO LOAD AND REFRESH DIV EVERY X SECONDS WITH JQUERY AND AJAX

As of these days most social networking sites are using this event to load most recent posts every second without refreshing page, stream ...

PHP AND MYSQL UPLOAD WITH RESIZE IMAGE

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
If you’re searching on a short, direct and simple <strong style="line-height: inherit;"><a href="http://websiteat100.com/blog/category/php/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Php blog by websiteat100.com">PHP</a> and MySQL upload and re-size</strong>script, well you’re in the right place folks, today I’ll share you how easily this scripts is and I’m using this script too in my web projects and it works fine, one of the CMS that uses this method is <a href="http://websiteat100.com/blog/category/wordpress/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Wordpress blog by websiteat100.com">WordPress </a>of course there’s a lot more <img alt=";)" src="http://www.sutanaryan.com/wp-includes/images/smilies/icon_wink.gif" style="border: 0px; height: auto; margin: 0px; max-width: 100%; vertical-align: middle;" title="" /></div>
<h3 style="background-color: white; color: #333333; font-family: 'Droid Sans'; font-size: 16px; font-weight: 200; letter-spacing: -0.1px; line-height: 20px; margin-top: 0px; padding: 0px; text-align: justify;">
Why we have to re-size image?</h3>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
The answer is pretty simple, although there are lots that are need to consider but the most common are, first server load and space second web speed (remember Google love faster website) and more, hey it’s an optional so if you have SSD and lighting speed server then you don’t need to re-size images <img alt=":)" src="http://www.sutanaryan.com/wp-includes/images/smilies/icon_smile.gif" style="border: 0px; height: auto; margin: 0px; max-width: 100%; vertical-align: middle;" title="" /></div>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
Okay lets go, are you ready?</div>
<h3 style="background-color: white; color: #333333; font-family: 'Droid Sans'; font-size: 16px; font-weight: 200; letter-spacing: -0.1px; line-height: 20px; margin-top: 0px; padding: 0px; text-align: justify;">
HTML Code</h3>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
This contains <a href="http://websiteat100.com/blog/category/html5-and-css3/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Html blog by websiteat100.com">HTML </a>form code for upload.</div>
<div data-settings=" minimize scroll-mouseover" id="crayon-52a8111e307c2636637010" style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; text-align: justify;">
<div data-settings=" show">
XHTML</div>
<div>
</div>
<div>
<table style="border-collapse: collapse; border-spacing: 0px;"><tbody>
<tr><td data-settings="show" style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div data-line="crayon-52a8111e307c2636637010-1">
1</div>
<div data-line="crayon-52a8111e307c2636637010-2">
2</div>
<div data-line="crayon-52a8111e307c2636637010-3">
3</div>
<div data-line="crayon-52a8111e307c2636637010-4">
4</div>
<div data-line="crayon-52a8111e307c2636637010-5">
5</div>
<div data-line="crayon-52a8111e307c2636637010-6">
6</div>
<div data-line="crayon-52a8111e307c2636637010-7">
7</div>
<div data-line="crayon-52a8111e307c2636637010-8">
8</div>
<div data-line="crayon-52a8111e307c2636637010-9">
9</div>
<div data-line="crayon-52a8111e307c2636637010-10">
10</div>
<div data-line="crayon-52a8111e307c2636637010-11">
11</div>
<div data-line="crayon-52a8111e307c2636637010-12">
12</div>
</td><td style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div id="crayon-52a8111e307c2636637010-1">
<!–please do not tear or rip enctype, this is the most important form parameters in uploading files–></div>
<div id="crayon-52a8111e307c2636637010-2">
<form enctype=”multipart/form-data” method=”post”></div>
<div id="crayon-52a8111e307c2636637010-3">
    <fieldset></div>
<div id="crayon-52a8111e307c2636637010-4">
        <p><label for=”file”>Filename:</label><br/></div>
<div id="crayon-52a8111e307c2636637010-5">
            <input type=”file” name=”file” /></div>
<div id="crayon-52a8111e307c2636637010-6">
        </p></div>
<div id="crayon-52a8111e307c2636637010-7">
        <p></div>
<div id="crayon-52a8111e307c2636637010-8">
            <input type=”hidden” name=”task” value=”upload” /></div>
<div id="crayon-52a8111e307c2636637010-9">
            <input type=”submit” value=”Upload File” /></div>
<div id="crayon-52a8111e307c2636637010-10">
        </p></div>
<div id="crayon-52a8111e307c2636637010-11">
    </fieldset></div>
<div id="crayon-52a8111e307c2636637010-12">
</form></div>
</td></tr>
</tbody></table>
</div>
</div>
<h3 style="background-color: white; color: #333333; font-family: 'Droid Sans'; font-size: 16px; font-weight: 200; letter-spacing: -0.1px; line-height: 20px; margin-top: 0px; padding: 0px; text-align: justify;">
PHP Code</h3>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
These script simply re-size image into two, 50px and 100px and before saving into database it added time stamp into the image(s) name, this to avoid conflict in other previous uploaded images.</div>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
I’ll add comment as long as I can so no need to tear the code apart and explain line by line, hope this work for you guys.</div>
<div data-settings=" minimize scroll-mouseover" id="crayon-52a8111e307cc336252270" style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; text-align: justify;">
<div data-settings=" show">
PHP</div>
<div>
</div>
<div>
<table style="border-collapse: collapse; border-spacing: 0px;"><tbody>
<tr><td data-settings="show" style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div data-line="crayon-52a8111e307cc336252270-1">
1</div>
<div data-line="crayon-52a8111e307cc336252270-2">
2</div>
<div data-line="crayon-52a8111e307cc336252270-3">
3</div>
<div data-line="crayon-52a8111e307cc336252270-4">
4</div>
<div data-line="crayon-52a8111e307cc336252270-5">
5</div>
<div data-line="crayon-52a8111e307cc336252270-6">
6</div>
<div data-line="crayon-52a8111e307cc336252270-7">
7</div>
<div data-line="crayon-52a8111e307cc336252270-8">
8</div>
<div data-line="crayon-52a8111e307cc336252270-9">
9</div>
<div data-line="crayon-52a8111e307cc336252270-10">
10</div>
<div data-line="crayon-52a8111e307cc336252270-11">
11</div>
<div data-line="crayon-52a8111e307cc336252270-12">
12</div>
<div data-line="crayon-52a8111e307cc336252270-13">
13</div>
<div data-line="crayon-52a8111e307cc336252270-14">
14</div>
<div data-line="crayon-52a8111e307cc336252270-15">
15</div>
<div data-line="crayon-52a8111e307cc336252270-16">
16</div>
<div data-line="crayon-52a8111e307cc336252270-17">
17</div>
<div data-line="crayon-52a8111e307cc336252270-18">
18</div>
<div data-line="crayon-52a8111e307cc336252270-19">
19</div>
<div data-line="crayon-52a8111e307cc336252270-20">
20</div>
<div data-line="crayon-52a8111e307cc336252270-21">
21</div>
<div data-line="crayon-52a8111e307cc336252270-22">
22</div>
<div data-line="crayon-52a8111e307cc336252270-23">
23</div>
<div data-line="crayon-52a8111e307cc336252270-24">
24</div>
<div data-line="crayon-52a8111e307cc336252270-25">
25</div>
<div data-line="crayon-52a8111e307cc336252270-26">
26</div>
<div data-line="crayon-52a8111e307cc336252270-27">
27</div>
<div data-line="crayon-52a8111e307cc336252270-28">
28</div>
<div data-line="crayon-52a8111e307cc336252270-29">
29</div>
<div data-line="crayon-52a8111e307cc336252270-30">
30</div>
<div data-line="crayon-52a8111e307cc336252270-31">
31</div>
<div data-line="crayon-52a8111e307cc336252270-32">
32</div>
<div data-line="crayon-52a8111e307cc336252270-33">
33</div>
<div data-line="crayon-52a8111e307cc336252270-34">
34</div>
<div data-line="crayon-52a8111e307cc336252270-35">
35</div>
<div data-line="crayon-52a8111e307cc336252270-36">
36</div>
<div data-line="crayon-52a8111e307cc336252270-37">
37</div>
<div data-line="crayon-52a8111e307cc336252270-38">
38</div>
<div data-line="crayon-52a8111e307cc336252270-39">
39</div>
<div data-line="crayon-52a8111e307cc336252270-40">
40</div>
<div data-line="crayon-52a8111e307cc336252270-41">
41</div>
<div data-line="crayon-52a8111e307cc336252270-42">
42</div>
<div data-line="crayon-52a8111e307cc336252270-43">
43</div>
<div data-line="crayon-52a8111e307cc336252270-44">
44</div>
<div data-line="crayon-52a8111e307cc336252270-45">
45</div>
<div data-line="crayon-52a8111e307cc336252270-46">
46</div>
<div data-line="crayon-52a8111e307cc336252270-47">
47</div>
<div data-line="crayon-52a8111e307cc336252270-48">
48</div>
<div data-line="crayon-52a8111e307cc336252270-49">
49</div>
<div data-line="crayon-52a8111e307cc336252270-50">
50</div>
<div data-line="crayon-52a8111e307cc336252270-51">
51</div>
<div data-line="crayon-52a8111e307cc336252270-52">
52</div>
<div data-line="crayon-52a8111e307cc336252270-53">
53</div>
<div data-line="crayon-52a8111e307cc336252270-54">
54</div>
<div data-line="crayon-52a8111e307cc336252270-55">
55</div>
<div data-line="crayon-52a8111e307cc336252270-56">
56</div>
<div data-line="crayon-52a8111e307cc336252270-57">
57</div>
<div data-line="crayon-52a8111e307cc336252270-58">
58</div>
<div data-line="crayon-52a8111e307cc336252270-59">
59</div>
<div data-line="crayon-52a8111e307cc336252270-60">
60</div>
<div data-line="crayon-52a8111e307cc336252270-61">
61</div>
<div data-line="crayon-52a8111e307cc336252270-62">
62</div>
<div data-line="crayon-52a8111e307cc336252270-63">
63</div>
<div data-line="crayon-52a8111e307cc336252270-64">
64</div>
<div data-line="crayon-52a8111e307cc336252270-65">
65</div>
<div data-line="crayon-52a8111e307cc336252270-66">
66</div>
<div data-line="crayon-52a8111e307cc336252270-67">
67</div>
<div data-line="crayon-52a8111e307cc336252270-68">
68</div>
<div data-line="crayon-52a8111e307cc336252270-69">
69</div>
<div data-line="crayon-52a8111e307cc336252270-70">
70</div>
<div data-line="crayon-52a8111e307cc336252270-71">
71</div>
<div data-line="crayon-52a8111e307cc336252270-72">
72</div>
<div data-line="crayon-52a8111e307cc336252270-73">
73</div>
<div data-line="crayon-52a8111e307cc336252270-74">
74</div>
<div data-line="crayon-52a8111e307cc336252270-75">
75</div>
<div data-line="crayon-52a8111e307cc336252270-76">
76</div>
<div data-line="crayon-52a8111e307cc336252270-77">
77</div>
<div data-line="crayon-52a8111e307cc336252270-78">
78</div>
<div data-line="crayon-52a8111e307cc336252270-79">
79</div>
<div data-line="crayon-52a8111e307cc336252270-80">
80</div>
<div data-line="crayon-52a8111e307cc336252270-81">
81</div>
<div data-line="crayon-52a8111e307cc336252270-82">
82</div>
<div data-line="crayon-52a8111e307cc336252270-83">
83</div>
<div data-line="crayon-52a8111e307cc336252270-84">
84</div>
<div data-line="crayon-52a8111e307cc336252270-85">
85</div>
<div data-line="crayon-52a8111e307cc336252270-86">
86</div>
<div data-line="crayon-52a8111e307cc336252270-87">
87</div>
<div data-line="crayon-52a8111e307cc336252270-88">
88</div>
<div data-line="crayon-52a8111e307cc336252270-89">
89</div>
<div data-line="crayon-52a8111e307cc336252270-90">
90</div>
<div data-line="crayon-52a8111e307cc336252270-91">
91</div>
<div data-line="crayon-52a8111e307cc336252270-92">
92</div>
<div data-line="crayon-52a8111e307cc336252270-93">
93</div>
</td><td style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div id="crayon-52a8111e307cc336252270-1">
<?php</div>
<div id="crayon-52a8111e307cc336252270-2">
//include our config db</div>
<div id="crayon-52a8111e307cc336252270-3">
include (‘config.php’);</div>
<div id="crayon-52a8111e307cc336252270-4">
</div>
<div id="crayon-52a8111e307cc336252270-5">
$error = ”;</div>
<div id="crayon-52a8111e307cc336252270-6">
$success = ”;</div>
<div id="crayon-52a8111e307cc336252270-7">
</div>
<div id="crayon-52a8111e307cc336252270-8">
if( isset( $_POST['task']) && ‘upload’ == $_POST['task'] )</div>
<div id="crayon-52a8111e307cc336252270-9">
{</div>
<div id="crayon-52a8111e307cc336252270-10">
    // get uploaded file name</div>
<div id="crayon-52a8111e307cc336252270-11">
    $image = $_FILES["file"]["name"];</div>
<div id="crayon-52a8111e307cc336252270-12">
</div>
<div id="crayon-52a8111e307cc336252270-13">
    if( empty( $image ) ) {</div>
<div id="crayon-52a8111e307cc336252270-14">
        $error = ‘File is empty, please select image to upload.’;</div>
<div id="crayon-52a8111e307cc336252270-15">
    } else if($_FILES["file"]["type"] == “application/msword”) {</div>
<div id="crayon-52a8111e307cc336252270-16">
        $error = ‘Invalid image type, use (e.g. png, jpg, gif).’;</div>
<div id="crayon-52a8111e307cc336252270-17">
    } else if( $_FILES["file"]["error"] > 0 ) {</div>
<div id="crayon-52a8111e307cc336252270-18">
        $error = ‘Oops sorry, seems there is an error uploading your image, please try again later.’;</div>
<div id="crayon-52a8111e307cc336252270-19">
    } else {</div>
<div id="crayon-52a8111e307cc336252270-20">
</div>
<div id="crayon-52a8111e307cc336252270-21">
        // strip file slashes in uploaded file, although it will not happen but just in case <img alt=";)" class="wp-smiley" src="http://websiteat100.com/blog/wp-includes/images/smilies/icon_wink.gif" style="border: 0px; height: auto; margin: 0px !important; max-height: 1em; max-width: 100%; vertical-align: middle;" /></div>
<div id="crayon-52a8111e307cc336252270-22">
        $filename = stripslashes( $_FILES['file']['name'] );</div>
<div id="crayon-52a8111e307cc336252270-23">
        $ext = get_file_extension( $filename );</div>
<div id="crayon-52a8111e307cc336252270-24">
        $ext = strtolower( $ext );</div>
<div id="crayon-52a8111e307cc336252270-25">
</div>
<div id="crayon-52a8111e307cc336252270-26">
        if(( $ext != “jpg” ) && ( $ext != “jpeg” ) && ( $ext != “png” ) && ( $ext != “gif” ) ) {</div>
<div id="crayon-52a8111e307cc336252270-27">
            $error = ‘Unknown Image extension.’;</div>
<div id="crayon-52a8111e307cc336252270-28">
            return false;</div>
<div id="crayon-52a8111e307cc336252270-29">
        } else {</div>
<div id="crayon-52a8111e307cc336252270-30">
            // get uploaded file size</div>
<div id="crayon-52a8111e307cc336252270-31">
            $size = filesize( $_FILES['file']['tmp_name'] );</div>
<div id="crayon-52a8111e307cc336252270-32">
</div>
<div id="crayon-52a8111e307cc336252270-33">
            // get php ini settings for max uploaded file size</div>
<div id="crayon-52a8111e307cc336252270-34">
            $max_upload = ini_get( ‘upload_max_filesize’ );</div>
<div id="crayon-52a8111e307cc336252270-35">
</div>
<div id="crayon-52a8111e307cc336252270-36">
            // check if we’re able to upload lessthan the max size</div>
<div id="crayon-52a8111e307cc336252270-37">
            if( $size > $max_upload )</div>
<div id="crayon-52a8111e307cc336252270-38">
                $error = ‘You have exceeded the upload file size.’;</div>
<div id="crayon-52a8111e307cc336252270-39">
</div>
<div id="crayon-52a8111e307cc336252270-40">
            // check uploaded file extension if it is jpg or jpeg, otherwise png and if not then it goes to gif image conversion</div>
<div id="crayon-52a8111e307cc336252270-41">
            $uploaded_file = $_FILES['file']['tmp_name'];</div>
<div id="crayon-52a8111e307cc336252270-42">
            if( $ext == “jpg” || $ext == “jpeg” )</div>
<div id="crayon-52a8111e307cc336252270-43">
                $source = imagecreatefromjpeg( $uploaded_file );</div>
<div id="crayon-52a8111e307cc336252270-44">
            else if( $ext == “png” )</div>
<div id="crayon-52a8111e307cc336252270-45">
                $source = imagecreatefrompng( $uploaded_file );</div>
<div id="crayon-52a8111e307cc336252270-46">
            else</div>
<div id="crayon-52a8111e307cc336252270-47">
                $source = imagecreatefromgif( $uploaded_file );</div>
<div id="crayon-52a8111e307cc336252270-48">
</div>
<div id="crayon-52a8111e307cc336252270-49">
            // getimagesize() function simply get the size of an image</div>
<div id="crayon-52a8111e307cc336252270-50">
            list( $width, $height) = get_image_size( $uploaded_file );</div>
<div id="crayon-52a8111e307cc336252270-51">
            $ratio = $height / $width;</div>
<div id="crayon-52a8111e307cc336252270-52">
</div>
<div id="crayon-52a8111e307cc336252270-53">
            // new width 50(this is in pixel format)</div>
<div id="crayon-52a8111e307cc336252270-54">
            $nw = 50;</div>
<div id="crayon-52a8111e307cc336252270-55">
            $nh = ceil( $ratio * $nw );</div>
<div id="crayon-52a8111e307cc336252270-56">
            $dst = imagecreatetruecolor( $nw, $nh );</div>
<div id="crayon-52a8111e307cc336252270-57">
</div>
<div id="crayon-52a8111e307cc336252270-58">
            // new width 100 in pixel format too</div>
<div id="crayon-52a8111e307cc336252270-59">
            $nw1 = 100;</div>
<div id="crayon-52a8111e307cc336252270-60">
            $nh1 = ceil( $ratio * $nw1 );</div>
<div id="crayon-52a8111e307cc336252270-61">
            $dst1 = imagecreatetruecolor( $nw1, $nh1 );</div>
<div id="crayon-52a8111e307cc336252270-62">
</div>
<div id="crayon-52a8111e307cc336252270-63">
            imagecopyresampled( $dst, $source, 0, 0, 0,0, $nw, $nh, $width, $height );</div>
<div id="crayon-52a8111e307cc336252270-64">
            imagecopyresampled( $dst1, $source, 0, 0, 0, 0, $nw1, $nh1, $width, $height );</div>
<div id="crayon-52a8111e307cc336252270-65">
</div>
<div id="crayon-52a8111e307cc336252270-66">
            // rename our upload image file name, this to avoid conflict in previous upload images</div>
<div id="crayon-52a8111e307cc336252270-67">
            // to easily get our uploaded images name we added image size to the suffix</div>
<div id="crayon-52a8111e307cc336252270-68">
            $rnd_name = ‘photos_’.uniqid(mt_rand(10, 15)).’_’.time().’_50x50.’.$ext;</div>
<div id="crayon-52a8111e307cc336252270-69">
            $rnd_name1 = ‘photos_’.uniqid(mt_rand(10, 15)).’_’.time().’_100x100.’.$ext;</div>
<div id="crayon-52a8111e307cc336252270-70">
</div>
<div id="crayon-52a8111e307cc336252270-71">
            // move it to uploads dir with full quality</div>
<div id="crayon-52a8111e307cc336252270-72">
            imagejpeg( $dst, ‘/uploads/’.$rnd_name, 100 );</div>
<div id="crayon-52a8111e307cc336252270-73">
            imagejpeg( $dst1, ‘/uploads/’.$rnd_name1, 100 );</div>
<div id="crayon-52a8111e307cc336252270-74">
</div>
<div id="crayon-52a8111e307cc336252270-75">
            // I think that’s it we’re good to clear our created images</div>
<div id="crayon-52a8111e307cc336252270-76">
            imagedestroy( $source );</div>
<div id="crayon-52a8111e307cc336252270-77">
            imagedestroy( $dst );</div>
<div id="crayon-52a8111e307cc336252270-78">
            imagedestroy( $dst1 );</div>
<div id="crayon-52a8111e307cc336252270-79">
</div>
<div id="crayon-52a8111e307cc336252270-80">
            // so all clear, lets save our image to database</div>
<div id="crayon-52a8111e307cc336252270-81">
            $is_uploaded = mysql_query( “INSERT INTO attachment(photosmall, photobig) VALUES(‘$rnd_name’, ‘$rnd_name1′)” ) or die(‘erroror inserting data ‘. mysql_erroror());</div>
<div id="crayon-52a8111e307cc336252270-82">
</div>
<div id="crayon-52a8111e307cc336252270-83">
            // check if it uploaded successfully, if so then display success message otherwise the erroror message in the else statement</div>
<div id="crayon-52a8111e307cc336252270-84">
            if( $is_uploaded )</div>
<div id="crayon-52a8111e307cc336252270-85">
                $success = ‘Post shared successfully.’;</div>
<div id="crayon-52a8111e307cc336252270-86">
            else</div>
<div id="crayon-52a8111e307cc336252270-87">
                $error = ‘erroror uploading file.’;</div>
<div id="crayon-52a8111e307cc336252270-88">
</div>
<div id="crayon-52a8111e307cc336252270-89">
        }</div>
<div id="crayon-52a8111e307cc336252270-90">
</div>
<div id="crayon-52a8111e307cc336252270-91">
    }</div>
<div id="crayon-52a8111e307cc336252270-92">
}</div>
<div id="crayon-52a8111e307cc336252270-93">
?></div>
</td></tr>
</tbody></table>
</div>
</div>
<h3 style="background-color: white; color: #333333; font-family: 'Droid Sans'; font-size: 16px; font-weight: 200; letter-spacing: -0.1px; line-height: 20px; margin-top: 0px; padding: 0px; text-align: justify;">
PHP Function</h3>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
A very simple <a href="http://websiteat100.com/blog/category/php/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Php blog by websiteat100.com">PHP </a>function to get and return the file extension.</div>
<div data-settings=" minimize scroll-mouseover" id="crayon-52a8111e307d6971153636" style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; text-align: justify;">
<div data-settings=" show">
PHP</div>
<div>
</div>
<div>
<table style="border-collapse: collapse; border-spacing: 0px;"><tbody>
<tr><td data-settings="show" style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div data-line="crayon-52a8111e307d6971153636-1">
1</div>
<div data-line="crayon-52a8111e307d6971153636-2">
2</div>
<div data-line="crayon-52a8111e307d6971153636-3">
3</div>
<div data-line="crayon-52a8111e307d6971153636-4">
4</div>
<div data-line="crayon-52a8111e307d6971153636-5">
5</div>
<div data-line="crayon-52a8111e307d6971153636-6">
6</div>
<div data-line="crayon-52a8111e307d6971153636-7">
7</div>
<div data-line="crayon-52a8111e307d6971153636-8">
8</div>
<div data-line="crayon-52a8111e307d6971153636-9">
9</div>
<div data-line="crayon-52a8111e307d6971153636-10">
10</div>
</td><td style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div id="crayon-52a8111e307d6971153636-1">
function get_file_extension( $file )  {</div>
<div id="crayon-52a8111e307d6971153636-2">
    if( empty( $file ) )</div>
<div id="crayon-52a8111e307d6971153636-3">
        return;</div>
<div id="crayon-52a8111e307d6971153636-4">
</div>
<div id="crayon-52a8111e307d6971153636-5">
    // if goes here then good so all clear and good to go</div>
<div id="crayon-52a8111e307d6971153636-6">
    $ext = end(explode( “.”, $file ));</div>
<div id="crayon-52a8111e307d6971153636-7">
</div>
<div id="crayon-52a8111e307d6971153636-8">
    // return file extension</div>
<div id="crayon-52a8111e307d6971153636-9">
    return $ext;</div>
<div id="crayon-52a8111e307d6971153636-10">
}</div>
</td></tr>
</tbody></table>
</div>
</div>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
<strong style="line-height: inherit;">Final Words:</strong> How and when this snippet is useful? this code is very useful to less your server load, and to lighten your site display by using re-sized images, Google love faster website so of course SEO </div>
</div>

PHP AND MYSQL UPLOAD WITH RESIZE IMAGE

If you’re searching on a short, direct and simple PHP and MySQL upload and re-size script, well you’re in the right place folks, today I...

PHP AND MYSQL COMMENT FORM WITHOUT REFRESHING PAGE WITH JQUERY

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
In this tutorial I’ll show you how to create an <strong style="line-height: inherit;">advance comment form in <a href="http://websiteat100.com/blog/category/php/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Php blog by websiteat100.com">PHP </a>and MySQL with <a href="http://websiteat100.com/blog/category/jquery/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Jquery blog by websiteat100.com">jQuery</a></strong><a href="http://websiteat100.com/blog/category/jquery/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Jquery blog by websiteat100.com"> </a>without refreshing page in just a few lines of codes all we need to do is initialize the submitted post data and pass using<a href="http://websiteat100.com/blog/category/jquery/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Jquery blog by websiteat100.com">jQuery </a>API, display response and done, the data submitted is constructed using <a href="http://websiteat100.com/blog/category/php/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Php blog by websiteat100.com">PHP</a>, so sounds simple right? Yes it is.</div>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
Past few years Google introduces web 2.0 in their Gmail project with <a href="http://websiteat100.com/blog/category/jquery/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Jquery blog by websiteat100.com">jQuery </a>and now web programming is going crazy, adding and optimizing web using <a href="http://websiteat100.com/blog/category/jquery/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Jquery blog by websiteat100.com">jQuery </a>to save time, smooth and with elegant look.</div>
<h3 style="background-color: white; color: #333333; font-family: 'Droid Sans'; font-size: 16px; font-weight: 200; letter-spacing: -0.1px; line-height: 20px; margin-top: 0px; padding: 0px; text-align: justify;">
index.html</h3>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
Here our <a href="http://websiteat100.com/blog/category/html5-and-css3/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Html blog by websiteat100.com">HTML </a>codes that contains the basic input data name, email, url and message.</div>
<div data-settings=" minimize scroll-mouseover" id="crayon-52a80809243c3891220618" style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; text-align: justify;">
<div data-settings=" show">
XHTML</div>
<div>
</div>
<div>
<table style="border-collapse: collapse; border-spacing: 0px;"><tbody>
<tr><td data-settings="show" style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div data-line="crayon-52a80809243c3891220618-1">
1</div>
<div data-line="crayon-52a80809243c3891220618-2">
2</div>
<div data-line="crayon-52a80809243c3891220618-3">
3</div>
<div data-line="crayon-52a80809243c3891220618-4">
4</div>
<div data-line="crayon-52a80809243c3891220618-5">
5</div>
<div data-line="crayon-52a80809243c3891220618-6">
6</div>
<div data-line="crayon-52a80809243c3891220618-7">
7</div>
<div data-line="crayon-52a80809243c3891220618-8">
8</div>
<div data-line="crayon-52a80809243c3891220618-9">
9</div>
<div data-line="crayon-52a80809243c3891220618-10">
10</div>
<div data-line="crayon-52a80809243c3891220618-11">
11</div>
<div data-line="crayon-52a80809243c3891220618-12">
12</div>
<div data-line="crayon-52a80809243c3891220618-13">
13</div>
<div data-line="crayon-52a80809243c3891220618-14">
14</div>
<div data-line="crayon-52a80809243c3891220618-15">
15</div>
<div data-line="crayon-52a80809243c3891220618-16">
16</div>
<div data-line="crayon-52a80809243c3891220618-17">
17</div>
<div data-line="crayon-52a80809243c3891220618-18">
18</div>
<div data-line="crayon-52a80809243c3891220618-19">
19</div>
<div data-line="crayon-52a80809243c3891220618-20">
20</div>
<div data-line="crayon-52a80809243c3891220618-21">
21</div>
<div data-line="crayon-52a80809243c3891220618-22">
22</div>
</td><td style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div id="crayon-52a80809243c3891220618-1">
<!–Error and success message wrapper–></div>
<div id="crayon-52a80809243c3891220618-2">
<div id=”errAll”></div></div>
<div id="crayon-52a80809243c3891220618-3">
</div>
<div id="crayon-52a80809243c3891220618-4">
<!–Lists of comments posts wrapper–></div>
<div id="crayon-52a80809243c3891220618-5">
<div class=”commentpost”></div></div>
<div id="crayon-52a80809243c3891220618-6">
</div>
<div id="crayon-52a80809243c3891220618-7">
<!–Comment form–></div>
<div id="crayon-52a80809243c3891220618-8">
<form method=”post” id=”formcomment”></div>
<div id="crayon-52a80809243c3891220618-9">
   <label for=”name”>Name</label></div>
<div id="crayon-52a80809243c3891220618-10">
   <p><input type=”text” name=”name” id=”name” value=”<?php echo (isset($_POST['name']) ? $_POST['name'] : ”); ?>” /></p></div>
<div id="crayon-52a80809243c3891220618-11">
</div>
<div id="crayon-52a80809243c3891220618-12">
   <label for=”email”>Email</label></div>
<div id="crayon-52a80809243c3891220618-13">
   <p><input type=”text” name=”email” id=”email” value=”<?php echo (isset($_POST['email']) ? $_POST['email'] : ”); ?>” /></p></div>
<div id="crayon-52a80809243c3891220618-14">
   <label for=”website”>URL</label></div>
<div id="crayon-52a80809243c3891220618-15">
   <p><input type=”text” name=”url” id=”url” value=”<?php echo (isset($_POST['url']) ? $_POST['url'] : ”); ?>” /></p></div>
<div id="crayon-52a80809243c3891220618-16">
</div>
<div id="crayon-52a80809243c3891220618-17">
   <label for=”website”>Message</label></div>
<div id="crayon-52a80809243c3891220618-18">
   <p><textarea cols=”40″ rows=”6″ name=”message” id=”message”><?php echo (isset($_POST['message']) ? $_POST['message'] : ”); ?></textarea></p></div>
<div id="crayon-52a80809243c3891220618-19">
</div>
<div id="crayon-52a80809243c3891220618-20">
   <p><input type=”submit” name=”submitter” value=”Submit Comment” /></p></div>
<div id="crayon-52a80809243c3891220618-21">
   <p><input type=”hidden” name=”task” value=”addComments” /></p></div>
<div id="crayon-52a80809243c3891220618-22">
</form></div>
</td></tr>
</tbody></table>
</div>
</div>
<h3 style="background-color: white; color: #333333; font-family: 'Droid Sans'; font-size: 16px; font-weight: 200; letter-spacing: -0.1px; line-height: 20px; margin-top: 0px; padding: 0px; text-align: justify;">
Javascript Code</h3>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
<code style="font-family: monospace, monospace; font-size: 1em; white-space: pre-wrap; word-wrap: break-word;">$("#formcomment").submit()</code> – formcomment is the ID of the FORM tag. If user submit the form, the data posted to <code style="font-family: monospace, monospace; font-size: 1em; white-space: pre-wrap; word-wrap: break-word;">ajax.php</code> without refreshing the page(thanks to jQuery for the JS library) and result or response data is appended to commentpost class.</div>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
In here we’re using <code style="font-family: monospace, monospace; font-size: 1em; white-space: pre-wrap; word-wrap: break-word;">$.post()</code> jquery API, it Load data from the server using a HTTP POST request.</div>
<div data-settings=" minimize scroll-mouseover" id="crayon-52a80809243d0204430601" style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; text-align: justify;">
<div data-settings=" show">
<a href="http://websiteat100.com/blog/category/jquery/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Javascript blog by websiteat100.com">JavaScript</a></div>
<div>
</div>
<div>
<table style="border-collapse: collapse; border-spacing: 0px;"><tbody>
<tr><td data-settings="show" style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div data-line="crayon-52a80809243d0204430601-1">
1</div>
<div data-line="crayon-52a80809243d0204430601-2">
2</div>
<div data-line="crayon-52a80809243d0204430601-3">
3</div>
<div data-line="crayon-52a80809243d0204430601-4">
4</div>
<div data-line="crayon-52a80809243d0204430601-5">
5</div>
<div data-line="crayon-52a80809243d0204430601-6">
6</div>
<div data-line="crayon-52a80809243d0204430601-7">
7</div>
<div data-line="crayon-52a80809243d0204430601-8">
8</div>
<div data-line="crayon-52a80809243d0204430601-9">
9</div>
<div data-line="crayon-52a80809243d0204430601-10">
10</div>
<div data-line="crayon-52a80809243d0204430601-11">
11</div>
<div data-line="crayon-52a80809243d0204430601-12">
12</div>
<div data-line="crayon-52a80809243d0204430601-13">
13</div>
<div data-line="crayon-52a80809243d0204430601-14">
14</div>
<div data-line="crayon-52a80809243d0204430601-15">
15</div>
<div data-line="crayon-52a80809243d0204430601-16">
16</div>
<div data-line="crayon-52a80809243d0204430601-17">
17</div>
<div data-line="crayon-52a80809243d0204430601-18">
18</div>
<div data-line="crayon-52a80809243d0204430601-19">
19</div>
<div data-line="crayon-52a80809243d0204430601-20">
20</div>
<div data-line="crayon-52a80809243d0204430601-21">
21</div>
<div data-line="crayon-52a80809243d0204430601-22">
22</div>
<div data-line="crayon-52a80809243d0204430601-23">
23</div>
<div data-line="crayon-52a80809243d0204430601-24">
24</div>
<div data-line="crayon-52a80809243d0204430601-25">
25</div>
<div data-line="crayon-52a80809243d0204430601-26">
26</div>
<div data-line="crayon-52a80809243d0204430601-27">
27</div>
<div data-line="crayon-52a80809243d0204430601-28">
28</div>
<div data-line="crayon-52a80809243d0204430601-29">
29</div>
<div data-line="crayon-52a80809243d0204430601-30">
30</div>
<div data-line="crayon-52a80809243d0204430601-31">
31</div>
<div data-line="crayon-52a80809243d0204430601-32">
32</div>
<div data-line="crayon-52a80809243d0204430601-33">
33</div>
<div data-line="crayon-52a80809243d0204430601-34">
34</div>
<div data-line="crayon-52a80809243d0204430601-35">
35</div>
<div data-line="crayon-52a80809243d0204430601-36">
36</div>
<div data-line="crayon-52a80809243d0204430601-37">
37</div>
<div data-line="crayon-52a80809243d0204430601-38">
38</div>
</td><td style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div id="crayon-52a80809243d0204430601-1">
<script type=”text/javascript”></div>
<div id="crayon-52a80809243d0204430601-2">
jQuery(document).ready(function($){</div>
<div id="crayon-52a80809243d0204430601-3">
    $(“#formcomment”).submit(function(){</div>
<div id="crayon-52a80809243d0204430601-4">
        ctask = this.task.value;</div>
<div id="crayon-52a80809243d0204430601-5">
        cname = this.name.value;</div>
<div id="crayon-52a80809243d0204430601-6">
        cemail = this.email.value;</div>
<div id="crayon-52a80809243d0204430601-7">
        curl = this.url.value;</div>
<div id="crayon-52a80809243d0204430601-8">
        cmessage = this.message.value;</div>
<div id="crayon-52a80809243d0204430601-9">
        submitter = this.submitter;</div>
<div id="crayon-52a80809243d0204430601-10">
</div>
<div id="crayon-52a80809243d0204430601-11">
        // you can use PHP for double validation</div>
<div id="crayon-52a80809243d0204430601-12">
        if( cname==”" || cemail==”" || cmessage==”" )</div>
<div id="crayon-52a80809243d0204430601-13">
            $(“#errAll”).html(‘<p>Invalid Captcha. Please try again.</p>’);</div>
<div id="crayon-52a80809243d0204430601-14">
</div>
<div id="crayon-52a80809243d0204430601-15">
        var data = {</div>
<div id="crayon-52a80809243d0204430601-16">
            task: ctask,</div>
<div id="crayon-52a80809243d0204430601-17">
            name: cname,</div>
<div id="crayon-52a80809243d0204430601-18">
            email: cemail,</div>
<div id="crayon-52a80809243d0204430601-19">
            url: curl,</div>
<div id="crayon-52a80809243d0204430601-20">
            message: cmessage</div>
<div id="crayon-52a80809243d0204430601-21">
        };</div>
<div id="crayon-52a80809243d0204430601-22">
        $.post(“ajax.php”, data, function( response ) {</div>
<div id="crayon-52a80809243d0204430601-23">
            if( ’0′ == response ) {</div>
<div id="crayon-52a80809243d0204430601-24">
                $(“#errAll”).html(‘<p>Please don\’t leave the requierd fields.</p>’);</div>
<div id="crayon-52a80809243d0204430601-25">
            } else if( ’1′ == response ) {</div>
<div id="crayon-52a80809243d0204430601-26">
                $(“#errAll”).html(‘<p>Invalid Email Address, Please try again.</p>’);</div>
<div id="crayon-52a80809243d0204430601-27">
            } else {</div>
<div id="crayon-52a80809243d0204430601-28">
                submitter.value=”Comment posted”;</div>
<div id="crayon-52a80809243d0204430601-29">
                submitter.disabled=true;</div>
<div id="crayon-52a80809243d0204430601-30">
                $(response).appendTo($(“.commentpost”));</div>
<div id="crayon-52a80809243d0204430601-31">
            }</div>
<div id="crayon-52a80809243d0204430601-32">
        });</div>
<div id="crayon-52a80809243d0204430601-33">
</div>
<div id="crayon-52a80809243d0204430601-34">
        return false;</div>
<div id="crayon-52a80809243d0204430601-35">
</div>
<div id="crayon-52a80809243d0204430601-36">
    });</div>
<div id="crayon-52a80809243d0204430601-37">
});</div>
<div id="crayon-52a80809243d0204430601-38">
</script></div>
</td></tr>
</tbody></table>
</div>
</div>
<h3 style="background-color: white; color: #333333; font-family: 'Droid Sans'; font-size: 16px; font-weight: 200; letter-spacing: -0.1px; line-height: 20px; margin-top: 0px; padding: 0px; text-align: justify;">
ajax.php</h3>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
This contains <a href="http://websiteat100.com/blog/category/php/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Php blog by websiteat100.com">PHP </a>codes that construct the submitted data and MySQL code to insert data to <strong style="line-height: inherit;">tbl_comment</strong> table.</div>
<div data-settings=" minimize scroll-mouseover" id="crayon-52a80809243d6238635925" style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; text-align: justify;">
<div data-settings=" show">
PHP</div>
<div>
</div>
<div>
<table style="border-collapse: collapse; border-spacing: 0px;"><tbody>
<tr><td data-settings="show" style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div data-line="crayon-52a80809243d6238635925-1">
1</div>
<div data-line="crayon-52a80809243d6238635925-2">
2</div>
<div data-line="crayon-52a80809243d6238635925-3">
3</div>
<div data-line="crayon-52a80809243d6238635925-4">
4</div>
<div data-line="crayon-52a80809243d6238635925-5">
5</div>
<div data-line="crayon-52a80809243d6238635925-6">
6</div>
<div data-line="crayon-52a80809243d6238635925-7">
7</div>
<div data-line="crayon-52a80809243d6238635925-8">
8</div>
<div data-line="crayon-52a80809243d6238635925-9">
9</div>
<div data-line="crayon-52a80809243d6238635925-10">
10</div>
<div data-line="crayon-52a80809243d6238635925-11">
11</div>
<div data-line="crayon-52a80809243d6238635925-12">
12</div>
<div data-line="crayon-52a80809243d6238635925-13">
13</div>
<div data-line="crayon-52a80809243d6238635925-14">
14</div>
<div data-line="crayon-52a80809243d6238635925-15">
15</div>
<div data-line="crayon-52a80809243d6238635925-16">
16</div>
<div data-line="crayon-52a80809243d6238635925-17">
17</div>
<div data-line="crayon-52a80809243d6238635925-18">
18</div>
<div data-line="crayon-52a80809243d6238635925-19">
19</div>
<div data-line="crayon-52a80809243d6238635925-20">
20</div>
<div data-line="crayon-52a80809243d6238635925-21">
21</div>
<div data-line="crayon-52a80809243d6238635925-22">
22</div>
<div data-line="crayon-52a80809243d6238635925-23">
23</div>
<div data-line="crayon-52a80809243d6238635925-24">
24</div>
<div data-line="crayon-52a80809243d6238635925-25">
25</div>
<div data-line="crayon-52a80809243d6238635925-26">
26</div>
<div data-line="crayon-52a80809243d6238635925-27">
27</div>
<div data-line="crayon-52a80809243d6238635925-28">
28</div>
<div data-line="crayon-52a80809243d6238635925-29">
29</div>
<div data-line="crayon-52a80809243d6238635925-30">
30</div>
<div data-line="crayon-52a80809243d6238635925-31">
31</div>
<div data-line="crayon-52a80809243d6238635925-32">
32</div>
<div data-line="crayon-52a80809243d6238635925-33">
33</div>
<div data-line="crayon-52a80809243d6238635925-34">
34</div>
<div data-line="crayon-52a80809243d6238635925-35">
35</div>
</td><td style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div id="crayon-52a80809243d6238635925-1">
<?php</div>
<div id="crayon-52a80809243d6238635925-2">
// include config.php file, this contains our DB connection</div>
<div id="crayon-52a80809243d6238635925-3">
include_once( ‘config.php’ );</div>
<div id="crayon-52a80809243d6238635925-4">
</div>
<div id="crayon-52a80809243d6238635925-5">
if( isset($_POST['task']) && ‘addComments’ == $_POST['task'] )</div>
<div id="crayon-52a80809243d6238635925-6">
{</div>
<div id="crayon-52a80809243d6238635925-7">
    $name = addslashes(trim($_POST['name']));</div>
<div id="crayon-52a80809243d6238635925-8">
    $email = addslashes(trim($_POST['email']));</div>
<div id="crayon-52a80809243d6238635925-9">
    $url = addslashes(trim($_POST['url']));</div>
<div id="crayon-52a80809243d6238635925-10">
    $comment = htmlentities(addslashes(trim($_POST['message'])));</div>
<div id="crayon-52a80809243d6238635925-11">
    $date = date(‘F j, Y’);</div>
<div id="crayon-52a80809243d6238635925-12">
</div>
<div id="crayon-52a80809243d6238635925-13">
    if ($name == “” || $email == “” || $url == “” || $comment == “”) {</div>
<div id="crayon-52a80809243d6238635925-14">
        echo ’0′;</div>
<div id="crayon-52a80809243d6238635925-15">
    } else if(!filter_var($email, FILTER_VALIDATE_EMAIL)){</div>
<div id="crayon-52a80809243d6238635925-16">
        echo ’1′;</div>
<div id="crayon-52a80809243d6238635925-17">
    } else {</div>
<div id="crayon-52a80809243d6238635925-18">
        $sql=mysql_query(“INSERT INTO tbl_comment(name, email, url, message, date_posted) VALUES (‘$name’, ‘$email’, ‘$url’, ‘$comment’, ‘$date’)”);</div>
<div id="crayon-52a80809243d6238635925-19">
        if($sql) {</div>
<div id="crayon-52a80809243d6238635925-20">
        echo ‘</div>
<div id="crayon-52a80809243d6238635925-21">
            <div></div>
<div id="crayon-52a80809243d6238635925-22">
                <div>’.$name.’ </div></div>
<div id="crayon-52a80809243d6238635925-23">
                    <div></div>
<div id="crayon-52a80809243d6238635925-24">
                        <p></div>
<div id="crayon-52a80809243d6238635925-25">
                            ’. $comment .’</div>
<div id="crayon-52a80809243d6238635925-26">
                        </p></div>
<div id="crayon-52a80809243d6238635925-27">
                    </div></div>
<div id="crayon-52a80809243d6238635925-28">
                <div>’. $date .’</div></div>
<div id="crayon-52a80809243d6238635925-29">
            </div></div>
<div id="crayon-52a80809243d6238635925-30">
        ’;</div>
<div id="crayon-52a80809243d6238635925-31">
        }</div>
<div id="crayon-52a80809243d6238635925-32">
    }</div>
<div id="crayon-52a80809243d6238635925-33">
</div>
<div id="crayon-52a80809243d6238635925-34">
}</div>
<div id="crayon-52a80809243d6238635925-35">
?></div>
</td></tr>
</tbody></table>
</div>
</div>
<h3 style="background-color: white; color: #333333; font-family: 'Droid Sans'; font-size: 16px; font-weight: 200; letter-spacing: -0.1px; line-height: 20px; margin-top: 0px; padding: 0px; text-align: justify;">
Database</h3>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
You can do this easily using <a href="http://websiteat100.com/blog/category/php/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Php blog by websiteat100.com">PHP</a>MyAdmin, or you can use the code below and execute commands in MySQL Console.</div>
<div data-settings=" minimize scroll-mouseover" id="crayon-52a80809243dc635466036" style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; text-align: justify;">
<div data-settings=" show">
MySQL</div>
<div>
</div>
<div>
<table style="border-collapse: collapse; border-spacing: 0px;"><tbody>
<tr><td data-settings="show" style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div data-line="crayon-52a80809243dc635466036-1">
1</div>
<div data-line="crayon-52a80809243dc635466036-2">
2</div>
<div data-line="crayon-52a80809243dc635466036-3">
3</div>
<div data-line="crayon-52a80809243dc635466036-4">
4</div>
<div data-line="crayon-52a80809243dc635466036-5">
5</div>
<div data-line="crayon-52a80809243dc635466036-6">
6</div>
<div data-line="crayon-52a80809243dc635466036-7">
7</div>
<div data-line="crayon-52a80809243dc635466036-8">
8</div>
<div data-line="crayon-52a80809243dc635466036-9">
9</div>
<div data-line="crayon-52a80809243dc635466036-10">
10</div>
</td><td style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div id="crayon-52a80809243dc635466036-1">
CREATE TABLE IF NOT EXISTS ‘tbl_comment’ (</div>
<div id="crayon-52a80809243dc635466036-2">
  ’id’ INT(11) NOT NULL AUTO_INCREMENT,</div>
<div id="crayon-52a80809243dc635466036-3">
  ’name’ VARCHAR(225) NOT NULL,</div>
<div id="crayon-52a80809243dc635466036-4">
  ’email’ VARCHAR(225) NOT NULL,</div>
<div id="crayon-52a80809243dc635466036-5">
  ’url’ VARCHAR(225) NOT NULL,</div>
<div id="crayon-52a80809243dc635466036-6">
  ’message’ TEXT NOT NULL,</div>
<div id="crayon-52a80809243dc635466036-7">
  ’date_posted’ VARCHAR(225) NOT NULL,</div>
<div id="crayon-52a80809243dc635466036-8">
  PRIMARY KEY (‘id’),</div>
<div id="crayon-52a80809243dc635466036-9">
  UNIQUE KEY ‘email’ (‘email’)</div>
<div id="crayon-52a80809243dc635466036-10">
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=2 ;</div>
</td></tr>
</tbody></table>
</div>
</div>
<h3 style="background-color: white; color: #333333; font-family: 'Droid Sans'; font-size: 16px; font-weight: 200; letter-spacing: -0.1px; line-height: 20px; margin-top: 0px; padding: 0px; text-align: justify;">
config.php</h3>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
This contains <a href="http://websiteat100.com/blog/category/php/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Php blog by websiteat100.com">PHP </a>database configuration file.</div>
<div data-settings=" minimize scroll-mouseover" id="crayon-52a80809243e1953202983" style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; text-align: justify;">
<div data-settings=" show">
PHP</div>
<div>
</div>
<div>
<table style="border-collapse: collapse; border-spacing: 0px;"><tbody>
<tr><td data-settings="show" style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div data-line="crayon-52a80809243e1953202983-1">
1</div>
<div data-line="crayon-52a80809243e1953202983-2">
2</div>
<div data-line="crayon-52a80809243e1953202983-3">
3</div>
<div data-line="crayon-52a80809243e1953202983-4">
4</div>
<div data-line="crayon-52a80809243e1953202983-5">
5</div>
<div data-line="crayon-52a80809243e1953202983-6">
6</div>
<div data-line="crayon-52a80809243e1953202983-7">
7</div>
<div data-line="crayon-52a80809243e1953202983-8">
8</div>
<div data-line="crayon-52a80809243e1953202983-9">
9</div>
</td><td style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div id="crayon-52a80809243e1953202983-1">
<?php</div>
<div id="crayon-52a80809243e1953202983-2">
$host=’HOSTNAME’;</div>
<div id="crayon-52a80809243e1953202983-3">
$user=’USERNAME’;</div>
<div id="crayon-52a80809243e1953202983-4">
$pass=’PASSWORD’;</div>
<div id="crayon-52a80809243e1953202983-5">
$db=’DATABASE’;</div>
<div id="crayon-52a80809243e1953202983-6">
</div>
<div id="crayon-52a80809243e1953202983-7">
$con = mysql_connect($host, $user, $pass) or die(mysql_error() . ‘Oops! there is a problem connecting to database’);</div>
<div id="crayon-52a80809243e1953202983-8">
mysql_select_db($db, $con) or die(‘Error selecting database ‘. mysql_error());</div>
<div id="crayon-52a80809243e1953202983-9">
?></div>
</td></tr>
</tbody></table>
</div>
</div>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
That’s it, hope your find this tutorial helpful, for your feedback you can add comment below.</div>
</div>

PHP AND MYSQL COMMENT FORM WITHOUT REFRESHING PAGE WITH JQUERY

In this tutorial I’ll show you how to create an advance comment form in PHP and MySQL with jQuery without refreshing page in just a ...

WORDPRESS ADMIN AJAX REQUEST ALWAYS RETURN 0 EVEN WITH DIE()

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
<a href="http://websiteat100.com/blog/category/wordpress/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Wordpress blog by websiteat100.com">WordPress </a>offers a great way for theme and plugin developers to add functionality using AJAX and with the use of their API your theme and plugin works smoothly but wait what this AJAX mean? <abbr style="border-bottom-style: dotted; border-bottom-width: 1px; color: #222222; cursor: help; font-size: 11px;" title="Asynchronous JavaScript and XML">AJAX</abbr> is stands for <strong style="line-height: inherit;">Asynchronous <a href="http://websiteat100.com/blog/category/jquery/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Javascript blog by websiteat100.com">JavaScript</a>and XML</strong> and AJAX is not a new programming language, but a new way to use existing standards, okay so much for that.</div>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
So you’re working in <a href="http://websiteat100.com/blog/category/wordpress/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Wordpress blog by websiteat100.com">Worpress </a>AJAX huh? Last week I’m working on my plugin and I’m using AJAX on it, all fine the code, the callback function, everything and I began to scratch my head, why I only got zero response? Luck for you mate I will share you the fix.</div>
<h3 style="background-color: white; color: #333333; font-family: 'Droid Sans'; font-size: 16px; font-weight: 200; letter-spacing: -0.1px; line-height: 20px; margin-top: 0px; padding: 0px; text-align: justify;">
Solution 1:</h3>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
Make sure that you’re calling the action properly in your <a href="http://websiteat100.com/blog/category/php/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Php blog by websiteat100.com">PHP </a>file, a sample action declaration inside in your <a href="http://websiteat100.com/blog/category/jquery/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Js blog by websiteat100.com">JS </a>file.</div>
<h3 style="background-color: white; color: #333333; font-family: 'Droid Sans'; font-size: 16px; font-weight: 200; letter-spacing: -0.1px; line-height: 20px; margin-top: 0px; padding: 0px; text-align: justify;">
JS File</h3>
<div data-settings=" minimize scroll-mouseover" id="crayon-52a56a62bf4e8524779354" style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; text-align: justify;">
<table style="border-collapse: collapse; border-spacing: 0px;"><tbody>
<tr><td data-settings="show" style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div data-line="crayon-52a56a62bf4e8524779354-1">
1</div>
<div data-line="crayon-52a56a62bf4e8524779354-2">
2</div>
<div data-line="crayon-52a56a62bf4e8524779354-3">
3</div>
<div data-line="crayon-52a56a62bf4e8524779354-4">
4</div>
<div data-line="crayon-52a56a62bf4e8524779354-5">
5</div>
<div data-line="crayon-52a56a62bf4e8524779354-6">
6</div>
<div data-line="crayon-52a56a62bf4e8524779354-7">
7</div>
<div data-line="crayon-52a56a62bf4e8524779354-8">
8</div>
<div data-line="crayon-52a56a62bf4e8524779354-9">
9</div>
</td><td style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div id="crayon-52a56a62bf4e8524779354-1">
Function …(){</div>
<div id="crayon-52a56a62bf4e8524779354-2">
            var data = {</div>
<div id="crayon-52a56a62bf4e8524779354-3">
                action: ‘ACTION’,</div>
<div id="crayon-52a56a62bf4e8524779354-4">
                field_name: “value”</div>
<div id="crayon-52a56a62bf4e8524779354-5">
            };</div>
<div id="crayon-52a56a62bf4e8524779354-6">
            jQuery.post(ajaxurl, data, function(response) {</div>
<div id="crayon-52a56a62bf4e8524779354-7">
               alert(response);</div>
<div id="crayon-52a56a62bf4e8524779354-8">
            });</div>
<div id="crayon-52a56a62bf4e8524779354-9">
        }</div>
</td></tr>
</tbody></table>
</div>
<h3 style="background-color: white; color: #333333; font-family: 'Droid Sans'; font-size: 16px; font-weight: 200; letter-spacing: -0.1px; line-height: 20px; margin-top: 0px; padding: 0px; text-align: justify;">
<a href="http://websiteat100.com/blog/category/php/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Php blog by websiteat100.com">PHP </a>File</h3>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
To add the action please see below, notice the word ACTION after <code style="font-family: monospace, monospace; font-size: 1em; white-space: pre-wrap; word-wrap: break-word;">wp_ajax_</code> and<code style="font-family: monospace, monospace; font-size: 1em; white-space: pre-wrap; word-wrap: break-word;">wp_ajax_nopriv</code></div>
<div data-settings=" minimize scroll-mouseover" id="crayon-52a56a62bf4f2574215292" style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; text-align: justify;">
<div data-settings=" show">
PHP</div>
<div>
</div>
<div>
<table style="border-collapse: collapse; border-spacing: 0px;"><tbody>
<tr><td data-settings="show" style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div data-line="crayon-52a56a62bf4f2574215292-1">
1</div>
<div data-line="crayon-52a56a62bf4f2574215292-2">
2</div>
</td><td style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div id="crayon-52a56a62bf4f2574215292-1">
add_action( ‘wp_ajax_ACTION’, ‘your_callback_function’ );</div>
<div id="crayon-52a56a62bf4f2574215292-2">
add_action( ‘wp_ajax_nopriv_ACTION’, ‘your_callback_function’ );</div>
</td></tr>
</tbody></table>
</div>
</div>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
That mean we allow with privilege or no privilege users.</div>
<h3 style="background-color: white; color: #333333; font-family: 'Droid Sans'; font-size: 16px; font-weight: 200; letter-spacing: -0.1px; line-height: 20px; margin-top: 0px; padding: 0px; text-align: justify;">
Solution 2:</h3>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
This is the most common mistakes ever; please don’t forgot to include the <a href="http://websiteat100.com/blog/category/php/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Php blog by websiteat100.com">PHP </a>file in your plugin or theme init <img alt=";)" src="http://www.sutanaryan.com/wp-includes/images/smilies/icon_wink.gif" style="border: 0px; height: auto; margin: 0px; max-width: 100%; vertical-align: middle;" title="" /></div>
</div>

WORDPRESS ADMIN AJAX REQUEST ALWAYS RETURN 0 EVEN WITH DIE()

WordPress offers a great way for theme and plugin developers to add functionality using AJAX and with the use of their API your theme and...