|
JavaScript - Having Trouble Getting Json Data Using Jquery
I am going through the example at the bottom of this page:
http://api.jquery.com/jQuery.getJSON/ I am using the following code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
</head>
<body>
<script>
var id=$("#id").attr("value");
$.getJSON("json.php",{id:id},dates);
function dates(datos) {
$("#list").html("Town:"+datos[1].rsTown+"<br>"+"County:"+datos[1].rsCounty);
}
</script>
<div id="id"></div>
<div id="list"></div>
</body>
</html>
and I'm trying to pull my JSON data from my PHP page: http://www.mypubspace.com/dashtest/json.php the JQuery seems to be doing something but nothing is being output to my screen?! project page http://www.mypubspace.com/dashtest/json.html Please help?! Similar TutorialsI currently have to run jQuery.noConflict(); so my other scripts work correctly, examples: Code: prototype.js validation.js And i have this Code: $( document ).ready( function() {
$( window ).scroll( function( e ) {
if( $( window ).scrollTop() > 160 ) {
$( '.navigation' ).addClass( 'fixed' );
} else {
$( '.navigation' ).removeClass( 'fixed' );
}
} );
} );
witch works when i take jQuery.noConflict(); out, but with it in it dont work and thats my main feature is there anyway round it, thanks. Here's what should happen. 1. Get the rel attribute of the clicked link 2. For every div with class 'entry': (i)Get its 'left' position (ii) Calculate its outer height (iii)Loop through all instances of 'a.tag_filter'. If it finds the same string in the 'rel' as the one oringinally clicked on then add 1 to 'V' and break out of the loop. (iv)If 'V' is equal to 0 after the loop we know the same tag isn't present within that '.entry' so fade it out. (v)Once the fadeout has finished loop through all the '.entry' after the faded out one and get their 'left' values. (vi)If the left value of the faded entry = the left value of the current '.entry' then reposition it to the new 'top' value. What is currently happening. It runs through and fades out all the correct '.entry' elements and only after all of them have faded out does it reposition them remaining '.entry' elements. After each element is faded out I would like the repositioning loop to run so it essentially positions the remaining elements one at a time rather than all at once. Here's the development page http://www.redeemercentral.com/index.php/test/grid Here's the code I have so far Code: $('a.tag_filter').click(function(e){
e.preventDefault();
var selectTag = $(this).attr('rel');
$('div.spotlight_entry_container_grid').each(function(i){
var $entry = $(this);
var tagArray = [];
$('a.tag_filter', this).each(function(){
tagArray.push ($(this).attr('rel'));
});
if($.inArray(selectTag,tagArray) == -1){
var leftPos = $entry.css("left");
var topPos = $entry.css("top");
$entry.fadeOut(1000, function(){
var nextLeftPos;
var nextTopPos;
$('div.spotlight_entry_container_grid:gt('+i+')').each(function(j) {
var $laterEntry = $(this);
nextLeftPos = $laterEntry.css("left");
nextTopPos = $laterEntry.css("top");
if(leftPos == nextLeftPos){
$laterEntry.animate({ top: topPos });
}
});
});
}
});
});
I hope that all makes sense. Any help would be very much appreciated. Thanks I've been trying to get the jquery nivo slider and the lavalamb function to work on the same webpage. From each of the tutorials comes different versions of jquery and they don't both work on the most recent version of jquery. I left both versions of the jquery attached for now... Am I doing something wrong or is it possible to have them both working on the same page? I'm a noob and my code is pretty messy...but I'm trying to do some simple stuff... Pleeeeese help meeeee!! I'm getting ubber frustrated Here is the website - http://sethwardallison.com/ihome/index.html Here is the menu I made that is working correctly on it's own... - http://sethwardallison.com/ihome/lavalamp/other.html Here is my code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<html lang="en">
<head>
<title>iHome Preview</title>
<link rel="stylesheet" href="js/nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<style type="text/css">
#nav {width:397px; background: url(images/bg2.gif) no-repeat top left; overflow:hidden; margin:0px; padding:10px 0px 13px 20px; color:#fff; position:relative; font: bold 14px arial;}
#nav li {float:left; display:inline; list-style:none; line-height:35px; position:relative; z-index:3;}
#nav li a { padding:0px 10px 0px; cursor:pointer; Palatino, serif; font-size:20px; display:inline; color:#fff; }
#nav li.rounder { position:absolute; left:0px; top:10px; margin:0px; padding:0px; display:none; z-index:2;}
#nav li.rounder img {position:absolute;}
.cornersWrap {position:relative; height:25px; width:auto; margin-top:5px; background:#dfddc0;}
#nav, #nav li, #nav li a, #nav li.rounder {height:35px;}
#tl,#tr,#bl,#br {position:absolute; width:8px; height:8px; overflow:hidden;}
#tr,#tl {top:0px;}
#br,#bl {bottom:0px;}
#tr,#br {right:0px;}
#tl,#bl {left:0px;}
#tr img,#br img {left:-8px;}
#bl img,#br img {top:-8px;}
</style>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#nav li a").mouseover(function(){
$("#nav li a").each(function(count){
$(this).css({color:"#fff"});
});
$(this).css({color:"#663300"});
var offL = $(this).offset().left - $("#nav").offset().left;
var offW = $(this).width() + parseInt($(this).css("paddingLeft")) * 2;
$("li.rounder").stop().animate({left:offL+"px", width:offW+"px"},295,function(){
//IE6 1px Fix
var trOff = $("#tr").offset().left + parseInt($("#tr").css("width"));
var wrapWOff = $(".rounder").offset().left + parseInt($(".rounder").css("width"));
var brOff = $("#br").offset().top + parseInt($("#br").css("height"));
var wrapHOff = $(".cornersWrap").offset().top + parseInt($(".cornersWrap").css("height"));
if(wrapWOff > trOff){
$("#tr,#br").attr("class","rFix");
}
$(".rFix").css({right:"-1px"});
if(wrapHOff > brOff){
$("#br,#bl").attr("class","bFix");
}
$(".bFix").css({bottom:"-1px"});
});
});
});
</script>
</head>
<body>
<center><img src="images/logo.png" alt="" title="Welcome">
<div id="wrapper">
<div id="slider-wrapper">
<div id="slider" class="nivoSlider">
<a href="http://youtu.be/4Mh--oqL6ak"><img src="images/randall.png" alt="" title="" /></a>
<a href=""><img src="images/creekwood.png" alt="" title="" /></a>
<a href=""><img src="images/poinsettia.png" alt="" /></a>
<a href="http://youtu.be/fO5q_lG7jKY"><img src="images/cielo.png" alt="" title="#htmlcaption" /></a>
</div>
<div id="htmlcaption" class="nivo-html-caption">
<strong>This</strong> is a<em>House</em> <a href="#">neat</a>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
<div>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Example</a></li>
<li><a href="#">Contact</a></li>
<li class="rounder">
<div class="cornersWrap">
<div id="tl"><img src="images/rounder.gif" /></div>
<div id="tr"><img src="images/rounder.gif" /></div>
<div id="bl"><img src="images/rounder.gif" /></div>
<div id="br"><img src="images/rounder.gif" /></div>
</div>
</li>
</ul>
</div>
</body>
</html>
Hi, I was going through this tutorial: http://www.electrictoolbox.com/json-...ery-php-mysql/ and I changed it round slightly, I would like the first select box to be Search by either Town or County - Having links would easier?! http://www.mypubspace.com/dashnew/ So, when a user selects Town, the PHP selects the Towns or if the user selects County, then show the Counties list I am currently getting the following error: $ is not defined [Break On This Error] $(document).ready(function() { here is my HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script language="javascript" type="text/javascript">
function populateFruitVariety() {
$.getJSON('search-by.php', {fruitName:$('#fruitName').val()}, function(data) {
var select = $('#fruitVariety');
var options = select.attr('options');
$('option', select).remove();
$.each(data, function(index, array) {
options[options.length] = new Option(array['variety']);
});
});
}
$(document).ready(function() {
populateFruitVariety();
$('#fruitName').change(function() {
populateFruitVariety();
});
});
</script>
</head>
<body>
<form>
Search by:
<select name="name" id="fruitName">
<option>Please Select</option>
<option id="Town">Town</option>
<option id="County">County</option>
</select>
Variety:
<select name="variety" id="fruitVariety">
</select>
</form>
</body>
</html>
PHP Code: <?PHP
$dsn = "mysql:host=xxx;dbname=[xxx]";
$username = "[xxx]";
$password = "[xxx]";
$pdo = new PDO($dsn, $username, $password);
$rows = array();
if(isset($_GET['Town'])) {
$stmt = $pdo->prepare("SELECT rsTown FROM pubs WHERE name = ?");
$stmt->execute(array($_GET['rsTown']));
$rows = $stmt->fetchAll(PDO::FETCH_ASSOC);
}
if(isset($_GET['County'])) {
$stmt = $pdo->prepare("SELECT rsCounty FROM pubs WHERE name = ?");
$stmt->execute(array($_GET['rsCounty']));
$rows = $stmt->fetchAll(PDO::FETCH_ASSOC);
}
echo json_encode($rows);
?>
Please help I think the `getJSON` should be taking the JSON URL and returning it as a response - The data file has `Author x3 Body x3 and Title x3`. Once it has this it should map it into the `nodes` and give me three nodes for each section of data. However currently its giving me the `console.log` output that I have below and nothing in my `nodes var` **Console Log:** Code: script.js:7 [Object, Object, Object]0: Object1: Object2: Objectlength: 3__proto__: Array[0] **Code:** Code: $(document).ready(function(){
var url = "assets/js/data.json";
$.getJSON(url).done(function(response) {
var nodes = response.map(function(i) {
return $('<div>').append(
$('<div>', {class: 'title'}).text(i.title),
$('<div>', {class: 'author'}).text(i.author),
$('<div>', {class: 'body'}).text(i.body)
);
console.log(response);
});
});
});//Ready function closed
Reply With Quote 01-08-2015, 10:56 PM #2 Old Pedant View Profile View Forum Posts Supreme Master coder! Join Date Feb 2009 Posts 28,311 Thanks 82 Thanked 4,754 Times in 4,716 Posts The data file has `Author x3 Body x3 and Title x3`. Literally??? That is, it has something like Code: {
Author: "Adam",
Author: "Bob",
Author: "Carol",
Body: "Somethhing...",
Body: "something else ...",
Body: "more stuff...",
Title: "Book one",
Title: "Book two",
Title: "Book three"
}
??? I'm sure that's not what you meant, but what *DID* you mean? Why not simply copy/paste the contents of "data.json" to here? hey guys im using greasmonkey with jquery and i want to find the remaining time on a page then display it in my infomation bar in game but what im having trouble with is the regxp trying to get the text then get the 1,2 or 3 didgit number between the text here is my current function which gets the numbers on the page but returns a HUGE number because its returning every number Code: function getFallen()
{
hellGate = "";
$.get('http://kong.playmage.com/dream/fallen?board', function(data)
{
temp = data;
if(temp.search("Time until revival:") != -1 || temp.search("minutes") != -1)
{
numb = temp.match(/\d/g);//format of text needed "Time until Revial (number 1,2 or 3 didgits long) minutes"
numb = numb.join("");//with the current match i have it returns huge number
//debugScript("Found the number :" + numb, "debug");
//el2 = $inc1("test"); function outside this function just for finding classes/ids
//if (el2) el2.textContent = numb; // for setting the content of the id class above not needed in this function but just for debug purposes
}
});
}
now oviously this get function WILL NOT work for you because you will need to log in so if you just store the following html into the temp var then it will function the same Code:
<input type="hidden" id="cfix" value=""/>
<center><span
style="padding-top: 4px; display: inline-block; font-size: 16px; color: #00ddbb; font-family: lucida grande, verdana, arial;">Fallen
Defenders</span> <br />
<table style="width: 100%;" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<div style="text-align: center;">Last Fallen</div>
<div class="trainlbox" style="height: 346px; overflow-x: hidden; margin: 5px 4px 5px 12px; display: inline-block;">
<table style="width: 332px;" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr style="vertical-align: middle; background-color: rgb(0, 36, 36);">
<td class="healheadertd" style="width: 50px;"> Rank</td>
<td class="healheadertd" style="width: 120px;">Player</td>
<td class="healheadertd" style="text-align: center;">Damage </td>
</tr>
<tr style="vertical-align: middle;">
<td> 1</td>
<td>
<a href="#" onclick="showDiv('/dream/profile?id=nf110743'); return false;">Authority[aik]</a>
</td>
<td style="text-align: center;">1,479,141,013 </td>
</tr>
<tr style="vertical-align: middle;">
<td> 2</td>
<td>
<a href="#" onclick="showDiv('/dream/profile?id=nf483977'); return false;">Ultima[HOT]</a>
</td>
<td style="text-align: center;">603,063,918 </td>
</tr>
<tr style="vertical-align: middle;">
<td> 3</td>
<td>
<a href="#" onclick="showDiv('/dream/profile?id=nf402815'); return false;">wozza[AGA]</a>
</td>
<td style="text-align: center;">287,130,506 </td>
</tr>
<tr style="vertical-align: middle;">
<td> 4</td>
<td>
<a href="#" onclick="showDiv('/dream/profile?id=nf404165'); return false;">larry1977[AGA]</a>
</td>
<td style="text-align: center;">277,033,578 </td>
</tr>
<tr style="vertical-align: middle;">
<td> 5</td>
<td>
<a href="#" onclick="showDiv('/dream/profile?id=nf455510'); return false;">Ehanida[ToF]</a>
</td>
<td style="text-align: center;">276,799,331 </td>
</tr>
<tr style="vertical-align: middle;">
<td> 6</td>
<td>
<a href="#" onclick="showDiv('/dream/profile?id=nf173542'); return false;">dudemanly[DNA]</a>
</td>
<td style="text-align: center;">191,656,885 </td>
</tr>
<tr style="vertical-align: middle;">
<td> 7</td>
<td>
<a href="#" onclick="showDiv('/dream/profile?id=nf191162'); return false;">krashkill0069[G4B]</a>
</td>
<td style="text-align: center;">47,831,724 </td>
</tr>
<tr style="vertical-align: middle;">
<td> 8</td>
<td>
<a href="#" onclick="showDiv('/dream/profile?id=nf486185'); return false;">ben_avatar[HOT]</a>
</td>
<td style="text-align: center;">33,264,175 </td>
</tr>
<tr style="vertical-align: middle;">
<td> 9</td>
<td>
<a href="#" onclick="showDiv('/dream/profile?id=nf312560'); return false;">Niv[PWN]</a>
</td>
<td style="text-align: center;">31,520,972 </td>
</tr>
<tr style="vertical-align: middle;">
<td> 10</td>
<td>
<a href="#" onclick="showDiv('/dream/profile?id=nf528295'); return false;">leandroaod[DJE]</a>
</td>
<td style="text-align: center;">26,510,757 </td>
</tr>
<tr style="vertical-align: middle;">
<td> 11</td>
<td>
<a href="#" onclick="showDiv('/dream/profile?id=nf187015'); return false;">Graveyard[PWN]</a>
</td>
<td style="text-align: center;">10,379,144 </td>
</tr>
<tr style="vertical-align: middle;">
<td> 12</td>
<td>
<a href="#" onclick="showDiv('/dream/profile?id=nf25358'); return false;">Maynard[PWN]</a>
</td>
<td style="text-align: center;">7,116,618 </td>
</tr>
<tr style="vertical-align: middle;">
<td> 13</td>
<td>
<a href="#" onclick="showDiv('/dream/profile?id=nf229143'); return false;">Barry McCociner[XXX]</a>
</td>
<td style="text-align: center;">6,123,612 </td>
</tr>
<tr style="vertical-align: middle;">
<td> 14</td>
<td>
<a href="#" onclick="showDiv('/dream/profile?id=nf79006'); return false;">DumMetlHed[PWN]</a>
</td>
<td style="text-align: center;">4,736,449 </td>
</tr>
</tbody>
</table>
</div>
</td>
<td>
<div style="text-align: center;">Current Fallen
</div>
<div class="trainlbox" style="height: 346px; overflow-x: hidden; margin: 5px 8px; display: inline-block;">
<table style="width: 332px;" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr style="vertical-align: middle; background-color: rgb(0, 36, 36);">
<td class="healheadertd" style="width: 50px;"> Rank</td>
<td class="healheadertd" style="width: 120px;">Player</td>
<td class="healheadertd" style="text-align: center;">Damage </td>
</tr>
<tr><td colspan="3" style="text-align: center;">
<br/> <br/> <br/> <br/>
Time until revival: 147 minutes
</td></tr>
</tbody>
</table>
</div>
</td>
</tr></tbody>
</table>
<div style="padding-top: 10px;"><span class="btn100" onclick="closeFloat();">Close</span></div>
</center>
would it be possible to only strip the following text Time until Revial (number 1,2 or 3 didgits long) minutes and then once it has found that match remove anything that isnt a number You've probably seen this many times with two dynamic linking select boxes that deals in form or another deal with countries and then cities for the second one or something similar well I have another question about that. I've looked at a few others and well their coding is so different then mine that I don't want to use code for my own project that I don't understand in case I need to reuse it for some other reason down the road. The user selects a country and with the users selection it passes the countryid as a variable through jquery's ajax fuction as a post parameter to a php process page in which it goes to a table and matches the country id with the db field called country_id in the arenas table. With all the records that matches that countryid it selects the arena name and city that the arena is in and displays it as an option tag now I'm trying to figure out with muliple entries how can I pass the results back to the form page and insert it into the arenas dropdown box. Following is my coding separated out for you. I only included the necessary parts. All help would be greatly appreciated. form page Code: $('#countryid').change(function() {
var countryid = $("select#countryid").val();
var dataString = 'countryid='+ countryid;
$.ajax({
type: "POST",
url: "processes/booking.php",
data: dataString,
success: function() {
}
});
});
<div class="field required">
<label for="countryid">Country</label>
<select class="dropdown" name="countryid" id="countryid" title="Country">
<option value="0">- Select -</option>
<?php
$query = 'SELECT id, countryname FROM countries';
$result = mysqli_query ( $dbc, $query ); // Run The Query
while ( $row = mysqli_fetch_array ( $result, MYSQL_ASSOC ) )
{
print "<option value=\"".$row['id']."\">".$row['countryname']."</option>\r";
}
?>
</select>
<span class="required-icon tooltip" title="Required field - This field is required, it cannot be blank, and must contain something that is different from emptyness in order to be filled in. ">Required</span>
</div>
<div class="field required">
<label for="arena">Arenas</label>
<select class="dropdown" name="arenas" id="arenas" title="Arenas">
</select>
<span class="required-icon tooltip" title="Required field - This field is required, it cannot be blank, and must contain something that is different from emptyness in order to be filled in. ">Required</span>
</div>
php process page PHP Code: $countryid = (int)$_GET['countryid']; $query = "SELECT * FROM `arenas` WHERE `country_id` = '$countryid'"; $result = mysqli_query ($dbc, $query); while ($row = mysqli_fetch_array($dbc, $result)) { echo '<option value="'.$row['arena'].'">'.$row['arena'].' - '.$row['city'].'</option>\n'; } I have a very large json file, and inside of that json file is an array. I would like to use JavaScript to take that json as an argument, parse through the json and only take certain elements from it and put it into a new json file, below is an example of what I mean: Code: {
"contextType": "Account",
"preferences": null,
"custodianCode": null,
"data": [{
"id": "0",
"account": "11111111",
"field2": true,
"field3": false,
"field4": "BROK",
"field5": "Broker",
"field6": "1",
"field7": "Cash"
},{
"id": "1",
"account": "222222222",
"field2": true,
"field3": false,
"field4": "BROK",
"field5": "Broker",
"field6": "1",
"field7": "Cash"
}]
}
And I want to pull from that and get something like this as a new json Code: {
"newArray": [{
"id": "0",
"account": "11111111",
"field2": true,
"field3": false,
"field4": "BROK",
"field6": "1"
},{
"id": "0",
"account": "222222222",
"field2": true,
"field3": false,
"field4": "BROK",
"field6": "1"
}]
}
Also the file is local to my computer and can be outputted locally as well, I am trying to use node.js and JavaScript this is what I have so far Code: var json = require('./simple.json');
var keeperFields = ["id", "account", "field2", "field3", "field4", "field6"];
var newJSON = {newArray: [] };
var i;
var fields;
for (i = 0; i < keeperFields.length; i++) {
for (fields in json) {
if (json.hasOwnProperty(keeperFields[i])) {
newJSON.newArray.push(keeperFields[i]);
}
}
}
console.log(newJSON);
This is just a small example the real json file is huge with thousands of lines. Any help or suggestions are appreciated! This current solution is giving me a console log of { newArray: []} instead of the expected result above So, i have this code which retrieves php files for me using jquery and id love to get it working with Jquery history plugin. I tried modifying the code i got from the ajax demo to work for me, but i just couldnt do it as i do not know any javascript really.. ( actually what i tried was simply to change "#ajax-links a" to "#menu li a" and .html to .php ..but nothing.. :rolleyes: Id be very gratefull if someone would help me out with this one. All related code can be found bellow (the ones that should be needed anyways): This is the code that retrieves php files inside "#content" when item from "#menu li a" with the specified id is clicked Code: $(document).ready(function(){
//References
var change = $("#menu li a");
var loading = $("#loading");
var content = $("#content");
//Manage click events
change.click(function(){
//show the loading bar
showLoading();
//load selected section
if(this.id == "home")
{
change.load(this.className='current-page');
content.slideUp();
content.load("pages/index.php", hideLoading);
content.slideDown();
}
else if(this.id == "secondpage")
{
change.load(this.className='current-page');
content.slideUp();
content.load("pages/secondpage.php", hideLoading);
content.slideDown();
}
else
{
//hide loading bar if there is no selected section
hideLoading();
}
});
//show loading bar
function showLoading(){
loading
.css({visibility:"visible"})
.css({opacity:"1"})
.css({display:"block"})
;
}
//hide loading bar
function hideLoading(){
loading.fadeTo(1000, 0);
};
});
Heres the structure of the menu/content Code: <ul id="menu"> <li><a id="home" class="normal" href="#Home"></a></li> <li><a id="secondpage" class="normal" href="#Secondpage"></a></li> </ul> <div id="content"> <ul id="sec-menu"> <li><a id="link1" class="normal" href="#">Link1</a></li> <li><a id="link2" class="normal" href="#">Link2</a></li> </ul> </div> Heres the code that jquery history plugin uses in demo for ajax Code: jQuery(document).ready(function($) {
function load(num) {
$('#content').load(num +".html");
}
$.history.init(function(url) {
load(url == "" ? "1" : url);
});
$('#ajax-links a').live('click', function(e) {
var url = $(this).attr('href');
url = url.replace(/^.*#/, '');
$.history.load(url);
return false;
});
});
hi, i have a jquery problem... this script is not working with jquery-1.4.2.min, but it works with jquery-1.2.6.min.js, can anyone help me???the script is the above: (it is not working the tab actions, the slideout works...) http://www.benjaminsterling.com/wp-c...es/sidetab.htm the javascript code is the above: PHP Code: var jqsideTabs; var tabs, h = 50, r = 0,ra = 0; $(document) .ready(function(){ jqsideTabs = $('#sideTabs').addClass('closed'); tabs = jqsideTabs .find('.tab h3') .clone() .appendTo(jqsideTabs) .each(function(i){ var that = $(this), cls = '',ow,newThis, newEl; if( i == 0 ) cls = ' active'; newEl = $('<a href="#" class="tabLinks'+cls+'">' + that.text() + '</a>'); that.replaceWith(newEl); ow = newEl.outerWidth(); if( i == 0 ) ra = ow; else r = ow; h = newEl.css({'top':h , 'right': -ow }).height() + h; newThis = newEl.get(0); newThis.jq = newEl; newThis.i = i; newEl.click(function(){ var el = this.jq; if( jqsideTabs.hasClass( 'closed' ) ){ jqsideTabs.removeClass('closed'); } else if( !jqsideTabs.hasClass( 'closed' ) && el.hasClass('active') ){ jqsideTabs.addClass('closed'); } el .siblings() .removeClass('active') .css({'right': -r }) .end() .addClass('active') .css({'right': -ra }); tabs.eq( this.i ).show().siblings('.tab').hide(); return false; }); }) .end() .parent() .eq(0) .addClass('active') .end() .filter(':not(:eq(0))') .hide() .end(); jqsideTabs.bind("mouseleave",function(){ jqsideTabs .animate({left:-310}, 'fast', function(){ jqsideTabs.addClass('closed').removeAttr('style'); }); }); }); and the html file is: [HTML] <div id="sideTabs"> <div class="tab"> <h3>Tab 1</h3> <div class="gut"> <p>Some text</p> </div> </div> <div class="tab"> <h3>Tab 2</h3> <div class="gut"> <ul> <li>link</li> </ul> </div> </div> <div class="tab"> <h3>Tab 3</h3> <div class="gut"> <ul> <li>link</li> </ul> </div> </div> </div> [/HTML] the problem is that the tab button works, but the content doesnt change...in all of tabs showing the same text(showing all tbas content).... can anyone help...please..... i keep getting the error GET http://code.jquery.com/jquery.min.map net::ERR_TOO_MANY_REDIRECTS & Failed to load resource: net::ERR_TOO_MANY_REDIRECTS when i load my page...and the havascript doesn't work properly on ym page...how do i resolve this. thanx in advance var s="attr" var i=$(s) // jQuery(elem).attr(attr,eval("elm"+attr)); jQuery(elem).$(s)(attr,eval("elm"+attr));//i tried this. how to assign a variable name in the above code(in place of s) so that i need to add an attribute to the element "elem". Hello all, I thought I'd share something that I don't see talked about much on the forums. I've been doing a bunch of AJAX development at work. We're really strapped for processing speed on our client (we build the machines our clients use) and therefore we've needed to find ways of speeding everything up. One of the things we decided on within the first week of our current project was to completely scrap XML in favor of JSON for sending data back and forth. JSON is JavaScript Object notation. Many of you have already seen it, it looks like this: Code: {'prop1' : 'someValue', 'prop9' : 5};
That defines an object with 2 properties, prop1 and prop9, with the respective values "someValue" and 5. Compare that to XML: Code: <obj> <prop1 value="someValue" type="String" /> <prop2 value="5" type="Integer" /> </obj> That's a bit more bloated, maybe not too noticeable, but the example is a small one. If you take large amounts of data, and multiple objects, XML can get incredibly bloated, and bloat on the wire slows down your app. That's the first reason we switched. The second reason we switched is that we save time on the processing. We all know what it's like to get at XML data. Import the document, get the node, get the value, get the next node, get the value. And building XML documents can take just as long: Create document, create root node, create node, create attribute node, set value, append child, repeat... All that processing for something so simple. JSON on the other hand is a subset of javascript, so check this out. Code: var data = "{'prop1':'someValue', 'prop2':5}";
var obj = eval("(" + data + ")");
alert(obj.prop1); // *** Alerts 'someValue' ***
The string fits right into JavaScript in one function call. Granted, eval can be expensive, but if you test this out yourself, it's far cheaper than building and deconstructing XML in the JavaScript engine. There are 2 simple JSON parsing libraries that we use in development: JSON.php and json.js; these provide the necessary functions to serialize any PHP object into JSON, and serialize any JavaScript object into JSON. You can get them at the links below. We are also following the specification for JSON-RPC, defined in the last link below. We found this to be incredibly fast when compared to XML, and we haven't regretted it yet. Granted, we're not doing full blown web services where the the javascript modifies itself based on the service's self-definition, complete with namespaces and function signatures, but we transfer a lot of data quickly and efficiently to provide our users with the best experience possible. I recommend examining this further if you do AJAX development. Hopefully this helped somebody. http://json.org/ http://mike.teczno.com/json.html http://json-rpc.org/ And now for the "VS" part of this post: Anyone with experience in using both XML and JSON that wants to argue the mertis of either technique? I support JSON for almost all AJAX applications currently. I haven't found a good reason to use XML, and the negatives for using XML (bloat and processing speed) have currently knocked it completely from my "viable options" list. Anyone care to discuss? I am making a dynamic google map and need to pass in a JS Object that has latitude, longitude, address, name, and a link. The JS Object will be getting those values from a DB and may have up to 15 recordsets. I need to know how to separate that out into it's entities to include in the Map API regardless of how many recordsets there are.
hey guys im trying to create this script which will show array depending on what option has been selected on the select box...but the only thing being returned is "unidentified"....can anyone explain where i am going wrong please...thank you Code: <!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/ajax/jquery/libary/jquery.js"></script>
</head>
<body>
<?php
$game_type = array();
$division = array();
if ($_POST['game'] == 1)
{
$game_type[] = array('value' => '1',
'text' => 'TDM'
);
$game_type[] = array('value' => '1',
'text' => 'CTF'
);
$division[] = array('value' => '1',
'text' => 'Divison 1'
);
}
elseif ($_POST['game'] == 2)
{
$game_type[] = array('value' => '1',
'text' => 'CTF'
);
$division[] = array('value' => '1',
'text' => 'Divison 2'
);
}
json_encode($game_type);
json_encode($division);
?>
<form>
<script>
$(document).ready(function(){
$("select#game").change(function(){
var post_string = "game=" + $(this).val();
$.ajax({
type: 'POST',
data: post_string,
cache: false,
dataType: 'json',
url: 'json.php',
timeout: '2000',
error: function() {
alert("Error has occured");
},
success: function(data) {
$.each(data, function(i, j){
var row = "<option value=\"" + j.value + "\">" + j.text + "</option>";
$(row).appendTo("select#sub_category");
});
}
});
});
});
//$('#game_type').html('<input type=\"checkbox\" value=\"test\" /> TDM');
//$('#division').html('<input type=\"checkbox\" value=\"test\" /> Division 1');
</script>
<select name="game" id="game">
<option value=""></option>
<option value="1">Counter Strike</option>
<option value="2">COD</option>
</select>
<div id="game_type">
</div>
<div id="division">
</div>
<select name="sub_category" id="sub_category">
<option value="">-- Select First Value --</option>
</select>
</form>
</body>
</html>
I'm trying to get a return of Code: [ ["red","green","blue"] ,["blue","red","green"] ] from a text file that contains Code: red,green,blue blue,red,green Using the following function Quote: Originally Posted by Old Pedant Code: function WRITE_FILE_AS_JSON(file)
{
fso = Server.CreateObject("Scripting.FileSystemObject");
myPath=Server.MapPath("timecards/" + file);
if(!fso.FileExists(myPath))return;
myfile = fso.OpenTextFile( myPath, read);
var lines = myfile.readAll().split("\n");
Response.Write("[\n");
for ( var i = 0; i < lines.length; ++i )
{
Response.Write(' ' + (i >0 ? ',' : '' ) + '["' + lines(i).replace(/\,/g,'","') + '"]\n');
}
Response.Write("]\n");
myfile.Close();
Response.End();
}
The darn thing keeps returning Quote: 500 (Internal Server) Error as a result of the line Response.Write(' ' + (i >0 ? ',' : '' ) + '["' + lines(i).replace(/\,/g,'","') + '"]\n'); And I don't know how to fix that line... I've been using the JSON.stringify method to convert my JSON object to a string to pass via AJAX but I've read now that it is not supported in most browsers. What then should I use?
hello i am using a json file to import some content into a div like this: Code: $.getJSON('json/main_profile.json', function(data) {
$('#info_title').html(
'<h1>' + "General Information " + '</h1>'
);
});
but the problem appears when i try to replace the json file with a url, like this: Code: $.getJSON("http://interfaces-server.insource.local/users/145198", function(data) {
$('#info_title').html(
'<h1>' + "General Information " + '</h1>'
);
});
why works with the file but not with the link?? thanks All, Say I have the following code: Code: <!DOCTYPE html>
<html>
<head>
<style>img{ height: 100px; float: left; }</style>
<script src="http://code.jquery.com/jquery-1.7rc2.js"></script>
</head>
<body>
<div id="images">
</div>
<script>
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
{
tags: "cat",
tagmode: "any",
format: "json"
},
function(data) {
$.each(data.items, function(i,item){
$("<img/>").attr("src", item.media.m).appendTo("#images");
if ( i == 3 ) return false;
});
});</script>
</body>
</html>
This came from the jQuery website. What I would like to do is change the link to something like this: https://graph.facebook.com/me/friend...ss_token=12345 The data that comes back is something like: Code: {
"data": [
{
"review_comment": "Here is a comment",
"id": "12"
},
{
"review_comment": "Testing With more",
"id": "34"
},
{
"review_comment": "Third comment",
"id": "643"
},
{
"review_comment": "More Comments",
"id": "120"
},
{
"review_comment": "Testing",
"id": "3455"
}
]
}
What I would like to do is basically read all of the review_comment tags and basically rotate these to display them on the webpage. So have "Here is a comment" be displayed for like 10 seconds and then fade out and have "Testing with More" fade in and be displayed for another 10 seconds etc. What is the best way to do this? I'm not sure how to change my JSON code above to acheive this. Would I need to basically put the comments in a div and then use jQuery to fade in the divs in and out? Any help you could provide would be greatly appreciated!! |
|||||||