Why is my AJAX code only paritially working?

Question

Hello people here is my code

echo('Name: <input type="text" id="Name" onchange="im()" value="your name"  name="Name" />');
echo('pointsize: <input type="text" id="pointsize" onchange="im()" value="50" name="pointsize" />');
echo('format: <input type="text" id="format" value=".gif" onchange="im()" name="format" />');
echo('BackGround Color: <input type="text" id="bckclr" value="red" onchange="im()" name="bckclr" />');
echo('FontColor: <input type="text" id="color" value="white" onchange="im()" name="color" />');
echo('Border Color: <input type="text" id="bcolor" value="blue" onchange="im()" name="bcolor" />');
echo('<a href="./lang/ims.php"><img src="'.$image.'" height="82" width="82" /></a>');
echo('Font: <input type="text" id="font" value="'.$image1.'" onchange="im()" name="font" />');

echo ('<div id="Div_Im">');
echo('replace me');
echo ('</div>');

Here is my AJAX code.

<Script type="text/javascript">
    function im()
    {
        var Name=document.getElementById("Name").value;
        var pointsize=document.getElementById("pointsize").value;
        var format=document.getElementById("format").value;
        var bckclr=document.getElementById("bckclr").value;
        var color=document.getElementById("color").value;
        var bcolor=document.getElementById("bcolor").value;
        var font=document.getElementById("font").value;
        $(document).ready(function(){
            var url='Name='+Name+'&pointsize='+pointsize+'&format='+format+'&bckclr='+bckclr+'&color='+color+'&bcolor='+bcolor+'&font='+font;
            alert(url);
            //-----Sending request to server for getting job name list by ajax-----
            $.ajax({
                type    : "POST",
                url : "i.php?",
                data    : url,              
                cache   : false,
                success : function(html)
                {
                    //document.getElementById('Div_PJobId').style.display="block";
                    //alert('hi');
                    alert(html);
                    var pic='<img src="'+html+'">';
                    $("#Div_Im").html(pic).show();
                }
            });
        });
     }
</script>

And here is my server page code for i.php

$Name=$_POST["Name"];
$pointsize=$_POST["pointsize"];
$bckclr=$_POST["bckclr"];
$color=$_POST["color"];
$bcolor=$_POST["bcolor"];
$format=$_POST["format"];
//$filename = "./lang/sri".$format;
$filename = "./lang/".$Name.$format;
$font=$_POST["font"]; 

$cmd = " -background $bckclr -pointsize $pointsize -font $font -fill $color ".
            " -strokewidth 1 -stroke $bcolor label:\"$Name\" ";

exec("convert $cmd $filename");
//if($filename)
//{}
//echo('<img src="'.$filename.'">');
echo $filename;

Please check the demo link . Contents(image shown in ) of is replacing only if I make changes to name ,but it does not work for color,bcolor,font,...I need to refresh the page every time when I make changes.... is there a way to fix this problem?

Answer 1

I was debugging your code and found that every thing is working fine on client side as on every change(in input ) you are calling to your server with latest data and replacing your image based on html you get from server.

I believe there is problem to your server side code. as I saw you are assigning name to created image file using name field value. it means name image file already created for color change as name is already provided. you should look your server side code. some time response is taking infinite time to return from server.

Answer 2

1. You've wrapped $(document).ready function inside the im() function.. why is that?

2. Why didn't you used jQuery for getting the inputs values?

    function im() { $.ajax({ type: "POST", url: "i.php?", data: { Name:$('#Name').val(), pointsize:$('#pointsize').val(), format:$('#format').val(), bckclr:$('#bckclr').val(), color:$('#color').val(), bcolor:$('#bcolor').val(), font:$('#font').val() }, cache: false }).done(function(html) { //document.getElementById('Div_PJobId').style.display="block"; //alert('hi'); alert(html); var pic='<img src="'+html+'">'; $("#Div_Im").html(pic).show(); }); }