JavaScript - Jquery, Parsing Html Ajax Response

i have made one page this is page link
http://pickthefights.com/fantansy-fi...482&page=fight
the code of this page is this


<script type="text/javascript">

////////////////////////////////
//
// Refreshing the DIV FANBOO2
//
////////////////////////////////

function refreshdiv_fanboo2(){

// Customise those settings

var seconds = 1;
var divid = "fanboo2";
var url = "http://pickthefights.com/fanboo2/?id=<?php echo $idvar ?>";

// Create xmlHttp

var xmlHttp_two = AJAX();

// No cache

var timestamp = fetch_unix_timestamp();
var nocacheurl = url+"?t="+timestamp;

// The code...

xmlHttp_two.onreadystatechange=function(){
if(xmlHttp_two.readyState==4){
document.getElementById(divid).innerHTML=xmlHttp_two.responseText;
setTimeout('refreshdiv_fanboo2()',seconds*1000);
}
}
xmlHttp_two.open("GET",nocacheurl,true);
xmlHttp_two.send(null);
}

// Start the refreshing process

window.onload = function startrefresh(){
setTimeout('refreshdiv_fanboo2()',seconds*1000);
}

</script>
<script type="text/javascript">
refreshdiv_fanboo2();
</script>
<div name="fanboo2" id="fanboo2"></div>

now what ever i put in fanboo2 page it works fine but javascript or jquery is not working here is code of fanboo2 page, you can check page here http://pickthefights.com/fanboo2/?id=482# here is it is working but not here http://pickthefights.com/fantansy-fi...482&page=fight


</script>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script src="http://bxslider.com/sites/default/files/jquery.bxSlider.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#slider1').bxSlider();
});
</script>

<ul id="slider1">
<li>Slide one content</li>
<li>Slide two content</li>
<li>Slide three content</li>
<li>And so on...</li>
</ul>

please help me out i want to make java script work on both of this page

I want to pass the "divId' function so that i can grab functions dynamically into the server where "success" is. this possible? I know the current setup is not (because " d.divId " isn't a variable)

Code:

function run(times,divId)
{
	$(function() 
	{
		var client_id = $('#client_id').attr('value');
		$.ajax(
		{
			url:'http://urlhere.com',
			data:{c:client_id},
			timeout:99999999999999,
			dataType:'jsonp',
			jsonp:'callback',
			jsonpCallback:'jsonpCallback',
			error:function()
			{
				if (times==1)
				{
					run(2);
				}
				else
				{
					$('#'+divId).html('Error') 
				}
			},
			success:function(d)
			{
				$('#'+divId).html('$'+d.divId);
			}
		});
}

I'm updating a database w/o "reloading" the page using jquery & ajax. Everything works fine, but I need to display an error (in php - mysql_error()) in the error callback function. I also don't think that the success/error callbacks are working as even when I changed the password in to the mysql server in the php file, I got the success message :S Can any1 help me out?

this is the php script

Code:

<?php

/*$fp = fopen('data.txt', 'a+');
fwrite($fp, 'ok');
fclose($fp);*/

$sections = $_REQUEST['sections'];
$fontColor = $_REQUEST['fontColor'];
$bgcolor = $_REQUEST['bgcolor'];
$font = $_REQUEST['font'];
$fontSize = $_REQUEST['fontSize'];
$lineHeight = $_REQUEST['lineHeight'];
$letterSpacing = $_REQUEST['letterSpacing'];
$fontStyle = $_REQUEST['fontStyle'];
//$tekst = $_REQUEST['tekst']

$connect = mysql_connect("localhost", "root", "password") or die ("Unable to connect to the database");
mysql_select_db("ipsum") or die ("doesnt exist: " . mysql_error());

$update = "INSERT INTO con (Sections, Fontcolor, BackgroundColor, Font, FontSize, LineHeight, LetterSpacing, FontStyle) VALUES ('".$sections."', '".$fontColor."', '".$bgcolor."', '".$font."', '".$fontSize."', '".$lineHeight."', '".$letterSpacing."', '".$fontStyle."')";



// the content of 'data.txt' is now 123 and not 23!


mysql_query($update) or die ("unable to update: " . mysql_error());

mysql_close($connect);


?>

and this is what I currently have for the error

Code:

error: (function (){$('#errorMessage').fadeIn("slow").delay(1000).fadeOut(2000);}),

but that needs to change...

right now I almost have this script working the way I want it to, here it is:

Code:

var hash = window.location.hash.substr(1);
	var href = $('.workimg a').each(function(){
		var href = $(this).attr('href');
		if(hash==href.substr(0,href.length-5)){
			var toLoad = hash+'.html #selected';
			$('#selected').load(toLoad)
		}											
	});

	$('.workimg a').click(function(){
								  
		var toLoad = $(this).attr('href')+' #selected';
		$('#selected').slideUp('slow',loadContent);
		$('#load').remove();
		$('#wrapper').append('<span id="load">LOADING...</span>');
		$('#load').fadeIn('normal');
		window.location.hash = $(this).attr('href');
		function loadContent() {
			$('#selected').load(toLoad,'',showNewContent)
		}
		function showNewContent() {
			$('#selected').slideDown('slow',hideLoader);
		}
		function hideLoader() {
			$('#load').slideUp('slow');
		}
		return false;
		
	});

How it works is an image is clicked, and it fills the #selected div with content. The problem I'm having is the #selected div is always visible so the questions I have are
1. How do I get this to snap to the #selected Div and add a 1 second delay before the slideDown effect?
2. How do I get add a fade in effect so it becomes Opacity=0 -> slideDown -> Opacity=1 when it appears and Opacity=1 slideUp -> Opacity=0 when it transitions to the next?

Hey guys

I should preface this by saying that this is not for my own site, or my own code; a friend has gone on holiday and needed this project fixing while he was away. Unfortunately my experience with jQuery is almost nil and everything was coded by someone else, so I'm really tearing my hair out.

This is a Wordpress installation running Thematic with two child themes, one of which uses Ajax calls to grab page content. The issue is that the Ajaxified calls stop the swfObject content from being loaded. Compa

http://dev.segolondon.com/wp292/media/ <- Flash content loads

versus:

http://dev.segolondon.com/wp292/#wp292/media/

If you take a look at the code of the two pages, you'll see there are no swfobject.embedSWF() calls on the Ajaxified page. It seems as though the jQuery calls are pre-empting the JS/Flash detection, so the swfObject code is never even written to the page.

The actual custom, handwritten code (i.e. not from a library or a plugin) on this site is minimal, so I'm grasping at straws to fix this.

I read somewhere about using a script block like this:

Code:

<script>
$(document).ready(
	function() {
		// Make the swfObject call
	}
);
</script>

But I'm not really sure where to put it since there are so many plugins used, all with slightly different embed methods.

Any help would be very gratefully received!

I am trying to perform an AJAX lookup during form validation onsubmit. It is important that it takes place during submit, but it seems to always return true and allow the form to post even when it should not. I have tried putting the AJAX portion in its own function and having it return true or false to the validation function but also does not seem to work. Here is what the code looks like...
Code:

$("#companyform").submit(function() {
			$.ajaxSetup({ cache: false });
			$.post("ajax_v2Functions.cfm", { coNum: $("#companyNumber").val() }, 			
				function(response) { 
					if(response != "") {
						alert("That company number is already in use by " + response);
						$("#companyNumber").focus();
						return false;
					}
				return false;
			} , "html");
			if($("#companyname").val() == "") {
				alert("The company name cannot be left blank.");
				$("#companyname").focus();
				return false;
			}
			if($("#companyNumber").val() == "") {
				alert("The company number cannot be left blank.");
				$("#companyNumber").focus();
				return false;
			}
	});

Hi there, I am trying to make a view that stacks images on top of one another. As the user uses mouseup or mousedown (+ LMB click) the user can scroll through the images. I am trying to use Ajax to load the new image when the user mousesup. RIght now nothing happens on mouseup. Can someone tell me what I am doing wrong please? thank you.

FYI: no errors on Firebug, hence I am posting here.

Code:

    $("#filmviewer").mouseup(function(){
         alert("t");

    });

html

Code:

<div  id="filmviewer" style="width:400px;">
<img src="pic_1.jpg" />
</div>

The problem is when I click and mouseup over the image the alert("t") does not fire. what am I doing wrong?

function sendValues() {

var str = $("#myForm").serialize();

$.ajax({
type: 'POST',
url: "/trying.php?avoidcache=' + myTimestamp();",
data: str,
cache: false,
return:false

});

}
$(":checkbox[name='brand[]']").click(function() {
$("#myForm").submit();


});


..Upon reload, the values are serialized..
But when the page is done loading..the chosen values (checkbox) is not checked, I need it stay checked so I can add other values via checkbox to the url.

here is a live demo.. http://vbizmarketing.com/trying.php

Please help.

All,
I currently have this code to make a post to my database:
Code:

var $dataString = 'name='+ $name + '&black_white=' + $black_white + '&color=' + $color + '&color=' + $other + '&other_text=' + $text; 
$.post("save_edits.php", {image_save_string: $dataString}, function(result) { 
$("#multiple_images").hide(); 
$("#result_success").html("<font color='red'>We've successfully saved your photo edits!</font><br><br>"); 
$("#image_divs").html(result); 
});

Within the result I'm actually recreating the form for them to use if they want. I have a decent amount of jQuery that got initialized when the original page was loaded. Once I get my new form it doesn't work because it wasn't originally included in the page initialization. Is there a way just to call the document.ready function again to have it reinitialize my form elements again? Thanks in advance.

I have a problem where the page doesn't expand when more results get loaded via jquery on a facebook style wall. Once more results get loaded the footer stays static instead of moving down.

What's the best way to do this?

Hi all,
I'm new to php, but managed to get a domail.php working. My form from my html website is sent by the php file to my email address. However, the php echoes a mailresult upon successful sending, but how can I let my website respond to this mailresult?? I'd like to go to a different page, when the mailresult==OK, so something in my html file like

if($mailResult==OK){
//go to page saying, your mail has been sent!
}

OR I could change the "OK" to something more like "Thank you, your mail has been received" in the php file, because this text IS shown in my browser window. Then I would need to know how to make the layout of the window saying this fit my website layout, because now the text is just in a white plain frame..

Hope you guys can help me with either of those two options. Thanks a ton!!

Jay

What would be the best way to get data for a mobile site. I've tried using Jquery $.ajax to bring in the data from a php file.

It seems to work however it takes some time to load without a way to really give a progress meter. I was wondering what the fastest way to do this would be. For instance it loads and loads then after a long while the alert(); pops up and the data loads into the page.

Ultimately i was thinking i could use the ajax request to read in the data from the mysql database server, then transfer it to localstorage, im using HTML5 primarily for the development also just for reference.

Somewhat new to mobile development i was just wondering if anyone had a starting point for me to look at and go from there.

Code:

$(document).ready(function($){
	var dataret = 0;
	
		$.ajax({
		  type: 'POST',
		  url: 'mobile.php',
		  beforeSend: function(){
		  	$('#status').show();
		  },
		  success: function(data){
		  //initialize localstorage here
		  	alert('success');
		  	
// if it takes as long as it does, a few minutes, at least show a loading bar...
		  	$('#progress').progressbar({
		  		
		  	});
		  
		  },
		  dataType: 'json'
		});
	
	});

Thanks in advance!

First post here and its a "is this possible to do question?"
html code:

Move a div into an other div. Same thing as u move a file on the desktop into an other file.

Im going to try to do this in this way
html <- heres the divs, file divs and folder divs, all of them got uniqe ids
java <- making it possible to move the divs, and handling what div i move where
ajax <- calling a php script with the divid i moved and to what div i moved it to

I know nothing about ajax and im kinda bad at javascript to, know how to move a div, and how to see what div i moved it to but nothing more.

My questions is as follows, is it possible to do this? anyone know where to start? or got any good links i can watch, learn ajax from scratch or try with some Opensourceproject and learn from them?

Thanks all for ur time.

Hi,
I have what is probably a stupid issue. I have a select box that is being filled by an an ajax request to a SQL DB and returns the results in a select box. That part works fine.

The second part of the request is that i also want my inline html to change results if i change my selection.

that part is not working. I tried to put my onchange event into the option in php, but that doesn't return anything either.
$display_string .= "<option onchange=\"getSoftwareUpdate();\"> $row[Software] </option>";


clear as mud?

Any help would be much appreciated!



//this section gets the results from the php script and returns back the values in the db.

<script language="javascript" type="text/javascript">
<!--
//Browser Support Code
function getSoftwareFunction()
{
var ajaxRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Please contact Trinity Help Desk at ext. 88817");
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById('ajaxDiv');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}


var SoftwareName = document.getElementById('results').value;
var ManufacturerName = document.getElementById('results').value;
var VersionName = document.getElementById('results').value;
var InstallLocationName = document.getElementById('results').value;
var queryString = "?Software=" + SoftwareName + "&Manufacturer=" + ManufacturerName + "&Version=" + VersionName; + "&InstallLocation=" + InstallLocationName
ajaxRequest.open("POST", "getSoftwareName.php" + queryString, true);
ajaxRequest.send(null);
}

</script>

//this next part i want to return the results based on an onchange event in the select option


<script language="javascript" type="text/javascript">
<!--
//Browser Support Code
function getSoftwareUpdate()
{
var ajaxRequest1; // added
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest1 = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest1 = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest1 = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Please contact Trinity Help Desk at ext. 88817");
return false;
}
}
}

//added
// Create a function that will receive data sent from the server
ajaxRequest1.onreadystatechange = function(){
if(ajaxRequest1.readyState == 4){
var ajaxDisplay1 = document.getElementById('ajaxDiv1');
ajaxDisplay1.innerHTML = ajaxRequest1.responseText;
}
}
//end add

var Software = document.getElementById('results').value;
var SoftwareName = document.getElementById('results').value;
ajaxRequest1.open("POST", "getSoftwareName1.php" + SoftwareName, true);
ajaxRequest1.send(null);



}
</script>
<html>
<div id='ajaxDiv1'></div>
<div id='ajaxDiv'>
<select id='results' onchange="getSoftwareUpdate();" name="Software"> </select>
</div>
</html>

</td>

I'm having trouble inserting two jquery scripts into the same HTML file. they both work independently, but when i try to use them both at the same time only one script will work..

I'm using a "slider gallery" and "ez background-resize". I've read a few articles that suggest using "var jQuery_1_2_6 = $.noConflict(true);" but i just can't seem to figure it out.

Any one have any thoughts or suggestions? I'd really appreciate it.
Code is below.


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>Total City Sports</title>
	
	<link href="css/screen.css" rel="stylesheet" type="text/css" media="screen" />
	<link href="css/styles.css" rel="stylesheet" type="text/css" />
	<link href="css/reset.css" rel="stylesheet" type="text/css" />
	<style type="text/css">
 	</style>    
    
    <!-- start slider gallery-->
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/easySlider1.7.js"></script>
	<script type="text/javascript">
			$(document).ready(function(){	
			  $("#slider").easySlider({
			  auto: true,
			  continuous: true,
			  numeric: true
			  });
			});
		</script> <!-- end slider gallery -->
        
	

	<!--start bg resize -->
	<script src="js/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/jquery.ez-bg-resize.js" type="text/javascript" charset="utf-8"></script>
	<script>
		$(document).ready(function() {
		    $("#body-background").ezBgResize();
		});

		$(window).bind("resize", function(){
		    $("#body-background").ezBgResize();
		});
	</script> <!-- end bg resize-->
	
</head>