Showing posts with label HTML. Show all posts
Showing posts with label HTML. Show all posts

Wednesday 10 August 2016

Using jQuery FormData to include files when making POST request

In this example I create a form, with a text, and file input field. When I submit the form, contents from all input fields are submitted through the 'FormData' class. The results from the called script are returned to a div. Finally, the fields are then cleared.
<html>
<head>
    <title>jQuery File Upload</title>
</head>
<body>
    <form action="upload.php" method="POST" enctype="multipart/form-data">
        <input type="text" name="myname" />
        <input type="file" name="fileinfo" multiple="" />
        <button type="submit">Submit</button>
    </form>
    <div id="result"></div>
    <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
    <script>  
    (function()
    {
        $('form').on('submit', function(e)
        {
            var theDiv = $('div#result');
            var thisForm = $(this);
            var action = thisForm.attr('action');
            var method = thisForm.attr('method');
            $.ajax(
            {
                url: action,
                type: method,
                data: new FormData(this),
                processData: false,
                contentType: false
            }).done(function(datareceived)
            {
                thisForm.find('input, textarea').val('');
                theDiv.html(datareceived);
            });
            e.preventDefault();
        });
    })();
    </script>
</body>
</html>

To test if it works I use upload.php. See
<?php
$str = NULL;
foreach($_FILES as $file)
{
    if(move_uploaded_file($file['tmp_name'], $file['name']) == FALSE)
    {
        $str .= $file['name'].' not uploaded<br />';
    }
}
$str .= '<br />POST items include : <br />';
foreach($_POST as $postitem => $value)
{
    $str .= 'Name : '.$postitem.' Value : '.$value.'<br />';
}
echo $str;
?>

Thursday 19 February 2015

jQuery plugin to receive GET parameters and add them to an element

Below is my simple page. What I'd like to do, as you can see from the code in red is to call a jQuery plugin. The plugin find the message parameter sent to a page and apply its value to the #message div. So the call to the page would be something like this mypage.html?message=Hello+world
Then the words 'Hello world' would appear inside the div.

<!DOCTYPE html>
<html lang="en">
<head>  
<body>  
  <div class="id="message"></div>
  <script src="jquery/1.11.2/jquery.min.js"></script>
  <script src="js/receiveget.plugin.js"></script>
  <script>
  (function()
  {
    $('#message').receiveget('message');
  })();
  </script>
  </body>
</html>

So here is my receiveget.plugin.js
(function($)
{
    $.fn.extend(
    {
        receiveget:function(getvar)
        {
            var sPageURL = window.location.search.substring(1);
            var sURLVariables = sPageURL.split('&');
            for (var i = 0; i < sURLVariables.length; i++)
            {
                var sParameterName = sURLVariables[i].split('=');
                if (sParameterName[0] == getvar)
                {
                    $(this).text(decodeURIComponent(sParameterName[1].replace('+', ' ')));
                }
            }
        }
    });
})(jQuery);

Monday 14 April 2014

HTML Entities jQuery plugin for the code tag

Try presenting HTML in a web page. It's a pain in the neck. Even in between the code tag, you have to create HTML Entities for greater than and less than symbols etc.
Not wanting to go through that pain ever again, I have created a small JavaScript plugin which helps.
First, here is the HTML page important differences in red:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Convert to HTML Entities</title>  
  </head>
  <body>
    <code>Hello, <h1>world!</h1></code>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="htmlentities.plugin.js"></script>
    <script>
    (function()
    {
      $('code').htmlentities();
    })();
    </script>
  </body>
</html>
Now, htmlentities.plugin.js:
(function($)
{
  $.fn.htmlentities = function()
  {
 
    beforeString = $(this).html();  
    afterString = beforeString.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/'/g, '&#39;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
    $(this).html(afterString);
  }
})(jQuery);

Happy coding!

Thursday 1 August 2013

Heredoc in PHP to reduce a lot of echo calls

Heredoc is a way of building strings for output. Funnily enough I found there was a mistake in some of the coding on the Wikipedia page, but I won't hold that against them. Also, in some of the examples I've come across on the web, they don't seem to recognise an important feature of heredoc. That is, it also provides HTML output.

Below is some example PHP code with the correct syntax, use of variables and HTML. That should speed things up a bit.

<?php
$recipient = 'Mick';
$sender = 'Johnnie';
$x = <<<EOF
Dear $recipient,
I wish you to leave Sunnydale and never return.<br />
Not Quite Love,
$sender
EOF;
echo $x;
?>

Monday 15 April 2013

Create unordered lists from lines of text using Emmet in Sublime text 2


Designers and developers of web sites often find they're having to convert text into HTML at the micro level despite all the tools we have available. Here is just one example of how Sublime Text 2 with the Emmet plugin can help. You may have to use alternative keys for macs.
Let's say we have 10 lines of text that we want turning into a HTML unordered list. OK, with Emmet we can select all the lines and wrap them with <ul></ul> using ctrl+alt+enter and typing ul, then enter again.
What we don't want to do from here is have to select each line individually, then press ctrl+alt+enter and typing li, then enter again.
What we can do is select all the lines, then ctrl+shift+l to split the selection into lines, then press ctrl+alt+enter and typing li, then enter again.
As you can imagine, this technique is useful across other circumstances where we have the text, but need to turn it into HTML.

Monday 1 October 2012

Simple JSON retrieval through jQuery

This page explains how to retrieve some simple JSON data and append it to a page. First the JSON through a script called jsonout.php

{
  "one": "Singular sensation",
  "two": "Beady little eyes",
  "three": "Little birds pitch by my doorstep"
}


Now the HTML with jQuery to retrieve and display it within the page.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple JSON retrieval through jQuery</title>
<!--[if IE]>
 <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style>
body
{
font:10px/15px Sans-serif;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1"); 
</script>
</head>
<body>
<script>
(function()
{
$.getJSON('jsonout.php', function(data)
{
  $.each(data, function(key, val)
  {
    $('body').append('<p>'+key+':'+val+'</p>');
  });
});
})();
</script>
</body>
</html>

Monday 28 May 2012

Tabs using Twitter Bootstrap


I had been trying to search out a real world example of how tabs worked in Twitter Bootstrap and found that, by far, most examples missed some crucial elements. Below, I have supplied some code to paste into your Twitter Bootstrap site which you can play with.

<div class="row">
<div class="span16">
 <div class="tabbable" id="usernav">
 <ul class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
<li><a href="#jobs" data-toggle="tab">Jobs</a></li>
 </ul>
 <div class="tab-content">
<div class="tab-pane active" id="home">
This is my home content.
</div>
<div class="tab-pane" id="jobs">
This is the jobs section.
</div>
 </div>
</div>
</div>
</div>

Friday 17 June 2011

External web content in your page through the PHP Simple HTML DOM Parser

The excellent PHP Simple HTML DOM Parser, provides the opportunity to bring external content into your web pages.

Here is an example of taking the top news story from the BBC website.

See demo.


<?php
include'simple_html_dom.php';
$html = file_get_html('http://www.bbc.co.uk/news/uk/');
foreach($html->find('#top-story') as $e)
{
echo $e->innertext . '<br />';
}
?>

Monday 15 November 2010

HTML5 tags I am currently using

Why would I write this article?
It's just to give you a flavour of the HTML5 features I have found to be reliable and how I use them. There is a simple template below, but essentially they are <header></header>, <footer></footer>, <section></section>, <article> </article> and <aside></aside>.
Of course, you may be thinking, he's not using proper HTML5 html and meta tags. That's because the new ones are not currently accepted by the W3C Validators.

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>HTML5 example</title>
<style type="text/css">
body
{
 font-family:Sans-serif;
}
#mainPage, header, footer
{
 margin:0 auto;
 width:30.8em;
 *width:30em;
}
#leftContent
{
 float:left;
}
#rightContent
{
 float:right;
}
footer
{
 clear:both;
}
</style>
<!--[if IE]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
</head>
<body>
<header>
    <h1>My header</h1>
</header>
<section id="mainPage">
    <section id="leftContent">
        <article>Article 1</article>
        <article>Article 1</article>
    </section>
<aside id="rightContent">Content on the aside</aside>
</section>
<footer>Footer</footer>
</body>
</html>

Friday 1 October 2010

Send Form information to PHP through jQuery

"Why would I do this?", I hear you ask. The answer is simple, by sending information through jQuery you open yourself up to losing browser refresh and a better UI. There are 2 files in this example:
The HTML file, which also contains the jQuery.
The PHP file which would do the processing.

See demo.

Let's start with the HTML file.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery and PHP Form</title>
<style type="text/css">
html, body
{
 font-family:sans-serif;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
 google.load("jquery", "1");
 google.load("jqueryui", "1");
</script>
<script>
$(document).ready(function()
{
    $('#sendTheData').click(function()
    {
        $.post("sendThedata.php",
        {
            myValue:$('#lname').val()
        }, function(data)
        {
    alert(data);
        });
        return false;
    });
});
</script>
</head>
<body>
<form>
  <input type="text" name="lname" id="lname" /><br />
  <input type="submit" value="Submit" id="sendTheData" />
</form>
</body>
</html>


Now for the PHP file:

<?php
  echo 'Got '.$_POST['myValue'];
?>

Friday 13 August 2010

Simple vertical navigation

How many times have you wanted to start a website using a simple left hand vertical left hand navigation and then just build on it. Below is a template for doing just that. This time I have added a few comments even though the code is pretty self explanatory. To make this work on your own setup, you will also need to create subPage1.html, subPage2.html and subPage3.html, but other than that, you're away. You should need to download jQuery because it is being referenced from Google. There is a little CSS, just to, layout the tabs and show how the hover works.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tabbed Navigation</title>
<style type="text/css">
body
{
font-family:Sans-serif;
}
/* a holder for the entire page centred in the browser window */
#subSystem
{
margin:0 auto;
width:480px;
}
/* a container for the navigation with a border around 3 of the sides */
#subNav
{
float:left;
width:88px;
border-top:1px solid #CCCCCC;
border-bottom:1px solid #CCCCCC;
border-left:1px solid #CCCCCC;
}
/* properties of each menu item to make it look like a block of centred text */
#subNav a.subMenu
{
display:block;
text-decoration: none;
text-align:center;
width:80px;
height:40px;
padding-top:16px;
padding-left:4px;
padding-right:4px;
color:#000000;
}
/* the changes in appearance of a menu item when someone hovers over it */
#subNav a.subMenu:hover
{
background:#A3A3A3;
color:#FFFFFF;
}
/* the changes in appearance of a menu item when someone has selected it */
.menuSelected
{
background:#CCCCCC;
color:#FFFFFF;
}
/* a container for the page content */
#subContent
{
float:left;
width:380px;
min-height:380px;
height:380px;
border:1px solid #CCCCCC;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
$(document).ready(function()
{
/* when a menu item is clicked remove any items which were previously selected.
Change the property of the item clicked to selected.
Put whatever the hyperlink points to within the content container. */
$("a.subMenu").click(function()
{
$("a.subMenu").removeClass("menuSelected");
$(this).addClass("menuSelected");
$("#subContent").load($(this).attr("href"));
return false;
});
});
</script>
</head>
<body>
<div id="subSystem">
<div id="subNav">
<a href="subPage1.html" class="subMenu menuSelected">First</a>
<a href="subPage2.html" class="subMenu">Second</a>
<a href="subPage3.html" class="subMenu">Third</a>
</div>
<div id="subContent">
Hello World!
</div>
</div>
</body>
</html>