How to add a php include statement with JQuery or AJAX

Question

So I am trying to add two SVG's on button clicks. I have 2 buttons 'male' and 'female' and with each button an SVG is loaded.

At first the male SVG is loaded by default and on click it has to change.

This is the HTML Code.

        <div id="svgDivMale"> 
            <?php include"shirtBasic.svg" ?>
        </div>

This is how it should look after click.

        <div id="svgDivFemale"> 
            <?php include"girlShirtSVG.svg" ?>
        </div>

I have read on other questions on stack overflow that this is not quiet possible through Jquery but there must be some way.

Thanks.

php runs on the server, JS runs on the client. you cannot have js change an include, because by the time the js is even ready to do this sort of thing, the php stuff on the server will have shutdown/terminated. — Marc B, Sep 03 '14 at 19:49
could you load both and just hide one or the other based on button clicks? — Smern, Sep 03 '14 at 19:50
@MarcB is right, if you want to include something with jQuery use load() http://api.jquery.com/load/ — , Sep 03 '14 at 19:50
Take a look at this question - I think it will set you in a better direction for this. http://stackoverflow.com/questions/11401500/how-do-i-load-a-svg-file-thats-been-generated-with-php — MadTurki, Sep 03 '14 at 19:51
@LeventeNagy this is correct `$(#femaleDiv).load(localhost/anyFile.svg)` — Ayub Bukhari, Sep 03 '14 at 19:53

score 1 · Accepted Answer · answered Sep 03 '14 at 20:04

You are a bit over complicating it, not a problem but it is easy.

Why i offered you jQuery load because i thought you want to mix javascript with php.

So just manipulate the DOM.

You want the male shown at first right?

So in your html keep it as it is

<div id="svgDivMale"> 
  <?php include"shirtBasic.svg" ?>
</div>    

<div id="svgDivFemale"> 
   <?php include"girlShirtSVG.svg" ?>
</div>

Hide the SVG for the female

css

#svgDivFemale {
  display: none;
}

And from here you just need to create a button, like i dont know

Basic example

html button

<button id="showMale">Show male SVG</button>
<button id="showFemale">Show female SVG</button>

jQuery

    $('#showMale').on('click', function(){
        $('#svgDivMale').show();
        $('#svgDivFemale').hide();
    });

    $('#showFemale').on('click', function(){
        $$('#svgDivMale').hide();
        $('#svgDivFemale').show();
    })

wow, I am so stupid. I was applying the same CSS attribute to SVG file itself forgetting that it was actually an inline file. Thanks alot though :) — Ayub Bukhari, Sep 03 '14 at 20:09
Your not stupid, everybody makes minimal mistakes, please mark my answer if it was helpful, glad to help by the way :) — , Sep 04 '14 at 06:51

How to add a php include statement with JQuery or AJAX

1 Answers1