Reputation: 1

Combining two Jquery form elements separately working but not together?

I am trying to build a form with Jquery-Elements (sliders). Also I added a Jquery-Plugin which gives me a sophisticated drowpdown-element. Both are working fine as long as they are in separated files. When I merge them and the needed ressources in the header section, the sliders or the dropdown is not display. The merge file looks like attached and crome console gives the following error:

Uncaught TypeError: Object [object Object] has no method 'selectList'

Looks like somehow the resources in the header overrides itself? Could you help me?

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Eingabe</title>




  <link rel="stylesheet" type="text/css" href="http://web0.v1364.ncsrv.de/devscan/jqueryselectlist/css/selectlist.css" >
  <script type="text/javascript" src="http://web0.v1364.ncsrv.de/devscan/jqueryselectlist/scripts/jquery.min.js"></script>
  <script type="text/javascript" src="http://web0.v1364.ncsrv.de/devscan/jqueryselectlist/scripts/jquery.selectlist.pack.js"></script>

  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" >
  <style>#slider { margin: 10px; }  </style>
  <script src="http://code.jquery.com/jquery-1.9.0.js"></script>
  <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script> 



  </head>

  <body>

<h1>Eingabe Suchauftrag</h1>

<table border="1">
  <tr>
    <td>Wo</td>
    <td>
    <select name="Stadt" size="1" onchange="fuellestadteile(this)">
      <option value="6">Frankfurt</option>
      <option value="7">Stuttgart</option> 
    </select>
    </td>

    <td>


    </td>
  </tr>

  <tr>
    <td>Zimmer Minimum:</td>
    <td><div id="sliderzimmer"></div></td>
  </tr>

  <tr>
    <td>Preisspanne:</td>
    <td><div id="slider-range"></div></td>
  </tr>

    <tr>
    <td>Vor- Nachname</td>
   <td><input type="name"/></td>
  </tr>
   <tr>
    <td>Emailadresse</td>
    <td><input type="email"/></td> 
  </tr>
  <tr><td colspan="2"><button type="button">Abschicken!</button><td></tr>
</table>


<p>Dein Suchauftrag:</p>
Ich suche in Frankfurt eine Wohnung
mit mindestestes  <input type="text" id="anzahlzimmer" style="border: 0; color: #f6931f; font-weight: bold;" />Zimmer die im Monat 
<input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" />
kostet.
Meine Emailadresse lautet: 





<!--<label for="anzahlzimmer">Price range:</label></p>
<label for="anzahlzimmer">Donation amount ($50 increments):</label></p>
--> 


<script>
$( "#slider" ).slider();
</script>




<script>
// Anzahl Zimmer
$(function() {
    $( "#sliderzimmer" ).slider({
      min: 1,
      max: 5,
      step: 1,
      value: 3,
      slide: function( event, ui ) {
        $( "#anzahlzimmer" ).val( ui.value );
      }
    });
    $( "#anzahlzimmer" ).val( $( "#sliderzimmer" ).slider( "value" ) );
  });
  </script>



 <script>
 //Preis
  $(function() {
    $( "#slider-range" ).slider({
      range: true,
      min: 0,
      max: 3000,
      step: 50,
      values: [ 800, 1200 ],
      slide: function( event, ui ) {
        $( "#amount" ).val(ui.values[ 0 ] + " EUR - " + ui.values[ 1 ]+" EUR" );
      }
    });
    $( "#amount" ).val($( "#slider-range" ).slider( "values", 0 ) +
      " EUR - " + $( "#slider-range" ).slider( "values", 1 ) +" EUR" );
  });


  </script>



  <script>
   function uebertrage(wo,zimmerpreismin,zimmerpreismax,zimmeranzahl,vorname,nachname, email)
   {
       alert('Uebertrage '+wo+' '+zimmerpreismin+' '+zimmerpreismax+' '+zimmeranzahl+' '+vorname+' '+nachname+' '+email);
       $.ajax({
           type: "POST",
           cache: false,
           url: "form_process.php",
           data: "wo="+wo +"&zimmerpreismin="+zimmerpreismin+"&zimmerpreismax="+zimmerpreismax+"&zimmeranzahl="+zimmeranzahl+"&vorname="+vorname+"&nachname="+nachname+"&email="+email,
           /*data: { variable2: "variable2" },*/
           /*data: dataString,*/
           success: function(msg){
               alert("Success! "+msg);
               /*alert(variable2);*/
           }
       });

       }


   function validateEmail(email) {
        var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
        return emailReg.test( email );
    }

    var clicked = jQuery("button");

    clicked.click(function() {
       var wo="Frankfurt";

        var zimmerpreismin = $("#slider-range").slider("values", 0); 
        var zimmerpreismax = $("#slider-range").slider("values", 1);
        var zimmeranzahl = $("#sliderzimmer").slider("value");  
        var name  = jQuery("input[type='name']").val();

        var teile = name .split(" "); 
        var vorname = teile[0];
        var nachname= teile[1];


        var email = jQuery("input[type='email']").val();


        ( !validateEmail(email) ) ? alert('Ungültige Emailadresse bitte korrigieren') : alert("Richtige Addy und Zimmerpreismin "+zimmerpreismin+email+name) 

                    uebertrage(wo, zimmerpreismin,zimmerpreismax,zimmeranzahl, vorname,nachname, email);    
                    });

  </script>


  <script type="text/javascript">
function fuellestadteile(obj)
{
alert ('Hilfe'+obj.value);
}
</script>



<?php

include("/home/www/web0/html/devscan/private/mylibaryconnect.php");
$connID = connect_to_mylibrary();

$citychoice='6';
$databaseSelector="usr_devscan";
$query=mysql_db_query($databaseSelector,"SELECT location_internal_id , location_name FROM Locations WHERE location_internal_id LIKE '$citychoice%' ORDER BY location_internal_id ASC")or die(mysql_error());
$row_query = mysql_fetch_array($query);
$totalRows_query = mysql_num_rows($query);

while ($row_query = mysql_fetch_assoc($query)) {
    $dropdownlist[] = array($row_query['location_internal_id'],$row_query['location_name']);
}

?>


<select id="stadtteile" multiple="multiple" name="languages[]"  title="Stadtteile">

<?php
foreach ($dropdownlist as $zeile ) {
//ACHTUNG DER ERSTE DATENEINTRAG WIRD NICHT ANGEZEIGT ARRAYPROPBLEM?
echo '<option value="'.$zeile[0].'">'.$zeile[1].'</option>';

 } ?>

</select>



<script type="text/javascript">
  //$(document).ready(function () {
    $(function() {
    $('select#stadtteile').selectList({ sort: true });
  });
</script>

</body>
</html>

Upvotes: 0

Answers (2)

Anujith

Reputation: 9370

Load jQuery & jQuery UI first.. Also remove the duplucation of jQuery library..

You have :

 <script type="text/javascript" src="http://web0.v1364.ncsrv.de/devscan/jqueryselectlist/scripts/jquery.min.js"></script>

and

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

Remove one..(I would suggest to keep latest..)

Former is a minified version of 1.8.0

Upvotes: 0

mattmanser

Reputation: 5796

They have to go under the jQuery script tag. You have to load jQuery & jQuery UI first.

Upvotes: 2

Combining two Jquery form elements separately working but not together?

Answers (2)

Related Questions