0

I try to integrate a PHP Site with a "depending dropdown List" (using Javascript) into my Wordpress site. When I run the PHP Site "outside" Wordpress (which means the whole URL like: "www.xxx.com/wp-content/themes/lawyerplus/upload.php") then everything works as expected - which means the "dependend dropdown lists" will be filled, but when I run the same page within wordpress: www.xxx.com/upload/ then the javascript will not run, and so the lists will not be filled.

So the Question will be: How can I tell Wordpress, that it should run the Javascript files inside the PHP Files which will be integrated using the Wordpress Plugin "MaGiKS Proper PHP Include"?

Here is the part in upload.php where the Rubrik(Category) will be called. This is working, so the Category (Rubrik) will be showed.

 <tr>
 <td>Rubrik*</td>
 <td><? include "test.php"; ?></td>
 </tr

Here is the content of test.php

 <?php include('config.php'); 

    mysql_query("SET CHARACTER SET 'utf8'");
    $query_parent = mysql_query("SELECT DISTINCT cat_id, category FROM category   order by category asc") or die("Query failed: ".mysql_error());
    ?>
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
   <title>Dependent DropDown List</title>
<script type="text/javascript" src="http://austrianweddingaward.at/wp-content/themes/lawyerplus/js/jquery.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
    
 jQuery("#parent_cat").change(function() {
  jQuery(this).after('<div id="loader"><img src="http://www.austrianweddingaward.at/wp-content/themes/lawyerplus/img/loading.gif" alt="loading subcategory" /></div>');
  jQuery.get('http://www.austrianweddingaward.at/wp-content/themes/lawyerplus/loadsubcat.php?parent_cat=' + jQuery(this).val(), function(data) {
   jQuery("#sub_cat").html(data);
   jQuery('#loader').slideUp(200, function() {
    jQuery(this).remove();
   });
  }); 
    });

});
</script>
</head>

<body>
<form method="get">
 <label for="category">Hauptkategorie</label>
    <select name="parent_cat" id="parent_cat">
        <?php while($row = mysql_fetch_array($query_parent)): ?>
        <option value="<?php echo $row['cat_id']; ?>"><?php echo $row['category']; ?></option>
        <?php endwhile; ?>
    </select>
    <br/><br/>
  
    <label>Unterkategorie</label>
    <select name="sub_cat" id="sub_cat"></select>
</form>
</body>
</html>

Here is the content of loadsubcat.php

 <?php 
include('config.php');


$parent_cat = $_GET['parent_cat'];
echo $parent_cat;


mysql_query("SET CHARACTER SET 'utf8'");
$query = mysql_query("SELECT * FROM subcategory WHERE cat_id = '$parent_cat'");
echo $query;
while($row = mysql_fetch_array($query)) {
 echo "<option value='$row[id]'>$row[subcategory]</option>";
}
?>

Kind Regards for any suggestions.

Stefan

Bosstone
  • 189
  • 1
  • 12
  • 8
    You will need to show some sample code in order for people to help you. Otherwise, they cannot help debug your issue. – Relequestual Jul 20 '15 at 12:16
  • 1. Did you comment the two echo lines in loadsubcat.php? Faulty html could be a reason for the browser not to show anything. 2. Did you check the javascript console? Are you doing a cross-domain request (which would be blocked by ex. Chrome)? -> https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS and http://stackoverflow.com/questions/5351236/javascript-cross-domain-allow-other-domains – Filou Jul 20 '15 at 16:23
  • Hi, thank you for replying. Please see at: http://www.austrianweddingaward.at/wp-content/themes/lawyerplus/upload.php - there it is working. When you look at: www.austrianweddingaward.at/upload and scroll to the bottom, there you will see, that it is not working within Wordpress... Kind Regards, Stefan – Bosstone Jul 20 '15 at 20:59

1 Answers1

0

Hi so looking at the actual generated source code of the HTML page the error becomes clear: You have html tags in your javascript code. Actually you will find the same thing happening on several of your blog pages. Once you fix that, everything should work out.

I would guess that you are using the wordpress text editor to inject the javascript, but that seems to have caused some problems.

You could quickly figure this out when opening the javascript console / developer tools of your favourite development browser.

<head><br />
<meta charset="utf-8"><br />
<title>Dependent DropDown List</title><br />
<script type="text/javascript" src="http://austrianweddingaward.at/wp-content/themes/lawyerplus/js/jquery.js"></script><br />
<script type="text/javascript">
jQuery(document).ready(function() {</p>
<p> jQuery("#parent_cat").change(function() {
        jQuery(this).after('
<div id="loader"><img src="http://www.austrianweddingaward.at/wp-content/themes/lawyerplus/img/loading.gif" alt="loading subcategory" /></div>
<p>');
        jQuery.get('http://www.austrianweddingaward.at/wp-content/themes/lawyerplus/loadsubcat.php?parent_cat=' + jQuery(this).val(), function(data) {
            jQuery("#sub_cat").html(data);
            jQuery('#loader').slideUp(200, function() {
                jQuery(this).remove();
            });
        }); 
    });</p>
<p>});
</script><br />
</head></p>
Filou
  • 521
  • 2
  • 7
  • Hi, I am loading this test.php from my upload.php which will be integrated via wordpress plugin, so no code will be injected thru wordpress... – Bosstone Jul 21 '15 at 17:45
  • ah ok, sorry.. Well, for some reason wordpress is adding those tags (why, actually?..-> https://wordpress.org/support/topic/get_the_content-with-formatting ). It should be possible to deal with this by putting the inline javascript into a seperate file in your theme's folder and then just include the file the same way jquery is referenced (or you could fiddle with your theme files, it seems) – Filou Jul 21 '15 at 18:17