Web Programming: Ajax (Jquery)- PHP file handler

Just some tips that I found them very useful, hopefully you will feel the same way too.

1. How to call PHP from Ajax (using Jquery)

HTML code:

<div align="center" id="timeval">--:--:--</div>

Javascript code:

$('#timeval').load('ajaxTime.php?randval='+ Math.random());

ajaxTime.php

echo date("g:i:s A");

That’s it for part 1.

Thanks to: roshanbh.com.np

2. using Jquery remove()

Consider the following html:

<div>
  <div>Hello</div>
  <div>Goodbye</div>
</div>

We can target for removal:


$('.hello').remove();

This will result in a DOM structure with the <div> element deleted:

<div>
  <div>Goodbye</div>
</div>

We can also include a selector as an optional parameter. For example, we could rewrite the previous DOM removal code as follows:

$('div').remove('.hello');


*Removes all paragraphs that contain "Hello" from  the DOM

<script>

    $("button").click(function () {
      $("p").remove(":contains('Hello')");
    });

</script>

That’s it for part 2.

Thanks to: api.jquery.com

3. the power of bind (JQuery)

Here’s the definition:

bind(thisObj[, arg...]) -> Function

Wraps the function in another, locking its execution scope to an object specified by thisObj.

The code below is simply proof-of-concept:


var obj = {
  name: 'A nice demo',
  fx: function() {
    alert(this.name);
  }
};

window.name = 'I am such a beautiful window!';

function runFx(f) {
  f();
}

var fx2 = obj.fx.bind(obj);

runFx(obj.fx);
runFx(fx2);

Now, what few people realize is, bind can also be used to prepend arguments to the final argument list:


var obj = {
  name: 'A nice demo',
  fx: function() {
    alert(this.name + '\n' + $A(arguments).join(', '));
  }
};

var fx2 = obj.fx.bind(obj, 1, 2, 3);
fx2(4, 5); // Alerts the proper name, then "1, 2, 3, 4, 5"

That’s it for part 3.

Thanks to: prototypejs.org

4. The power of Serialize (PHP)

Definition:

Description

string serialize ( mixed $value )

Generates a storable representation of a value

This is useful for storing or passing PHP values around without losing their type and structure.

To make the serialized string into a PHP value again, use unserialize().

Taken from: php.net

The usage would be as follows:

<form method="post" action="path to script">
<input type="checkbox" id="colors[]" value="red" /> Red
<input type="checkbox" id="colors[]" value="blue" /> Blue
<input type="checkbox" id="colors[]" value="green" /> Green
<input type="checkbox" id="colors[]" value="yellow" /> Yellow
</form>

then the handler in PHP should be like,

$colors=serialize($_POST['colors']); //takes the data from a post operation...
$query=INSERT INTO colors VALUES('$colors'); 

And hence in the table database would be stored like,

a:3:{i:0;s:8:&quot;red&quot;;i:1;s:9:&quot;blue&quot;;i:2;s:6:&quot;green&quot;;i:3;s:4:&quot;yellow&quot;;}

Funky, ain’t it? But that’s not a problem: unserialize() to the rescue.

To retrieve the data from the database, you would do something like this,

$query=SELECT * FROM shirtColors;
$doQuery=mysql_query($query);
$numrows=mysql_num_rows($doQuery);
if($numrows>0)
{
 while($colors=mysql_fetch_array($doQuery))
  {
  $colors=unserialize($colors['colors']);
	
  foreach($colors as $shirt)
   {
	  print $shirt.', ';
   }
  }
}
else
{
 print 'No colors in database.';
}

That’s it for part 4.

Thanks to: evolt.org

5. Array_push (php)

Description

int array_push ( array &$array , mixed $var [, mixed $... ] )

array_push() treats array as a stack, and pushes the passed variables onto the end of array. The length of array increases by the number of variables pushed. Has the same effect as:

<?php
$array[] = $var;
?>

repeated for each var.

Note: If you use array_push() to add one element to the array it’s better to use $array[] = because in that way there is no overhead of calling a function.

Note: array_push() will raise a warning if the first argument is not an array. This differs from the $var[] behaviour where a new array is created.

Thanks to: php.net

That should be it for today. Thanks for reading this far.


		

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s