"onclick" method does not work on files added with "? php require?

Question

"onclick" method does not work on files added with "? php require?

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

Well my problem is this, I have a website of a real estate company. It has a Sidebar on the right with buttons to enter the different sections, the "main" part which is the one on the left and occupies 70% of the screen is where a display of all the houses for sale is made, called by the onclick="" method which in turn executes a function JQuery + AJAX which is the following:

function cargarDoc(url) {
$.ajax({
    url : url,
    dataType: "text",
    success : function (data) {
        $(".1").html(data);
    }
});}

And the html code is the following:

<aside>
        <div class="widget">
            <p class="s" href="" onclick="cargarDoc('aptoarriendo.php');cargarDoc2('aptoventa.php');"><i class="fa fa-building-o"></i>Apartamentos</p>
            <p class="s" href="" onclick="cargarDoc('casaarriendo.php');cargarDoc2('casaventa.php');"><i class="fa fa-home"></i>Casas</p>
            <p class="s" href="" onclick="cargarDoc3('calle11con12.html')"><i class="fa fa-home"></i>LOL</p>
        </div>
    </aside>

So far so good, the list of houses is added successfully in the main section as seen in the following image:

Then, when doing Hover in a house, a button is displayed that says "Information" and the idea is that when you click, the onclick="" method updates that main section, with another html file that shows detailed information of the house, but, as much as I add the onclick="" with its respective function, absolutely nothing happens when clicking. To test, I also put a "LOL" button which for some reason, if you update the section as you should do the button of the image. My theory is that Sidebar works by being a separate section that will be updated, and in the section itself does not work because it could not update itself. Let's see if someone hits the spot.

Thank you very much in advance and greetings!

javascript html php css

asked by Nicolas Echeverry 22.01.2017 в 20:17

source

2 answers

Problems with layout of a list findAll Query by example Spring Data MongoDB. I do not get all the results

score 0 · Answer 1

The reason is because event listeners are associated when the document is loaded in the parsing stage of the document. So, when you add the HTML dynamically, you need to somehow re- parse the scripts so that the events are correctly associated with the recently added HTML.

What you can do is:

For each template have a script tag.

Once the HTML has been added, re-evaluate the scripts using eval .

Use the dynamic loading script pattern.

In my opinion, the best way is option two and the worst is option 3. The problem with using eval is that it is not safe and can be used for malicious purposes.

Loading scripts dynamically

It's as simple as creating a script element and putting the script address in the src .

function loadScript (fileurl) {
  let script = document.createElement('script');
  script.src = fileurl;
  document.body.append(script);
}

In the success of your AJAX request, you just have to insert the script for that document:

success : function (data) {
  $(".1").html(data);
  loadScript('myscript.js');
}

Evaluating scripts on demand

This is the worst option but if you do not care much about security it may be useful.

let scripts = document.getElementsByTagName('script')
for (let i=0; i<scripts.length; i++) {
    eval(scripts[i].innerHTML);
}

score 0 · Answer 2

Notice that you have a  with href, this property is for <a> . If you use Jquery you can try the following ...

At  you should add a property data-url = "url-donde-ir.php" . For example:
Apartamentos

and the function would be ...

function cargarDoc(url) { $.ajax({ url : url, dataType: "text", success : function (data) { $(".1").html(data); } });} $(document).on("click",".s",function(){ var url = $(this).attr("data-url"); cargarDoc(url); }