2017-11-16 2 views
2

Ich versuche, eine reduzierbare Sidebar mit einem Formular (Suchfeld und Absenden) für meine Website zu implementieren.jQuery mit jQuery mobile Steine ​​Formular Vorlage

Ich habe als Skript verwiesen:

https://code.jquery.com/jquery-1.11.3.min.js 

und

https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js 

jedoch in dieser Kombination die Form einfach gewohnt einreichen, sondern scheint es die GET-Parameter an die URL zu übernehmen und dann feuert preventDefault irgendwie. Es scheint, wie ich eine alte Version von jQuery bin mit, aber als ich versuchte, zu aktualisieren:

https://code.jquery.com/jquery-3.2.1.min.js 

ich bemerkte, dass mein collapsable Menü mehr nicht funktionieren und der komplette Stil ist gebrochen. Auch kann ich es nicht in eine Geige stecken, da sie meistens schon jQuery verwenden.

Probe 1 (kürzere Werke, sondern bilden auch nicht):

<html> 

<head> 
    <title>Test form</title> 
    <meta charset="utf-8"> 
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> 
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
</head> 

<body> 
    <div data-role="page" id="about"> 
    <div data-role="header"> 
     <h1>Header</h1> 
    </div> 
    <div data-role="main" class="ui-content"> 
     <div data-role="collapsible"> 
     <h1>Search</h1> 
     <form method="get"> 
      <input name="test" type="text"> 
      <button type="submit">Send</button> 
     </form> 
     </div> 
    </div> 
    </div> 
</body> 

</html> 

Probe 2 (Form funktioniert aber nicht zusammen):

<html> 

<head> 
    <title>Test form</title> 
    <meta charset="utf-8"> 
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
</head> 

<body> 
    <div data-role="page" id="about"> 
    <div data-role="header"> 
     <h1>Header</h1> 
    </div> 
    <div data-role="main" class="ui-content"> 
     <div data-role="collapsible"> 
     <h1>Search</h1> 
     <form method="get"> 
      <input name="test" type="text"> 
      <button type="submit">Send</button> 
     </form> 
     </div> 
    </div> 
    </div> 
</body> 

</html> 

Für die erste Probe auch ich versucht, deklarieren Sie eine Schaltfläche für den Eingabetyp anstelle von submit und triggern Sie sie manuell mit:

$('#submitbutton').click(function() { 
    $('#myform').submit(); 
}); 

Ohne Erfolg.

Vielen Dank im Voraus!

Antwort

1

mobile Version 1.4.5 ist nur für bestimmte ältere Versionen gesperrt und nicht auf ältere Versionen über 2.0

Lesen Sie mehr darüber hier, wenn Sie benötigen getestet: http://blog.jquerymobile.com/2013/02/20/jquery-mobile-1-3-0-released/.

Dies würde erklären, warum die Version 3.2.1 nicht mit Ihrer zusammenklappbaren Form funktioniert.

Inzwischen auf der Seite der Version 1.11.3, Nach der Entwickler-Konsole alles, was Sie tun müssen, ist laden Sie Ihr Formular auf einem Webserver, anstatt es lokal auf Ihrem Computer (C: /Folder/.html funktioniert nicht, müssen Sie Browser-Erweiterungen wie HTTPS oder http verwenden)

Ich hoffe, dass dies Ihnen hilft, da ich selbst kein professioneller Programmierer ist und einen Arbeitscode für Sie nicht aufkratzen kann.

+0

Ok danke, dies erklärt ein wenig, aber ich habe dies auf meinem Webserver und lokal mit dem gleichen Ergebnis \ - getestet: – ThexBasic

+0

vielleicht versuchen, Ihre jquery auf eine Version, die vor dem, was Sie derzeit verwenden, aber auch kompatibel mit die mobile jQuery? – boom

0

Es scheint, als hätte ich mich falsch eingeschätzt. Mit jQuery Mobile kommt eine Menge automatisch eingeführter Funktionen für z. Senden eines Formulars im Hintergrund mithilfe der XHR-Anforderung und nicht erneutes Laden der Site.

Imho sollten sie dies ein wenig klarer machen, da es mir schwer fiel, dieses Problem herauszufinden. Die Lösung ist: für `s oder‚s Sie nicht wollen, werden im Hintergrund geladen werden, fügen Sie den Tag: Daten-ajax = ‚false‘ wie folgt:

<form action="#" method="get" data-ajax="false"> 

<a href="" data-ajax="false"> 

hoffe, das hilft jemand.