PDA

View Full Version : Need some help with this Ajax script please :)



hyde360
07-10-2009, 02:05 PM
Hello,

I do apologize if this is in the wrong forum...

I've written this Ajax script to process a request to remove data from a MySQL database, however they are both on the server but it doesn't seem to do the process whatsoever so it's baffled me :confused:

Here's my Ajax script:



<script type="text/javascript">
//-->
function removeBuddy(bud) {
$.ajax({
type: "GET",
url: "removeBuddy.php",
data: "buddy="+ bud,
success: function(msg){

$("#removed").ajaxComplete(function(event, request, settings){

if(msg == 'OK')
{

$("#removed").css("padding", "10px", "font-size", "8pt");
$(this).html('&nbsp;You have successfully removed <b>'+ bud +'</b> from your buddy list...');
}
else
{

$("#removed").css("padding", "10px", "font-size", "8pt");
$(this).html(msg);

});

}

});

}
else
{

$("#removed").css("padding", "10px", "font-size", "8pt");
$("#removed").html('FATAL: There was an error while processing your request... Please try again');
}

});

});

}
//-->
</script>


And for the part that sends the request to the Ajax script is this



<a href="#" onclick="removeBuddy('User1');">Delete Now...</a>


Also the DIV that returns the message is this:



<div id="removed"></div>


Can someone please be kindly and help me solve this, any help will be much appreciated :)

Jesdisciple
07-10-2009, 08:42 PM
Please post a link to the page on your site that contains the problematic script so we can check it out.

Immediately I notice that your JavaScript is obtrusive. That is, JS-disabled users cannot use the feature. JS-disabled users include the visually impaired (who use special browsers) and folks who intentionally disable JS for security reasons. If you're interested, I'd be glad to show you how to fix this.

hyde360
07-10-2009, 09:06 PM
Hello,

Thanks for your kind response, however my website is in currently development and the script is used to remove friends from their friends list as you probably already noticed.

All friends are stored on one Database Table, assigned to one another.

Don't know if that's a problem or not...

And yes if you wouldn't mind showing me :) I'll appreciate it a lot :D

Jesdisciple
07-10-2009, 10:09 PM
I don't really want to build your page from its components, and I can't anyway because I don't have all the components. Debugging by reading is often harder than that, because we don't work like computers... which is why we invented them in the first place. :p

The first step to unobtrusive JS is to build the page without JavaScript, and make sure it works. Any server-side logic that JS will need to use should be kept in separate script files than the non-JS pages.

Next, you need to make some JS run after the page is loaded which modifies the page with event-listeners. This involves finding the elements to modify (usually with document.getElementById (http://javascript.wikia.com/wiki/Document#getElementById)) and assigning to their "on[...]" properties, in this case "onclick".

After you complete the first step, your link should look like this:
<a href="friend_deleted.php?user=User1">Delete Now...</a>We need an ID to find it with, so...
<a id="delete" href="friend_deleted.php?user=User1">Delete Now...</a>Now we can JS-enable that link when the page loads:
document.getElementById('delete').onclick = function (){
removeBuddy('User1');
return false;
};There are two ways to wait for the page to load, favored by different people for different reasons.

You can register an onload event-listener on the window. This is equivalent to <body onload> except that logic and layout aren't jumbled together.
window.onload = function (){
// Do your stuff.
};

Scripts placed in the body are run when the browser reaches them. For example, this script will be run after the form is loaded but before the footer exists:
<body>
<form></form>
<script type="text/javascript">
doSomething();
</script>
<div id="footer"></div>
</body>Some people (most notably Douglas Crockford) prefer to put scripts at the very bottom of the page.
A <script src="url"></script> will block the downloading of other page components until the script has been fetched, compiled, and executed. It is better to call for the script as late as possible, so that the loading of images and other components will not be delayed. This can improve the perceived and actual page loading time. So it is usually best to make all <script src="url"></script> the last features before the </body>. An in-page <script> does not have a significant impact on loading time.

If a script is defining functions or data that are used by other functions, then the defining must be done before use. So the defining scripts must come before the using scripts.

hyde360
07-11-2009, 12:44 AM
Hello,

Thank you for your very kind response there :)

I couldn't agree more with the computer subject :p

Right, back on subject... I've done the testing and it works perfectly although the reason for using Ajax was to prevent page reloads, and to be honest it's a personal opinion they just annoy the hell out of me :rolleyes:

So is my Ajax script out of the question? Would you say <noscript>non js goes here</noscript> would also work for those people who have JS turned off? Yet your idea seems more constructive and easy to do :p

As for the JS could I use Ajax to perform the request, that's if the end-user has JS enabled? Again I don't mind if this is out of the question, I just think Ajax is nice :cool:

Jesdisciple
07-11-2009, 01:03 AM
I was assuming that removeBuddy performs your Ajax...

noscript tags are stripped by corporate proxies for security reasons... I don't know the reasons; I got this piece of info from a guru on another forum.

Because my onclick handler returns false, you shouldn't see the non-JS alternative if JS is enabled.

hyde360
07-11-2009, 01:15 AM
Thanks again :)

You have been a great help on this!

And on that subject about "noscript" being stripped by companies seems odd but oh well, again thanks a lot mate :D

Regards,
Hyde360

Jesdisciple
07-11-2009, 01:32 AM
Oh, you were asking something different with "out of the qustion" than I thought. Plus I forgot that you posted the source for removeBuddy... :confused:

But anyway... If I can't work with the actual page, I don't think it's a good idea to try to solve any problems with it. That will probably just result in me spending a lot of time getting frustrated.

hyde360
07-11-2009, 02:57 AM
Hello,

I have solved this now and it's working perfectly, took some time and pretty much a lot of stress... But that's what coding is all about fun, stress, enjoy, well I think so anyway :p

Again thanks for your help in trying to solve this!!!

- Hyde360

Jesdisciple
07-11-2009, 04:58 AM
Learning to use a debugger should help lower the stress and raise the fun. :) For JavaScript, I recommend Firebug (http://getfirebug.com/) for Firefox or Firebug Lite (http://getfirebug.com/lite.html) for everything else.

hyde360
07-11-2009, 09:45 AM
Ahh thanks for that, never knew about those and I use firefox mostly not really a big fan of IE never have been :p But I will deffiantly check those out and give them a try :) I rather have more fun coding and less stress the better :D

With PHP well that just speaks for itself when debugging it :)

Oh and I totally rewrote a Ajax script for that thing, as seeing the other one was just not working and being a pain in the backside I gave up and removed it and replaced it with a working one and again having a code block for non JS users :).