Ankit Ankit - 3 months ago 7
Ajax Question

How can I display ajax response on HTML page?

Sorry for the long code, but I want to compress this code giving the same output or is there some other way to code and get the same output.

I am getting the response from PHP, passing it to Javascript via AJAX.

This is the respone :

{"questions":{"1":"what1","2":"what2","3":"what3","4":"what4"},"option1":{"1":"A1","2":"A2","3":"A3","4":"A4"},"option2":{"1":"B1","2":"B2","3":"B3","4":"B4"},"option3":{"1":"C1","2":"C2","3":"C3","4":"C4"},"option4":{"1":"D1","2":"D2","3":"D3","4":"D4"},"correct":{"1":"1","2":"2","3":"3","4":"4"}}


Now when user click the button with id=1, all the values from array with index 1 should be shown, when user click the button with id=2, all the values from array with index 2 should be shown and so on.

Is there a better way to get the same output with a different logic?
If no, how do I compress this code?

Please Help
Thanks in advance :)

$.ajax({
url: "index.php",
type: "POST",
dataType: "json",
success: On_success,
error: On_error
});

function On_success(response){

for (var x = 1; x <= 4; x++){

$("#que" + x).html(response.questions[x]);

for (var y = 1; y <= 4; y++) {
$("#op" + x + y).html(response["option" + y][x]);
}

//$("#cor" + x).html(response.correct[x]);
}

}
function On_error(data){
console.log(data);
}

function click(){

$(document).ready(function(){
$("#pag" + this.dataset.section).show();
});

}

$(document).ready(function(){

$("#pag2").hide();
$("#pag3").hide();
$("#pag4").hide();

$("#1").click(click);
$("#2").click(click);
$("#3").click(click);
$("#4").click(click);
});

<body>

<div id="pag1">
<p id="que1"></p>
<p id="op11"></p>
<p id="op12"></p>
<p id="op13"></p>
<p id="op14"></p>
<p id="cor1"></p>
</div>

<div id="pag2">
<p id="que2"></p>
<p id="op21"></p>
<p id="op22"></p>
<p id="op23"></p>
<p id="op24"></p>
<p id="cor2"></p>
</div>

<div id="pag3">
<p id="que3"></p>
<p id="op31"></p>
<p id="op32"></p>
<p id="op33"></p>
<p id="op34"></p>
<p id="cor3"></p>
</div>

<div id="pag4">
<p id="que4"></p>
<p id="op41"></p>
<p id="op42"></p>
<p id="op43"></p>
<p id="op44"></p>
<p id="cor4"></p>
</div>

<ul class="pagination">
<li><button id="1" data-section="1">1</button></li>
<li><button id="2" data-section="2">2</button></li>
<li><button id="3" data-section="3">3</button></li>
<li><button id="4" data-section="4">4</button></li>
</ul>

</body>

Answer

You could use a loop to inject the HTML:

for (var x = 1; x <= 4; x++) {
  $("#que" + x).html(response.questions[x]);
  for (var y = 1; y <= 4; y++) {
    $("#op" + x + y).html(response["option" + y][x]);
  }
  $("#cor" + x).html(response.correct[x]);
}

And a more generalised click handler with a tweak to each button:

<button id="1" data-section="1"></button>

function click(){
  $("#pag1").hide();
  $("#pag2").hide();
  $("#pag3").hide();
  $("#pag4").hide();

  $("#pag" + this.dataset.section).show();

  // this could be made more efficient by not hiding the relevant section but just showing it, but may not make much difference.
}

$("#1").click(click); $("#2").click(click); $("#3").click(click); $("#4").click(click);