jquery eingebunden, aber es passiert nichts

bonaqua

Hallo,

ich stehe echt auf dem Schlauch ...

Ich wollte einen ganz einfachen Test machen, um über php und jquery Daten aus der MySql Datenbank zu holen.
Leider geht das innerhalb meines Wordpressthemes (responsive) nicht, d.h. es passiert einfach gar nichts.
Mit einem ganz einfachen Seitenaufbau (ohne das Wordpresstheme) funktioniert es problemlos.

Kann mir vielleicht jemand helfen und sagen, wo der Fehler liegt?

Meine Seite:

PHP

<?php


// Exit if accessed directly
if ( !defined('ABSPATH')) exit;


/**
 * Full Content Template
 *
   Template Name:  nochEinTest
 *
 * @file           nochEinTest.php
 * @package        Responsive 
 * @author         Emil Uzelac 
 * @copyright      2003 - 2011 ThemeID
 * @license        license.txt
 * @version        Release: 1.0
 * @filesource     wp-content/themes/responsive/nochEinTest.php
 * @link           http://codex.wordpress.org/Theme_Development#Pages_.28page.php.29
 * @since          available since Release 1.0
 */
get_header(); ?>




<div id="content-full" class="grid col-940">     
    <?php if (have_posts()) : ?>
        <?php while (have_posts()) : the_post(); ?>
        <?php get_template_part( 'loop-header' ); ?>


        <div>
            Category: <input type="text" id="category">
                      <input type="submit" id="category-submit" value="Search">
                      
            <div id="category-data"></div>


        </div>   
        
    <?php 
        endwhile; 
        get_template_part( 'loop-nav' ); 
    else : 
        get_template_part( 'loop-no-posts' ); 
    endif; 
    ?>  
      
</div><!-- end of #content-full -->


<?php get_footer(); ?>

Alles anzeigen

Ausschnitt aus header.php

PHP

<?php


// Exit if accessed directly
if ( !defined('ABSPATH')) exit;


/**
 * Header Template
 *
 *
 * @file           header.php
 * @package        Responsive 
 * @author         Emil Uzelac 
 * @copyright      2003 - 2013 ThemeID
 * @license        license.txt
 * @version        Release: 1.3
 * @filesource     wp-content/themes/responsive/header.php
 * @link           http://codex.wordpress.org/Theme_Development#Document_Head_.28header.php.29
 * @since          available since Release 1.0
 */
?>
<!doctype html>
<!--[if !IE]>      <html class="no-js non-ie" <?php language_attributes(); ?>> <![endif]-->
<!--[if IE 7 ]>    <html class="no-js ie7" <?php language_attributes(); ?>> <![endif]-->
<!--[if IE 8 ]>    <html class="no-js ie8" <?php language_attributes(); ?>> <![endif]-->
<!--[if IE 9 ]>    <html class="no-js ie9" <?php language_attributes(); ?>> <![endif]-->
<!--[if gt IE 9]><!--> <html class="no-js" <?php language_attributes(); ?>> <!--<![endif]-->
<head>






<meta charset="<?php bloginfo('charset'); ?>" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">


<title><?php wp_title('|', true, 'right'); ?></title>


<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />


<?php wp_enqueue_style('responsive-style', get_stylesheet_uri(), false, '1.9.3.1');?>
<?php wp_enqueue_script('jquery'); ?>


<?php wp_head(); ?>


<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="global.js"></script>




</head>


.....
.....

Alles anzeigen

global.js

Code

$(document).ready(function(){
    alert("eins");
    });


$('input#category-submit').on('click', function() {
    alert(1);
});

Die global.js liegt auf der selben Verzeichnisebene wie header.php und nochEinTest.php

Würde mich sehr über Eure Hilfe freuen!!!
DANKE!!!

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

bonaqua

Die global.js hab ich wie folgt geändert, aber ohne Erfolg:

Code

jQuery(document).ready(function() { 
alert("eins");     
}); 


jQuery('input#category-submit').on('click', function() {     
alert(1); 
});

bonaqua

So, nochmals ein neuer Versuch, leider "passiert" immer noch nichts.
Hier habe ich das Beispiel her: http://openenergymonitor.org/emon/node/107

Ohne Wordpress funktioniert auch alles wunderbar (genau wie das Beispiel), eingebunden geht es dann leider nicht mehr.

Ausschnitt aus header.php

PHP

...
<?php wp_enqueue_style('responsive-style', get_stylesheet_uri(), false, '1.9.3.1');?>


<?php wp_enqueue_script('jquery'); ?>


<?php wp_head(); ?>


</head>

Alles anzeigen

testseite.php (Template für meine Wordpresseite)

PHP

<?php


// Exit if accessed directly
if ( !defined('ABSPATH')) exit;


/**
 * Full Content Template
 *
   Template Name:  nochEinTest
 *
 * @file           nochEinTest.php
 * @package        Responsive 
 * @author         Emil Uzelac 
 * @copyright      2003 - 2011 ThemeID
 * @license        license.txt
 * @version        Release: 1.0
 * @filesource     wp-content/themes/responsive/nochEinTest.php
 * @link           http://codex.wordpress.org/Theme_Development#Pages_.28page.php.29
 * @since          available since Release 1.0
 */
get_header(); ?>






<div id="content-full" class="grid col-940">     
    <?php if (have_posts()) : ?>
        <?php while (have_posts()) : the_post(); ?>
        <?php get_template_part( 'loop-header' ); ?>
<div>
            
            
<h2> Produktkatalog </h2>
  <h3>Output: </h3>
  <div id="output">this element will be accessed by jquery and this text replaced</div>


  
  
  <script id="source" language="javascript" type="text/javascript">
 
   $(function () 
   {
    //-----------------------------------------------------------------------
    // 2) Send a http request with AJAX http://api.jquery.com/jQuery.ajax/
    //-----------------------------------------------------------------------
    $.ajax({                                      
      url: 'api.php',                  //the script to call to get data          
      data: "",                        //you can insert url argumnets here to pass to api.php
                                       //for example "id=5&parent=6"
      dataType: 'json',                //data format      
      success: function(data)          //on recieve of reply
      {
        var id = data[0];              //get index
        var vname = data[1];           //get category
        var vdata = data[2];           //get dd_val
        //--------------------------------------------------------------------
        // 3) Update html content
        //--------------------------------------------------------------------
        $('#output').html("<b>index: </b>"+id+"<b> category: </b>"+vname + "<b> dd_val: </b> " + vdata); //Set output element html
        //recommend reading up on jquery selectors they are awesome 
        // http://api.jquery.com/category/selectors/
      } 
    });
  }); 


</script>
    
        </div>
        
    <?php 
        endwhile; 
        get_template_part( 'loop-nav' ); 
    else : 
        get_template_part( 'loop-no-posts' ); 
    endif; 
    ?>  
      
</div><!-- end of #content-full -->


<?php get_footer(); ?>

Alles anzeigen

Die api.php bzw. DB.php wie im Beispiel, nur eben mit meiner DB-Anbindung.

Ich würde mich echt sehr über Hilfe freuen ... weiß nämlich nicht mehr weiter ... :-(
Binde ich etwas falsch (oder gar nicht ein)???

Ich hoffe echt auf Euch ... DANKE!!!

yakdeniz

Hi,
ich weis zwar nicht ob es einen Unterschied macht. Aber in der Regel wird die JS in der functions.php eingebunden.

Und JQuery Wird von Wordpress Standardmäßig eh eingebunden.
Das heißt du musst deine JS Datei nach der Query einbinden und schon kannst du die Funktionen nutzen

z.B.
wp_enqueue_script( 'plugins', get_template_directory_uri() . '/js/plugins.js', array( 'jquery' ), null, true );
heir sagst du quasi das die plugins.js nach der jquery von Wordpress eingebunden.

bonaqua

yakdeniz
Danke für den Hinweis, so hat es geklappt!

Nun ist noch mein Problem, wie ich für den Request meine eigene .php File verwenden kann.
In allen Beispielen die ich gefunden habe, wir die admin-ajax.php verwendet.
Wenn ich ebenfalls diese Datei verwende, kann ich immerhin Aktionen auslösen, aber wie mache ich dann den DB Zugriff auf meine api.php? Einfach nur

Code

url: 'api.php',

aufzurufen geht leider nicht bzw. es wird nichts ausgeführt.

my-script.js

Code

jQuery(document).ready(function(){
     jQuery('#json_click_handler').click(function(){
     doRequest();
     });
});




function doRequest(){
     // here is where the request will happen
     jQuery.ajax({
          url: 'http://intranet.pecon.local/wordpress-testing/wp-admin/admin-ajax.php',
          data:"",
          dataType: 'json',
          success:function(data){
                 // our handler function will go here
                 // this part is very important!
                 // it's what happens with the JSON data
                 // after it is fetched via AJAX!
                 
                 var id = "EINS";              //var id = data[0];
                 var vname = "ZWEI";           //var vname = data[1];
                 $('#output').html("<b>id: </b>"+id+"<b> name: </b>"+vname);
                 alert('OK');
                             },
          error: function(errorThrown){
               alert('Fehler');
               console.log(errorThrown);
          }
           
 
     });
 
}

Alles anzeigen

Hier nochmal meine api.php

PHP

<?php 
  //--------------------------------------------------------------------------
  // 1) Connect to mysql database
  //--------------------------------------------------------------------------
  include 'DB.php';
  $con = mysql_connect($host,$user,$pass);
  $dbs = mysql_select_db($databaseName, $con);


  //--------------------------------------------------------------------------
  // 2) Query database for data
  //--------------------------------------------------------------------------
  $result = mysql_query("SELECT * FROM $tableName");            //query
  $array = mysql_fetch_row($result);                            //fetch result    


  //--------------------------------------------------------------------------
  // 3) echo result as json 
  //--------------------------------------------------------------------------
  echo json_encode($array);


?>

Alles anzeigen

Willkommen! Melden Sie sich an oder registrieren Sie sich.

jquery eingebunden, aber es passiert nichts

Jetzt mitmachen!