JavaScript - Insertafter, Insert Before

Hi,

I have a BMI calculator that records my height / weight and BMI and I can change it then it updates, I'd like to be able to add one for each day and show all in a loop

here is my current JavaScript:

Code:

/***
**** INSERT INTO TABLE ** 
***/
function prePopulate(){
	BMIDB.transaction(
	    function (transaction) {
		//Starter data when page is initialized
		var data = ['1','','14','0','0',''];  
		
		transaction.executeSql("INSERT INTO page_settings(id, fname, age, height, weight, gender, date) VALUES (?, ?, ?, ?, ?, ?, ?)", [data[0], data[1], data[2], data[3], data[4], data[5], data[6]]);
	    }
	);	
}



/***
**** UPDATE TABLE ** 
***/
function updateSetting(){
	BMIDB.transaction(
	    function (transaction) {
	    	if($('#fname').val() != '') {
	    		var fname = $('#fname').val();
	    	} else {
	    		var fname = '';
	    	}
			
			var age    = $('#age').val();
			var height  = $('#height').val();
			var weight   = $('#weight').val();
			var gender   = $('#gender').val();
			var date   = $('#date').val();
			
	    	
	    	transaction.executeSql("UPDATE page_settings SET fname=?, age=?, height=?, weight=?, gender=?, date=? WHERE id = 1", [fname, age, height, weight, gender, date]);
	    }
	);	
		selectAll();
}
function selectAll(){ 
	BMIDB.transaction(
	    function (transaction) {

	        transaction.executeSql("SELECT * FROM page_settings;", [], dataSelectHandler, errorHandler);
	        
	    }
	);	
}

function dataSelectHandler(transaction, results){

	// Handle the results
    for (var i=0; i<results.rows.length; i++) {
        
    	var row = results.rows.item(i);
    	
        var newFeature = new Object();
    	
    	newFeature.fname   = row['fname'];
        newFeature.age	   = row['age'];
        newFeature.height  = row['height'];
        newFeature.weight  = row['weight'];
        newFeature.gender  = row['gender'];
        newFeature.date  = row['date'];
        
        
        newFeature.height2 = newFeature.height / 100
  		newFeature.BMI = newFeature.weight  / (newFeature.height2 * newFeature.height2)
        
        BMI = newFeature.BMI;
		bmiresult = BMI.toFixed(3);
        
        $('body').css('font-family',newFeature.height);
        $('#content').html('<h4 id="your_weight">'+ newFeature.fname +' your BMI is: </h4><span>'+ bmiresult +'</span>');
        
        if(newFeature.fname != '') {
       		$('#greeting').html('Hi '+newFeature.fname+'!');
       		$('#fname').val(newFeature.fname);
        } 
        
       $('#height').val(newFeature.height);
       $('select#age').find('option[value='+newFeature.age+']').attr('selected','selected');  
       $('#weight').val(newFeature.weight);
       $('select#gender').find('option[value='+newFeature.gender+']').attr('selected','selected');

       
    }

}





/***
**** Save 'default' data into DB table **
***/

function saveAll(){
		prePopulate(1);
}


function errorHandler(transaction, error){
 	if (error.code==1){
 		// DB Table already exists
 	} else {
    	// Error is a human-readable string.
	    console.log('Oops.  Error was '+error.message+' (Code '+error.code+')');
 	}
    return false;
}


function nullDataHandler(){
	console.log("SQL Query Succeeded");
}

/***
**** SELECT DATA **
***/
function selectAll(){ 
	BMIDB.transaction(
	    function (transaction) {
	        transaction.executeSql("SELECT * FROM page_settings;", [], dataSelectHandler, errorHandler);
	    }
	);	
}

Hi all,

I use JS to dynamically generate HTML such as a <select> dropdown menu. I do it by placing an empty element where I want the dropdown to appear (i.e. <span id="dropdown"></span>) then getElementById('dropdown') and insert the HTML with innerHTML = html.

But I could also do it by getting the empty element and then doing an "insertBefore" or "appendChild" call.

Is one "preferred" over the other? Is one "better" than the other?

Thanks.

-- Roger

I am modifying a small online text editor.
I have a series of dynamically generated fields: sub0 sub1 sub2 etc.

I get stuck feeding the modified data back.
subX.selection.setContent() - where X is the field number.

how can I set X as a variable?

Hi guys! Hope you can help me out here -

I found a script for a fairly neat little image gallery recently, and have successfully inserted it into my existing web page. Only problem is, it doesn't display in the browser until every last image is loaded, so when you have 20+ images (as I've modified the gallery to have), it takes a while to load, and might cause users to think nothing is happening on slower connections.

So I'm basically just wondering if anyone could advise me on how to insert some code that would perhaps bring up a 'loading.gif' in its place until the gallery is loaded?

I had a bash last night, but am a bit of a newbie to coding etc. and nothing I was trying was working.

The code, which I shamelessly ripped from here, is as follows -

Code:

<html>
<head>
    <title>Lightweight Image Gallery</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta http-equiv="imagetoolbar" content="false">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <style media="screen,projection" type="text/css">

/* general styling for this example */
* { margin: 0; padding: 0; }
body { padding: 20px; }

/* begin gallery styling */
#jgal { list-style: none; width: 200px; }
#jgal li { opacity: .5; float: left; display: block; width: 60px; height: 60px; background-position: 50% 50%; cursor: pointer; border: 3px solid #fff; outline: 1px solid #ddd; margin-right: 14px; margin-bottom: 14px; }
#jgal li img { position: absolute; top: 20px; left: 220px; display: none; }
#jgal li.active img { display: block; }
#jgal li.active, #jgal li:hover { outline-color: #bbb; opacity: .99 /* safari bug */ }

/* styling without javascript */
#gallery { list-style: none; display: block; }
#gallery li { float: left; margin: 0 10px 10px 0; }

    </style>

    <!--[if lt IE 8]>
    <style media="screen,projection" type="text/css">
        #jgal li { filter: alpha(opacity=50); }
        #jgal li.active, #jgal li:hover { filter: alpha(opacity=100); }
    </style>
	<![endif]-->
    <script type="text/javascript">document.write("<style type='text/css'> #gallery { display: none; } </style>");</script>
    <!--[if lt IE 6]><style media="screen,projection" type="text/css">#gallery { display: block; }</style><![endif]-->
    <script type="text/javascript">
var gal = {
    init : function() {
        if (!document.getElementById || !document.createElement || !document.appendChild) return false;
        if (document.getElementById('gallery')) document.getElementById('gallery').id = 'jgal';
        var li = document.getElementById('jgal').getElementsByTagName('li');
        li[0].className = 'active';
        for (i=0; i<li.length; i++) {
            li[i].style.backgroundImage = 'url(' + li[i].getElementsByTagName('img')[0].src + ')';
            li[i].style.backgroundRepeat = 'no-repeat';
            li[i].title = li[i].getElementsByTagName('img')[0].alt;
            gal.addEvent(li[i],'click',function() {
                var im = document.getElementById('jgal').getElementsByTagName('li');
                for (j=0; j<im.length; j++) {
                    im[j].className = '';
                }
                this.className = 'active';
            });
        }
    },
    addEvent : function(obj, type, fn) {
        if (obj.addEventListener) {
            obj.addEventListener(type, fn, false);
        }
        else if (obj.attachEvent) {
            obj["e"+type+fn] = fn;
            obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
            obj.attachEvent("on"+type, obj[type+fn]);
        }
    }
}

gal.addEvent(window,'load', function() {
    gal.init();
});
    </script>
</head>
<body>
<ul id="gallery">
    <li><img src="images/je_1.jpg" alt="Josef &amp; Erika 1"></li>
    <li><img src="images/roland_ads_2.jpg" alt="Roland Ads"></li>
    <li><img src="images/cd_2.jpg" alt="CD Cover 2"></li>
    <li><img src="images/cd_1.jpg" alt="CD Cover 1"></li>
    <li><img src="images/je_3.jpg" alt="Josef &amp; Erika 3"></li>
    <li><img src="images/je_2.jpg" alt="Josef &amp; Erika 2"></li>
    <li><img src="images/lktrd_poster1.jpg" alt="LKTRD Poster"></li>
    <li><img src="images/je_4.jpg" alt="Josef &amp; Erika 4"></li>
    <li><img src="images/inside_1.jpg" alt="Inside Magazine"></li>
    <li><img src="images/oceanen_4.jpg" alt="Oceanen"></li>
</ul>

</body>
</html>

A working example in action can be seen here.

Like I say I had a bash last night, where I tried a few different google-found methods, but most resulted in the loading.gif either being visible all the time, or invisible all the time, pretty useless.

So, what do you guys reckon? Do-able? Any help will be very much appreciated! Thanks!

Hey I am looking for a better way of adding BBCode to a textarea.
Here's the code I use right now:

Code:

function insertext(text){
document.addnews.userpost.focus(); document.addnews.userpost.value=document.addnews.userpost.value +" "+ text;
document.addnews.userpost.focus()
}

This adds the BBCode tag to the end of the text in the textarea. How can I make it insert the tags where the the textarea cursor is? And if possible too could I make it so if you were to highlight something and press the bold tag button it would add the tags around that automatically?

Suppose I have the string 'ello'.
I want to insert the letter 'h' in the beginning of that string.

How do I do that without using a special function? I can only use the functions charAt and indexOf - anyone has any idea?

hello people, can anyone help me with this? i have div element and picture inside it, and that picture is created with php gd (<img src="file.php"). What i need is a function which create new image and place it in that div. I don't know how to create new image with javascript when i call php file with header content type image.

something like this??

function newImage(){
document.getElementById("foo").innerHtml = "<img src='file.php'/>";
}

but of course this doesn't work
so how to do that?

thnx

Hey guys,

I have a question about sending text to a textarea. What I want is, if I click on a button, a text has to be sent to my textarea, which I obtain from my mysql database. This last thing I can do myself, but I do not know how to send the text to my textarea.

I don't know nothing from AJAX yet, so I think it can be done with AJAX, but also with javascript I guess. Could someone point me in the right direction?

Thanks!

hi,

On my mobile app, the 2nd input box isn't working as it should?!

it's called weight1

can someone please help, here is my code:

Code:

<!doctype html>
<html>
    <head>
       
        <title>myBMI</title>
        <script type="text/javascript" charset="utf-8">
      var html5rocks = {};
      html5rocks.webdb = {};
      html5rocks.webdb.db = null;
      
      html5rocks.webdb.open = function() {
        var dbSize = 5 * 1024 * 1024; // 5MB
        html5rocks.webdb.db = openDatabase("Todo", "1.0", "Todo manager", dbSize);
      }
      
      html5rocks.webdb.createTable = function() {
        var db = html5rocks.webdb.db;
        db.transaction(function(tx) {
          tx.executeSql("CREATE TABLE IF NOT EXISTS bmical(ID INTEGER PRIMARY KEY ASC, height1 TEXT, weight1 TEXT, added_on DATETIME)", []);
        });
      }
      
      html5rocks.webdb.addTodo = function(todoText) {
        var db = html5rocks.webdb.db;
        db.transaction(function(tx){
          var weight1 = document.getElementById("weight1");
          var addedOn = new Date();
          tx.executeSql("INSERT INTO bmical(height1, weight1, added_on) VALUES (?,?,?)",
              [todoText, weight1, addedOn],
              html5rocks.webdb.onSuccess,
              html5rocks.webdb.onError);
         });
      }
      
      html5rocks.webdb.onError = function(tx, e) {
        alert("There has been an error: " + e.message);
      }
      
      html5rocks.webdb.onSuccess = function(tx, r) {
        // re-render the data.
        html5rocks.webdb.getAllTodoItems(loadTodoItems);
      }
      
      
      html5rocks.webdb.getAllTodoItems = function(renderFunc) {
        var db = html5rocks.webdb.db;
        db.transaction(function(tx) {
          tx.executeSql("SELECT * FROM bmical", [], renderFunc,
              html5rocks.webdb.onError);
        });
      }
      
      html5rocks.webdb.deleteTodo = function(id) {
        var db = html5rocks.webdb.db;
        db.transaction(function(tx){
          tx.executeSql("DELETE FROM bmical WHERE ID=?", [id],
              html5rocks.webdb.onSuccess,
              html5rocks.webdb.onError);
          });
      }
      
      function loadTodoItems(tx, rs) {
        var rowOutput = "";
        var todoItems = document.getElementById("todoItems");
        for (var i=0; i < rs.rows.length; i++) {
          rowOutput += renderTodo(rs.rows.item(i));
        }
      
        todoItems.innerHTML = rowOutput;
      }
      
      function renderTodo(row) {
        return "<li>" + row.height1  + row.weight1 + row.added_on + " [<a href='javascript:void(0);'  onclick='html5rocks.webdb.deleteTodo(" + row.ID +");'>Delete</a>]</li>";
      }
      
      function init() {
        html5rocks.webdb.open();
        html5rocks.webdb.createTable();
        html5rocks.webdb.getAllTodoItems(loadTodoItems);
      }
      
      function addTodo() {
        var height1 = document.getElementById("height1");
        html5rocks.webdb.addTodo(height1.value);
        height1.value = "";
      }
    </script>
</head>
<body onload="init();">
                <p>Please enter daily your stats below</p>
                <ul id="todoItems">
			    </ul>
			    <form type="post" onsubmit="addTodo(); return false;">
			    <ul class="individual">
			      <li><input type="text" class="submit" id="height1" name="height1" placeholder="Height" /></li>
			      <li><input type="text" class="submit" id="weight1" name="weight1" placeholder="Weight" /></li>
			    </ul>
			      <input type="submit" value="Add Todo Item"/>
			    </form>
        </body>
</html>

Hello, Below I have my Small form:

Code:

<p id="join_our_mailing_list">Join our mailing list</p>
			<form method="post" name="join" action="#" />
			<input type="text" class="input_text" name="join_us_email" id="join_us_email" />
			<input type="submit" value="submit" class="button join_us_button" />
			</form>

Then I have my JS to process this...

Code:

$(".join_us_button").click(function() {
			
		var email = $("#join_us_email").val();
		var dataString = 'join_us_email='+ email;

		if(email=='')
			{
				
				
				$('p#join_our_mailing_list').replaceWith("<p>Provide email</p>");
			}
		else
			{
				$.ajax({
						type: "POST",
						url: "join.php",
						data: dataString,
						success: function()
										{
											$('p#join_our_mailing_list').replaceWith("<p>Thank you</p>");
										}
			});
	}
return false;
});
});

How and what can I do to allow this form to insert into SQL Database?

I'd like to insert into SQL their emailaddress, IP, date and referral page....


Thanks for anyone that can help!

HI
i have a complete web site . now , how can do the work that all the textboxes in the page have the style that when the users click on it , the background of them geta color .

i don't want to insert this code one by one onclick="this.style.backgroundColor='#eeeeee';"

thanks

Hi

I am using mysql4.0. Here i have used one syntax:
Quote:
create table vimal(Customer int(11));
INSERT INTO vimal(customer) VALUES (001);
which works perfect in mysql5.0. But when i am trying to execute it in mysql4.0, it shows error :
"1064
You have an error in your SQL syntax. Check the manual that corresponds to your MySQL server version for the right syntax to use near ';
INSERT INTO vimal(customer) VALUES (001)' at line 1"

Can anybody there who can pull my hand to come out of this problem.

Regards:
Vimal kumar Srivastava
Madhepura,India

Here is an extract of my coding

Code:

function displayTitle(name) {
return name + " <a href='#' ><img src='direction.png' alt='Get driving directions'/></a>";

I have a map inserted into my aspx page.
When I click on one icon, the name and the direction.png picture will appear as a pop up box within the map

I want to make the direction.png picture into a link, whereby when I click on it, a pop up box will appear.

How?

Hi to All,

I have this problem:
I' dl ike that, if one clicks a button, appear window_explorer in which it' s possible to choose an image that it will put in the specific td of the table.

<head>
<script>
function add_pic() {
document.forms[0].pic.value == code to choose image ... }
</script>
</head>

<body>
<form method="POST" name="FrontPage_Form1">
...
<table>
<tr><td><button onClick="add_pic()">Insert Statitistic map</button></td></tr>
<tr><td>Comments</td></tr>
<tr><td id="pic" name="pic"> PLACE IN WHICH IMAGE APPEAR </td></tr>
</table>
...
</body>

Thanks in advance !!!

P.S. I use IE6 and Windows XP