1

One of our web applications is a page that takes in a serial number and various information is returned and displayed to the user. The serial is passed via AJAX, and based on the response, one of the following can happen -

  • An error message is shown
  • A new form replaces the previous form

Now, the way I am handling this is to use jQuery to destroy (using $.remove()) the table that displayed the initial serial form, then I'm appending another html table that contains another form. Right now I am including that additional form as part of the html source, and just setting it to display:none, then using jQuery to show it when appropriate. However, I don't like this approach because if someone views source on the page, they can see that table html code that is not being displayed.

My next thought would be to use AJAX to read in another HTML file, and append it that way. However, I am trying to keep down the number of files this project uses, and since most pages in our project will use AJAX, I could see a case where there are multiple files containing HTML snippets - and that feels sloppy to me.

What is the best way to handle a case where multiple html elements are being shown and removed with jQuery?

  • 1
    Why are you worried that the user might see all the tables? And why is it 'no way you're removing it' - is the data not saved yet until the last form? – Spork Aug 16 '13 at 21:31
  • I don't understand your reference to 'no way you're removing it'. But the idea is that a person only sees the subsequent forms after they have submitted a serial number that fits that requirement - i.e. serial is submitted first, if it fits the proper criteria another form needs to be shown to the user – JRizz Aug 16 '13 at 21:47
3

using echo and .html() are potential XSS vectors if used with any kind of user input ( like your serial number).

I would recommend using client side templating like mustache js.

$.ajax({
  url: "foo.php",
  type: "post",
  data: values,
  success: function(data){
      var template = $("#formTemplate");
      var html = Mustache.to_html(template, data);
      $('#myDiv').html(html);
  },
  error: function(error){
      "<p>{{error}}</p>";
       var html = Mustache.to_html(template, 
          {'error' : error}
       );
       $('#myDiv').html(html);
  }
}

This method requires you to implement "formTemplate" as a mustache template but gives three advantages

  • Mustache performs escaping to prevent XSS attacks
  • HTML and templates are now cachable (only foo.php changes)
  • Separates presentation from data
1

I've done something like this by sending the new HTML with the response in a JSON object. Something like this question.

echo '{"html": "<p>I\'m the markup</p>"}';

Then replacing the HTML like this:

$.ajax({
    url: "foo.php",
    type: "post",
    data: values,
    success: function(data){
        $("#myDiv").html(data.html);
    }
});
1

Yes this is right way , you can user to avoid IE problem

echo '<p>this is your html</p>'

Js code

$.ajax({
url: "ajax.php",
type: "post",
data: values,
success: function(data){
    $("#myDiv").html($.trim(data));
}})
1

Don't be afraid of more HTML files with specific responsibilities. Even if you use a js template engine, I would still suggest separating these "snippets" into their own files. When changing a form, you shouldn't need to worry about the serial entry markup. Separation of concerns applies to UI components too.

0

You can use the jQuery beforeSend function and clear first any elements that you want to update

sample code

json response:

    var formData = {
        param1: value1,
        param2: value2
    };

    $.ajax({
        type: "POST",
        url: 'your_query.php',
        data: formData,
        dataType: "json",
        beforeSend: function() {
            // #msg is div for example
            $('#msg').html("your notification here to start the process");

            // clear element first before updating
            $('#element_to_update').html("");
            $('#error_element').html("");
        },
        success: function(response) {
            // response.success will evaluate if true or false from server side
            // response.msg is from server side response message

            $('#msg').html("<p>process done here</p>"); // p tag
            if (response.success == true) {
                $('#element_to_update').html(response.msg);
                // any process to execute
            } else {
                $('#error_element').html(response.msg);
                // any process to execute
            }

        }
    });

simple response or echo from server side

$.ajax({
    type: "POST",
    url: 'your_query.php',
    data: formData,
    beforeSend: function() {
        // #msg is div for example
        $('#msg').html("your notification here to start the process");
    },
    success: function(response) {
        // response is from server side response
        $('#msg').html("<span>process done here</span>"); // span tag
        $('#element_to_update').html(response);
    }
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.