Results 1 to 6 of 6

Thread: Load MySql Data to JavaScript Array

Threaded View

  1. #3

    Thread Starter
    Addicted Member
    Join Date
    Sep 2008
    Location
    Reading, UK
    Posts
    192

    Re: Load MySql Data to JavaScript Array

    Hi tr333

    thanks for getting back to me, ive tried using $.getJSON but with out much luck, if i try to run this code the nothing but '<tbody>' is returned

    Code:
    var tablebody = "<tbody>";
    	
    		$.getJSON("phpscript.php",function(data)
    		{ 
    			$.each(data,function(key,val)
    			{
    				tablebody += "<tr><td>" + val.Address + "</td></tr>";
    			});
    		});
    	return tablebody;
    id been trying to do this to act as part of a span i'm opening up in my web page, its basically a list picker, however the only time this loop seemed to run was after the span had been shown.

    Code:
    $.each(data,function(key,val)
    			{
    				tablebody += "<tr><td>" + val.Address + "</td></tr>";
    			});
    im my frustration im now using my php script to return the whole table body once the span has been loaded. i would have said that the JSON that i was retrieving was ok as when that script actually did run it did build the table as i expected it.

    this is the format that my JSON Downloads in [{"Address":"Address 1"},{"Address":"Address 2"}]
    this is the whole code for my Address Picker

    Code:
    var winaddpick;
    var AddPick;
    var ExAddress;
    var PickerSpanId = "PickerBoarder";
    var apLeft = 0;
    var apTop = 0;
    var apWidth = 600;
    var xpos = 0;
    var ypos = 0;
    var apHeight = 0;
    var apPosOffsetX = -200; //X position offset relative to calendar icon, can be negative value
    var apPosOffsetY = 0; //Y position offset relative to calendar icon, can be negative value
    var tablebody;
    var destins = new Array();
    //Add Picker Prototype
    
    function build_PastDestinations()
    {
    	var tablebody = "<tbody>";
    	
    		$.getJSON('phpscripts/getpastdestinations.php', function(data)
    		{ 
    			$.each(data, function(key,val)
    			{
    				tablebody += "<tr><td>" + val.Address + "</td></tr>";
    			});
    		});
    	alert(tablebody);
    }
    
    function show_addpicker()
    {
    
    	var PickerData = "<Span style='cursor:auto;'>";
    	var vPickerHeader = "<Table Style='width:500px;padding:0;margin:5px auto 5px auto;text-align:center;'><thead><tr><th>Previous Destinations</th></tr></thead>";
    	build_PastDestinations();
    	var PickerBody = "<tbody id=\"tbod\"></tbody>"
    	//var PickerBody = build_PastDestinations() <--this was where i wanted to build my table
    	var PickerCloser = "<tfoot><tr><td colspan='7' style=\"text-align:right;\">";
    	PickerCloser += "<img onmousedown='javascript:close_win();' src='javascripts/dtp/images2/cal_close.gif'>";
    	PickerCloser + "</td></tr></tfoot></table></span>";
    	apHeight = 400;
    	if (ypos > apHeight)
    	{
    		ypos = ypos - calHeight;
    	}
    	if (!winaddpick)
    	{
    		span = document.createElement("span");
    		span.id = PickerSpanId;
    		span.style.position = "absolute";
    		span.style.left = (xpos + apPosOffsetX) + 'px';
    		span.style.top = (ypos - apPosOffsetY) + 'px';
    		span.style.width = apWidth + 'px';
    		span.style.border = "solid 1pt #000000";
    		span.style.padding = "0";
    		span.style.backgroundColor = "#ffffff";
    		span.style.zIndex = 100;
    		document.body.appendChild(span);
    		winaddpick = document.getElementById(PickerSpanId);
    	}
    	else
    	{
    		winaddpick.style.visibility = "visible";
    		winaddpick.style.Height = apHeight;
    		
    	}
    	winaddpick.innerHTML = PickerData + vPickerHeader + PickerBody + PickerCloser;
    	getdest();
    	return true;
    	
    }
    function close_win()
    {
    	winaddpick.style.visibility = 'hidden';
    }
    function get_mPos(evt)
    {
    	var objectID,
    	dom,
    	de,
    	b;
    	
    	if (document.addEventListener)
    	{ // w3c
    		objectID = evt.target.id;
    		if (objectID.indexOf(PickerSpanId) !== -1)
    		{
    			dom = document.getElementById(objectID);
    			cnLeft = evt.pageX;
    			cnTop = evt.pageY;
    
    			if (dom.offsetLeft)
    			{
    				cnLeft = (cnLeft - dom.offsetLeft);
    				cnTop = (cnTop - dom.offsetTop);
    			}
    		}
    		xpos = (evt.pageX);
    		ypos = (evt.pageY);
    	}
    	else
    	{
    		de = document.documentElement;
    		b = document.body;
    		xpos = event.clientX + (de.scrollLeft || b.scrollLeft) - (de.clientLeft || 0);
    		ypos = event.clientY + (de.scrollTop || b.scrollTop) - (de.clientTop || 0);
    	}
    }
    function changeApBorder(element,type)
    {
    	if (type == 0)
    	{
    		element.style.background = "red";
    	}
    	else
    	{
    		element.style.background = "white";
    	}
    }
    document.onmousedown = get_mPos;
    many thanks again

    Ian
    Last edited by 12many; Mar 21st, 2013 at 05:30 AM.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width