MyBB Community Forums

Today I decided to upgrade the javascript in DNP Script to use jQuery which meant I had to sit down and learn the syntax (which it turns out isn't very complicated). It's been amazing seeing how much less you have to write using jQuery.

This was the most notable enhancement so far. I turned these two javascript functions used to submit a form using Ajax:

function submitForm() {
	if(window.XMLHttpRequest){
		xmlhttp=new XMLHttpRequest();					
	}
	else{
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}

	xmlhttp.onreadystatechange=function()
	{
		if(xmlhttp.readyState==4 && xmlhttp.status==200)
		{
			if(xmlhttp.responseText == "<span class=\"message_success\">Congratulations! You\'ve successfully installed DNP Script. You should remove the /install directory from your server now. After that I recommend you get started in the <a href=\"../admin/\">Admin Panel</a> to configure the site. Thanks for using DNP Script!</span>"){
				var	e = install.elements;
				for(i=0;i<e.length;i++){
					e[i].disabled = true;
				}
				document.getElementById("database_test").innerHTML="";
				document.getElementById("submit_section").innerHTML="";							
			}
			document.getElementById("form_message").innerHTML=xmlhttp.responseText;
			document.getElementById("pass_match").innerHTML="";
		}
	}
				
				
	xmlhttp.open("POST", "install.php", true);
	xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	xmlhttp.send(queryString());
				
}
			
function queryString() {
	var e = install.elements;
	for ( i = 0; i < e.length; i++ ) {
		if ( i == 0 ){
			var qstr = e[i].name+"="+encodeURIComponent(e[i].value);
		}
		else {
			qstr = qstr+"&"+e[i].name+"="+encodeURIComponent(e[i].value);
		}
	}
	return qstr;
}

into this function:

function submitForm() {
	$.post('install.php', $('#install').serialize(), function(response) {
		if ( response == "<span class=\"message_success\">Congratulations! You\'ve successfully installed DNP Script. You should remove the /install directory from your server now. After that I recommend you get started in the <a href=\"../admin/\">Admin Panel</a> to configure the site. Thanks for using DNP Script!</span>" ) {
			var	e = install.elements;
			for(i=0;i<e.length;i++){
				e[i].disabled = true;
			}
						
			$("#database_test").html("");
			$("#submit_section").html("");
		}
					
		$("#pass_match").html("");
		$("#form_message").html(response);
					
	});
}

Sending back a long string like that from an ajax request and checking if the response equals that isn't a very good way of doing it...

(2011-09-24, 08:32 PM)MattRogowski Wrote: [ -> ]Sending back a long string like that from an ajax request and checking if the response equals that isn't a very good way of doing it...

It's not ideal but it works. If you have a better suggestion I'm open to it.

Just have the script echo out 1 or 'success' or something and see if the response equals that, and then have a <span> tag (or really a <p> tag) in the HTML of the page, either empty or hidden and containing this message, and then either put the text in or just show the element. Having a such a string in an if statement is bad practice.

And as for that loop you do, you can just do this:

$(install.elements).each(function(i, element) {
    $(element).attr('disabled', true);
});

Or something like that anyway.

(2011-09-24, 08:38 PM)MattRogowski Wrote: [ -> ]Just have the script echo out 1 or 'success' or something and see of the response equals that, and then have a <span> tag (or really a <p> tag) in the HTML of the page, either empty or containing this message, and then either put the text in or just show the element. Having a such a string in an if statement is bad practice.

The problem is that it doesn't just echo the success message. There are a variety of errors that it could send back and I want them to show up as well without having to have a separate error code and message in index.php for each.

Quote:And as for that loop you do, you can just do this:

$(install.elements).each(function(i, element) {
    $(element).attr('disabled', true);
});

Or something like that anyway.

I was looking into using $.each() for that but I couldn't quite figure out how to implement it. Thank you!

(2011-09-24, 08:46 PM)RPicard Wrote: [ -> ]

(2011-09-24, 08:38 PM)MattRogowski Wrote: [ -> ]Just have the script echo out 1 or 'success' or something and see of the response equals that, and then have a <span> tag (or really a <p> tag) in the HTML of the page, either empty or containing this message, and then either put the text in or just show the element. Having a such a string in an if statement is bad practice.

The problem is that it doesn't just echo the success message. There are a variety of errors that it could send back and I want them to show up as well without having to have a separate error code and message in index.php for each.

If you've got multiple possible responses you could just have a switch statement in the javascript. If you're dealing with multiple possible responses that's the sort of control structure you need to be using.

...
// ajax request
success: function(data) {
    switch(data)
    {
        case 'noUsername':
            message = 'You need a username';
            type = 'error';
        case 'noPassword':
            message = 'You need a password';
            type = 'error';
        case 'success':
            message = 'Success!! All installed.';
            type = 'success';
    }
    $('#response_message').addClass(type).html(message);
}
...

Or, in the PHP, generate a PHP array like this and echo it out as JSON:

$response = array('type' => 'success', 'message' => 'Success!! All installed.');
echo json_encode($response);

and then...

...
// ajax request
success: function(data) {
    data = $.parseJSON(data);
    $('#response_message').addClass(data.type).html(data.message);
}
...

In both of those you'd have this in the HTML:

<p id="response_message"></p>

And it'd add the appropriate class and set the HTML to the message. Simples.

Simples indeed. I especially like the JSON idea. I'm going to get working on that after I go make some food. Thank you!

---

Worked like a charm and it was easy to implement. I'm probably going to move towards using a lot of AJAX in other parts of the script so this will be a big help. Thanks again.