Feb
19

jQuery UI Rename Tabs

I found myself in the position of needing jQuery UI’s tabs plugin to have the option of being renamed while still maintaining the tab. I came up with this function to easily rename a tab by passing the tab’s id selector and desired value.

function renameTab(selector, value)
{
	$('a[href="' + selector + '"').text(value);
}

Keep in mind you should be using jQuery UI’s example of adding tabs template

<div id="tabs">
	<ul>
		<li><a href="#tab-1">Tab 1</a></li>
		<li><a href="#tab-2">Tab 2</a></li>
	</ul>
</div>

This will work even if you are calling the href to load remote content via AJAX since the tabs use a unique identifier for those (i.e. #ui-tabs-1, #ui-tabs-2, etc.).

Simply rename “Tab 1″ to “Tab 1337″

renameTab("#tab-1", "Tab 1337");

Any questions/insight feel free to reply.

Nov
17

Move Row Up/Down with MySQL/PHP

Want to move rows with a click of a link and not have to worry about text boxes with position ID’s in them? Use this script/query to achieve this. Basically the idea is to have in your items table where it contains all the records you potentially want to move. In that table add a column named “position” with a unique integer for each new item you insert (do this by using a MAX(position) query when inserting the new item. It is imperative you have this unique integer or your results will not be fluid. Once that’s done copy and paste the following code to your website, filling in the proper variables indicated in the code. My method takes the previous (or next) record found from the current record (depending on whether you want to move it up/down, and swaps the position columns with each other. Then all you need to do for your table listing is “ORDER BY position” to have your items neatly sorted based on user or administrative preference.

// Variables -- Fill these out from the results of your page. (i.e. what item id to move up or down)
$id_item = 1;	// ID of item you want to move up/down
$isUp = true;	// Change to false if you want to move item down
 
// MySQL structure -- Fill these out to execute your queries without needing to update my code
$table_name = "tbl_items";	// Name of table with your items in it
$col_position = "position";	// Name of column with position ID (Remember, this must be UNIQUE to all items)
$col_id = "";			// Name of column containing the items id (most likely the auto_incremented column)
 
if ($isUp)
{
	$operator = "<";
	$order = "DESC";
}
else
{
	$operator = ">";
	$order = "ASC";
}
 
// Get row we are moving
$request = mysql_query("
	SELECT '.$col_position.', '.$col_id.' FROM '.$table_name.'
	WHERE '.$col_id.' = '.$id_item.'
	LIMIT 1");
 
// Save data for row we are moving
if(mysql_num_rows($request) > 0)  {
	$isPos1 = true;
	while($row = mysql_fetch_assoc($request)) {
		$position1 = $row[$col_position];
		$id_category1 = $row[$col_id];
	}
}
 
// Get row we want to swap with
$request2 =  mysql_query("
	SELECT '.$col_position.', '.$col_id.' FROM '.$table_name.'
	WHERE '.$col_position.' '.$operator.' '.$position1.'
	ORDER BY '.$col_position.' '.$order.' LIMIT 1");
 
// Save data from row we want to swap with
if(mysql_num_rows($request2) > 0)  {
	$isPos2 = true;
	while($row = mysql_fetch_assoc($request2)) {
		$position2 = $row[$col_position];
		$id_category2 = $row[$col_id];
	}
}
 
// If both rows exist (indicating not top or bottom row), continue
if ($isPos1 && $isPos2)
{
	$query_update = mysql_query("
		UPDATE '.$table_name.'
		SET '.$col_position.' = '.$position2.'
		WHERE '.$col_id.' = '.$id_item1.'");
 
	$query_update2 = mysql_query("
		UPDATE '.$table_name.'
		SET '.$col_position.' = '.$position1.'
		WHERE '.$col_id.' = '.$id_item2.'");
}

Any questions or issues with this method please reply.

Oct
28

Category Hierarchy into Select Box

For those interested in implementing a list of category items into a select box, here is a simple method for doing so. This will require only 1 query (assuming you store the category id and the parent id in the table).

Organize your categories into a set of arrays

function OrganizeCategories()
{
	$refs = array();
	$list = array();
 
	$sql = mysql_query("SELECT id_category, id_parent, name FROM tbl_categories	ORDER BY name");
 
	if(mysql_num_rows($sql) > 0)  {
		while($row = mysql_fetch_assoc($sql)) {
			$thisref = &$refs[ $row['id_category'] ];
 
			$thisref['parent_id'] = $row['id_parent'];
			$thisref['name'] = $row['name'];
 
			if ($row['id_parent'] == 0) {
				$list[ $row['id_category'] ] = &$thisref;
			} else {
				$refs[ $row['id_parent'] ]['children'][ $row['id_category'] ] = &$thisref;
			}
		}
	}
 
	return $list;
}

Create the option values from the organizational array

function toSelect($list, $count = 0){
 
  $html = "";
  $count += 2;
  $spacers = "";
 
  for ($i = 0; $i < $count - 2; $i++)
  {
	$spacers .= '=';
  }
 
  if (!empty($spacers))
  {
	$spacers .= '&gt;';
  }
 
  foreach ($arr as $k => $v){
    $html .= '<option>' . $spacers .' ' . $v['name'];
    if (array_key_exists('children', $v)){
      $html .= toSelect($v['children'], $count);
    }
    $html .= '</option>'.PHP_EOL;
  }
 
  return $html;
}

Sample PHP code using the previous functions

$categories = OrganizeCategories();
$options = toSelect($categories);
 
echo '<select name="cat">'.$options.'</select>';

Assuming we have a full database of categories, it will output something like this

Mar
24

Get return value from Invoke()

So you may wonder how to get a return value from a function that requires you to Invoke(). It’s actually quite simple. You’ll need another delegate type, here is an example of returning the key of a tabControls selected tab:

public string CurrentTabKey()
{
    if (tabControl.InvokeRequired)
    {
        return (string)tabControl.Invoke(
          new Func<String>(() => CurrentTabKey())
        );
    }
    else
    {
        return (string)tabControl.SelectedTab.Name;
    }
}

Feb
24

Add jQuery code to AJAX loaded content

You may have noticed you cannot pass jQuery functions to content loaded using AJAX technology simply. One way is to use the jQuery .live() event. This can be used with a number of handlers and events to automatically pass functions to dynamically loaded content. The example below shows how you can add fancybox to a dynamically loaded container with class name “fancify”.

1
2
3
4
5
6
7
8
9
10
11
$('.fancify').live('click', function(){ 				
	$(this).fancybox({
		'width'			: '40%',
		'height'		: '70%',
		'autoScale'		: false,
		'transitionIn'		: 'none',
		'transitionOut'		: 'none',
		'type'			: 'iframe'
	}); 
	return false;
});

Feb
23

Open links in default browser from WebBrowser control

If your looking to use C#’s web browser control but don’t want links to open in the same browser control (i.e. open them in a real browser like Chrome or Firefox), simply change the navigating handler to process the URL and fire the link in the diagnostics (which will open the URL in the user’s default browser). Here is what I used.

private void browser_Navigating(object sender, WebBrowserNavigatingEventArgs e)
{
     System.Diagnostics.Process.Start(e.Url.ToString());
     e.Cancel = true;
}

Feb
17

My Blog

My new blog. Mainly about programming tips and tricks I have used to create several projects.