JavaScript - Jquery.ajax Callback(s)

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 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;
			}
	});

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.

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!

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?

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?

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'm make a ajax call to a processing PHP file that echos either "success" or an "error message".

When the success is returning, i want Jquery to recognize this and then redirect the browsers instead of displaying the success message.

Here are some snippets. I can only seem to parse to a blank or null.

Jquery code:
Code:

		$.ajax({
			type: "POST",
			url: "process.php",
			data: wfLoginPost(),
			success: function(msg){
	
                                alert(msg);

                                // both below are either null or blank
				//var res = $(msg).find("span.response").text();
				//var res = $(msg).find("span.response").html();
	
				if(res == 'Success'){
					window.location = 'http://www.google.com';
				}

			}
		});

process.php
PHP Code:
    if($qry[0]['pwd'] == $password){
        echo "<span class='response'>Success</span>";
    }else{
        echo "<span class='response'>Username or password did not match</span>";
    } 


Here is the contents of the msg response from the ajax post:

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>

        <link rel="stylesheet" type="text/css" href="css/reset.css"/>
	<link rel="stylesheet" type="text/css" href="css/960grid.css"/>
	<link rel="stylesheet" type="text/css" href="css/style.css"/>
	<link rel="stylesheet" type="text/css" href="css/statusmessageQ.css"/>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery.statusmessageQ-0.5.js"></script>
</head>
<span class='response'>Success</span>

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!

Hi, I having problems using 'this' in an objects method. I have simplified the problem - see image.

I instantiate object obj1 which inturn instantiates subObj1. subObj1 is a slave to obj1. obj1 registers a handler function called method1 with subObj1 so that subObj1 can tell obj1 when it has finished.
For example: call subObj1.subMethod2() to get the sub object to do something.
subObj1 calls subMethod1 when its finished with its task, which inturn causes method1 to be called.

If I call method1 directly from obj1 'this' refers to obj1.
However when method1 gets called by the subObj1 through the event handler mechanism,
I find that 'this' has been changed to refer to subObj1.
This is a problem as now method1 has lost all connection with its object obj1.
If I define method1 within the 'Class1' function, I can get it to work if I use the 'var me = this;' trick, but if you have lots of methods within Class1() with further nesting this can get a bit hard to read.
So, can someone tell me how to deal with 'this' changing. I.e. I want 'this' to refer to obj1 within method1.

Code:

<html>
<body>
<script type="text/javascript">

    function Class1(){
        this.prop1 = "prop";
        this.subObj1 = new SubClass1();           //sub-object
        this.subObj1.subMethod1 = this.method1;   //register handler
    }

    Class1.prototype.method1 = function(){
        console.log(this.prop1);
    }

    function SubClass1(){
        this.prop1 = "subObjProp";
        this.subMethod1;
        this.subMethod2 = function(){ this.subMethod1(); };
    }

    obj1 = new Class1();
    obj1.method1();                 //prints 'prop'
    obj1.subObj1.subMethod2();      //prints 'subObjProp'

</script>
</body>
</html>

On another note, there seems to many ways of defining methods (e.g using 'prototype' etc etc) and I gettting sick and tierd of a 'trial and error' approach to get things working. Can anyone recomend a good resourse that sets out the best way to design with javascript so I dont keep running into these issues. (E.g. is my scheme of communicating with sub-objects a bit crazy, and is there a better way.)
Thanks.

So I hacked up a version of the wowSlider to work as a timed rotating background... I need to know how to add a callback funtion so that I can make the Image and link that is in front of the wowSlider to change each time the background changes.

Here is what I have so far:
http://www.eclipse2.com/testing/new_layout/


Help would be greatly appreciated.

so, I should start by saying that I don't really understand callbacks (but I understand what they do), and here's the thing:

html5 browser geolocation has an error callback which works fine EXCEPT if the user is using FF and refuses to share their location. In IE and Chrome, this produces a "permission denied" error which you can then handle. But firefox just sits there because it never receives the error. Here's an example - click on Not now in FF to see what I mean.

So the only solution I can see is to make some special case for FF and this is where my question comes in - can I set a condition within the callback that says something like if it wasn't successful, but you didn't get an error, do this...

I thought that if (!position&&!error) {useMaxMind("Firefox fallback"); } might do it, but it can't go in the error callback (I guess because that only fires if an error is detected) and it doesn't work in the main function (I guess because if that code runs it means the location has been found)...

anyway. Here's what I have for the moment, which just sets a timeout as soon as it loads. It would be nice to have something a bit more elegant, though.

thanks in advance...

Code:

    function initialize() {
      // try W3C standard approach
	  var geoTimeout = 10000;
      var timeOuthandler = setTimeout("useMaxMind('Timeout')", geoTimeout);
     if(navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var latLong = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
	  alert("geolocation successful");
	  clearTimeout(timeOuthandler);
     showMap(latLong, 16);
    }, function (error)	{
	    switch (error.code) {
        case 0:
            message = "Something went wrong: " + error.message;
            break;
        case 1:
            message = "You denied permission to this page to retrieve a location.";
            break;
        case 2:
            message = "The browser was unable to determine a location: " + error.message;
            break;
        case 3:
            message = "The browser timed out before retrieving the location.";
            break;
    }	clearTimeout(timeOuthandler);
	          useMaxMind(message);
        }, {timeout:geoTimeout} );
	 } else {
	useMaxMind("No browser support");
		}
	}

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;
            });
    });