Home / Questions / 259628
Accepted
Damian Garcia
Asked: 2020-05-01 05:32:17 +0800 CST 2020-05-01 05:32:17 +0800 CST

Actual content not displayed in source code when working with AJAX

  • 772

I am working with HTML5, PHPand JQuerytogether with AJAX. Within a form I have 5 input type="radio"which changes the content of the page divdepending on which is selected. They are called "All", "Informatics", "Networks", "Multimedia" and "BD/Programming". It is a glossary and the content to show are the terms that correspond according to the selected input. It is a way to show the user a list (ordered by alphabet) of all the terms that are in the glossary.

By default, when the page is loaded, the content starts with the one that says "All" (which brings all the terms that are in the other four sections: Computing , Networks , Multimedia and BD/Programming , that is, all). The user, as you will notice, can filter the content by selecting sections; for example, if you select "Networks" it will only bring the terms that are in that section and so on with the other categories.

All this works almost perfectly, it does not refresh the entire page when using AJAXit and also the content is displayed correctly to the user. The problem is when you want to see the source code of the page ( Ctrl+u ). It always shows me the same thing. I mean that in that source code the terms that are seen are the ones that were searched for at the beginning, the one that was selected by default (input that says "All") .

For example: if I select the input that has "Networks", all the terms that correspond to that category are displayed on the page, but if I want to see the source code, something else is seen there . You see the same terms as when the page was first loaded ("All" input). I have already tried to empty the div with $(".Secc").empty()and also do a load with $('.Secc').load();but nothing happens, besides load()it duplicates the page for me.

Actually, I wouldn't mind if I didn't have to use those terms that you see on the page for something else, but I do have to use them for something else. It is that these terms are shown as links ( <a class="GloIT" href="ActiveX" title="ActiveX">ActiveX</a>, <a class="GloIT" href="Fragmentar" title="Fragmentar">Fragmentar</a>, <a class="GloIT" href="SDRAM" title="SDRAM">SDRAM</a>...) and they will change depending on the section that the user chooses. And when one of these links is clicked, it should show the definition of that term in the corresponding category. That's why it's important that they display well, both on the page and in the source code.

Here I pass the code that I have, which is all on the same page (the formulario, the of PHPand the of JQuery) which is called TerminosIT.php:

  <form id="frRadio" method="post" action="">
    <fieldset>
     <legend>Selección por secciones: </legend>
     <label for="radio-1">Todas</label>
     <input type="radio" name="radio" id="radio-1" value="0">
     <label for="radio-2">Informática</label>
     <input type="radio" name="radio" id="radio-2" value="1">
     <label for="radio-3">Redes</label>
     <input type="radio" name="radio" id="radio-3" value="2">
     <label for="radio-4">Multimedia</label>
     <input type="radio" name="radio" id="radio-4" value="3">
     <label for="radio-5">BD/Programación</label>
     <input type="radio" name="radio" id="radio-5" value="4">
    </fieldset>
  </form>

In PHPI have:

<div class="Secc">
<?php 
if (isset($_POST['radio'])){ 
    $Sel=$_POST['radio'];
    switch($Sel){ 
        case 0:
            Todas($cxn,$Let,$Band,$Comp);
            break;
        case 1:
            Informatica($cxn,$Let,$Band,$Comp);
            break;
        case 2:
            Redes($cxn,$Let,$Band,$Comp);
            break;
        case 3:
            Multimedia($cxn,$Let,$Band,$Comp);
            break;
        case 4:
            Programacion($cxn,$Let,$Band,$Comp);
            break;
    }// end switch
}else{Todas($cxn,$Let,$Band,$Comp);}?>
</div>

He <div class="Secc">is where everything will go showing. I don't know if it's worth putting the code that has each function that is inside each casein PHP. But there basically, by means of MySQL, it searches the corresponding tables for the terms to show them later inside the tag <a...>...</a>.

And lastly about JQuery:

$(function() {
    $("input").checkboxradio();
    $("#radio-1").attr("checked","checked").change();
     $("input").on("change", function(e){
        e.preventDefault();
        //$(".Secc").hide();
        $(".Secc").empty();
        var dataString = $("#frRadio").serialize() + '&' + encodeURI("radio")+ '='+ encodeURI($("input[name$='radio']:checked").val());
         $.ajax({
            url: "TerminosIT.php",
            type: "POST",
            data: dataString,
            cache: false,
            success: function (data) {
                //$(".Secc").show();
                var $response = $.parseHTML(data);
                $response = $('.Secc', $response).html();
                $(".Secc").html($response);
                }
            });
        return false;
     });
  });

In conclusion, in the source code you always see the same thing (what was loaded the first time) . Maybe it's a AJAXproblem and there is no solution. If I don't have a solution, I'm going to have to do it, although I wouldn't like it, without using AJAXand reloading the entire page when some of the checkboxradio. Maybe they know a better way.

Alternative : Maybe I can fix it by adding certain attributes to the tag <a>from JQuery. For example, when the "Networks" section is selected, the links remain in this way <a class="GloIT" href="IP" data-id="2" data-seccion="Redes" title="IP">IP</a>, in "Multimedia" <a class="GloIT" href="CD" data-id="3" data-seccion="Multimedia" title="CD">CD</a>, etc. Adding those data-as appropriate

But as I already said in the source code it puts it like this <a class="GloIT" href="IP" title="IP">IP</a>, <a class="GloIT" href="CD" title="CD">CD</a>this is without the data-, because when selecting "All" those data-do not go and they are only added when any of the other four sections ("Computers", "Networks", "Multimedia" and "BD/Programming").

So, since what interests me here is the data-idand the data-seccion, I could, through a switch{...}(to know which section to work on) and a for, go through all the tags ( <a>that have only the class="GloIT") and add those attributes ( data-) and remove them if necessary. select "All". Does anyone know how I could do that from JQuery? Is something like this possible?

php

1 Answers

  1. Best Answer

    In the end the solution was to separate the . Now I have what I want to be done from the server Enlaces.phpand then the other file that is TerminosIT.html(here is the form with the radios and at the end all the code of JQuery).

    Here is a part of the code Enlaces.phpwithout putting that each function does:

    <?php
if (isset($_POST)){ 
    if (empty($_POST['radio'])) {
        Todas($cxn,$Let,$Band,$Comp);
    } else {
        $Sel=$_POST['radio'];
        switch($Sel){ 
            case 0:
                Todas($cxn,$Let,$Band,$Comp);
                break;
            case 1:
                Informatica($cxn,$Let,$Band,$Comp);
                break;
            case 2:
                Redes($cxn,$Let,$Band,$Comp);
                break;
            case 3:
                Multimedia($cxn,$Let,$Band,$Comp);
                break;
            case 4:
                Programacion($cxn,$Let,$Band,$Comp);
                break;
        }// end switch
    }
}else{Todas($cxn,$Let,$Band,$Comp);}
?>

    And now, the most important thing and where I had the problem, the file TerminosIT.html: in the part of the form, the div where the content will be displayed ( <div class="Secc"></div>) and at the end all the code JQuerythat is generated in the "change" event of the inputs selected (the spokes): 

    <!doctype html>
<html>
<head>
<title>Listado completo de términos</title>
</head>
<form id="frRadio" method="post" action="Include/Enlaces.php">
    <fieldset>
        <legend>Selección por secciones: </legend>
        <label for="radio-1">Todas</label>
        <input type="radio" name="radio" id="radio-1" value="0">
        <label for="radio-2">Informática</label>
        <input type="radio" name="radio" id="radio-2" value="1">
        <label for="radio-3">Redes</label>
        <input type="radio" name="radio" id="radio-3" value="2">
        <label for="radio-4">Multimedia</label>
        <input type="radio" name="radio" id="radio-4" value="3">
        <label for="radio-5">BD/Programación</label>
        <input type="radio" name="radio" id="radio-5" value="4">
    </fieldset>
</form>
<div class="Secc"></div>
<body>
<script>
  $(function() {
    $("input").checkboxradio();
    $("#radio-1").attr("checked","checked").change();
    $("input").on("change", function(e){
        e.preventDefault();
         var dataString = $("#frRadio").serialize() + '&' + encodeURI("radio")+ '='+ encodeURI($("input[name$='radio']:checked").val());
         $.ajax({
            url: "Include/Enlaces.php",
            type: "POST",
            data: dataString,
            cache: false,
            success: function (data) {
                var $response = $.parseHTML(data);
                $response = $('.Secc', $response).html();
                }
            })
            .done(function($response) {
                $(".Secc").html($response);
                let linksConDataId = document.querySelectorAll("a[data-id]");
                for (let x=0;x<linksConDataId.length;x++){
                    linksConDataId[x].addEventListener("click", function() {
                        localStorage.setItem("data-id", this.dataset.id);});
                    linksConDataId[x].addEventListener("contextmenu", function() {
                        localStorage.setItem("data-id", this.dataset.id);});
                }
            });
        return false;
     });
  });
</script>
</body>
</html>

    A bit of explanation : The use of $("#radio-1").attr("checked","checked").change();is because I want my first radio ( #radio-1which would be "All") to start selected, so this way of moving I show something to the user when he loads the page. Then in .doneinside the job with AjaxI show the content in the div ( <div class="Secc"></div>).

    What comes after is a code that I had to put for myself data-id(which I use to differentiate the links) and thus, when selecting each link, it takes me to the corresponding category.

    • 0