jQuery with jQuery mobile bricks form submission - javascript

I am trying to implement a collapsable sidebar with a form (search field and submit button) for my site.
I have referenced as script:
https://code.jquery.com/jquery-1.11.3.min.js
and
https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js
However in this combination the form just wont submit, instead it seems to apply the get parameters to the URL and then fires preventDefault of some sort.
It seems like I am using an old version of jQuery , however when I tried to update to:
https://code.jquery.com/jquery-3.2.1.min.js
I noticed that my collapsable menu wont work anymore and the complete style is broken. Also I cant put it in a fiddle since they are mostly already using jQuery.
Sample 1 (Collapse works but form not):
<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>
Sample 2 (Form works but Collapse not):
<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>
For the first sample I also tried to declare a input type button instead of submit and trigger it manually using:
$('#submitbutton').click(function() {
$('#myform').submit();
});
Without success.
Thanks in advance!

jquery mobile version 1.4.5 is only locked to certain older jquery versions and have not been tested onto older versions above jquery2.0
Read more about it here if you need to: http://blog.jquerymobile.com/2013/02/20/jquery-mobile-1-3-0-released/.
This would explain why the jqueryversion 3.2.1 doesn't work with your collapsible form.
Meanwhile on the side of the 1.11.3 version, According to the developer console all you have to do is load up your form on a web server instead of loading it locally on your computer (C:/Folder/.html wont work, you need to use browser extensions like https or http)
I hope this helps you as I myself ain't a professional programmer and can't scratch up a working code for you.

It seems like I was misjudging.
With jQuery mobile comes alot of automatically introduced features for e.g. submitting a form in the background using XHR request and not reloading the site.
Imho they should make this a little bit clearer as I had a hard time figuring this issue out. Solution is: for `s or 's you DONT want to be loaded in background, add the tag: data-ajax="false" like so:
<form action="#" method="get" data-ajax="false">
<a href="" data-ajax="false">
Hope this helps someone.

Related

W3 library-not working, it seemed so simple

Do you ever look at a code and think it looks so simple?
Like it's just a simple three line code-- "I can't possibly mess this up!", you say, and end up messing it up? Because I did, and it's driving me crazy. Ok not that crazy, but I'm stumped.
I'm making an online portfolio and I wanted it to be multi-paged and realized soon enough that I can't (don't want to) rewrite the header html AND header css into each page. It's not efficient at all.
So I did some research & found W3 Data Includes library
(w3schools.com/lib/w3data.js & w3schools.com/w3css/w3data_includes.asp)
So my header:
https://jsfiddle.net/nsykep2v/
My index with W3 include:
<!DOCTYPE html>
<html lang="en">
<head>
blah blah blah
</head>
<script src="https://www.w3schools.com/lib/w3data.js">
</script>
<body>
<div w3-include-HTML="header.html"></div>
<script>
w3IncludeHTML();
</script>
<div id="blah">
blah blah blah
</div>
</body>
</html>
Don't bother running it, it's just there to give a sense of where I placed the important stuff.
Note:
I move the script tag around & no header shows up
I moved the div around & no header shows up
I merged the the script tag so it has src inside of it & still no
header shows up
They're all in the same file, right next to each other
I did some other stuff but it's basically moving around things and trying different syntax I don't think it's worth mentioning
Let me know if more info is needed.
You obviously have lots of work still to do, but this takes what you had and gets it working -- injecting the separate menu.html into index.html using the stuff you provided:
Answer in Plunker
index.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://www.w3schools.com/lib/w3data.js"></script>
<script src="script.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<div w3-include-html="menu.html"></div>
<script>
w3IncludeHTML();
</script>
</body>
</html>
menu.html:
<div class="v_dropdown">
MENU
</div>
<header class="in_dropdown">
<div id="filler_hdr" class="header">
<div id="filler_file"></div>
</div>
<div id="articles_hdr" class="header">
<div id="arcs_tab" class="tab">
<strong>Articles</strong>
</div>
<div id="arcs_file" class="file"></div>
</div>
<div id="projects_hdr" class="header">
<div id="prj_tab" class="tab">
<strong>Projects</strong>
</div>
<div id="prj_file" class="file"></div>
</div>
<div id="photo_hdr" class="header">
<div id="photo_tab" class="tab">
<strong>Photography</strong>
</div>
<div id="photo_file" class="file"></div>
</div>
<div id="blog_hdr" class="header">
<div id="blog_tab" class="tab">
<strong>Blog</strong>
</div>
<div id="blog_file" class="file"></div>
</div>
</header>
Also, make sure that you are serving up your local files using a web server and not file:// URIs when you are developing locally, as the w3data library will not work unless you serve the files from some sort of a web server.
Further, you have some pretty messed up HTML that you started with. Since it seems you are still learning some HTML basics and just trying to dive in, you might want to validate your HTML. One way to do this is by using an online tool like this.

jQuery/HTML5 roulette not working

I'm trying to implement a jquery/html5 roulette into my site.
I've found some jsfiddle code I'd like to use: http://jsfiddle.net/kYvzd/118/
But when I'm trying to implement it on my website it won't work..
I'm receiving the error TypeError: $(...).spinwheel is not a function
[Learn More]
This is the code I've implemented:
The HTML:
<legend class="text-center header">Roulette!</legend>
<div id="main">
<div id="left-column">
<form class="iform" action="#" method="get">
<label for="joiner"></label>
<input id="joiner" name="joiner" class="joiner" placeholder="Please Enter your name" />
<button class="add">Add</button>
<button class="spin-trigger">Spin</button>
</form>
<canvas class="canvas" width="500" height="500"></canvas>
</div>
<div id="right-column">
<p class="winner">The Winner is ... <span> </span></p>
<ul class="participants">
</ul>
</div>
<div style="clear:both"></div>
</div>
<script>
$(document).ready(function(){
$('.canvas').spinwheel({
pplArray : ["♈", "♉", "♊", "♋","♌", "♍", "♎", "♏","♐", "♑", "♒", "♓"]
});
});
</script>
The JS is exactly as the JS file, implemented like this:
<script src="http://code.jquery.com/jquery-1.6.js" type="text/javascript"></script>
<?php
if($active=="roulette") echo '<script src="js/roulette.js" type="text/javascript"></script>'
?>
I can see that the file is roulette.js is implemented, so there's nothing wrong at the PHP part $active.
I feel really stupid because I've basically just copied the code and it won't work..
And the <script> part in the HTML that's the only thing I've moved because I will need to change some values there dynamically.
Update:
The website link is: http://randomstock.net/roulette.php
You have two copies of jQuery included in your site. Looking at the <head> you have
<script src="http://code.jquery.com/jquery-1.6.js" type="text/javascript"></script>
<script src="js/roulette.js" type="text/javascript"></script>
At this point, you have jQuery 1.6 running on the page, with the spinwheel plugin added to jQuery as you are expecting.
You have the code
$(document).ready(function () {
$("canvas").spinwheel(...);
});
This would all work as you are expecting.
HOWEVER!
Towards the bottom of your page, you have
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
At this point, you have a new copy of jQuery - one without the spinwheel plugin installed. Your page is in a weird limbo state, where the $(document).ready is running from jQuery 1.6, but the $ inside it when it runs will be the newer jQuery, without the plugin.
Two solutions:
Preferred: get rid of the duplicate jQuery
$(document).ready(function($) { ... }) will ensure that the $ inside the function will be the same as the one outside.

onclick to redirect to next page not working in phonegap

<html>
<head>
<title>Quiz Application</title>
<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
<script type="text/javascript" charset="utf-8">
function ready()
{
if(document.getElementById("rb2").checked)
{
alert("correct");
}else if(document.getElementById("rb1").checked)
{
alert("incorrect");
}
else
{
alert("incorrect");
}
}
function nextPage()
{
window.location = "next.html";
}
</script>
</head>
<body>
<form method="post">
<center><h1>Quiz Application</h1></center><br><br>
<center>What does JVM stands for ?<br><br>
<radiogroup>
<input type="radio" id="rb1"/>Java Vendor Machine<br>
<input type="radio" id="rb2"/>Java Virtual Machine<br>
<input type="radio" id="rb3"/>Java Viral Machine<br>
<input type="submit" id="sub" value="Freeze" onclick="ready();"/><br>
<input type="submit" id="next" value="Next Question" onclick="nextPage();"/></center>
</radiogroup>
</form>
</body>
</html>
Above is my code for redirecting my page to next page after click event.
But it is not redirecting to next page.I went through many questions on stackoverflow as well but didnt succeed.
Please help me .
Thanks in advance.
What are you doing there? If you're doing it with jQuery mobile an example would look like this:
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"> </script>
</head>
<body>
<div data-role="page" id="page1">
<p>This is page 1. If you want to go to Page 2 click here.
</div>
<div data-role="page" id="page2">
<p>This is page 2. If you want to go back to Page 1 click here.
</div>
</body>
</html>
Changing a page by function could look like this:
function changePage() {
$.mobile.changePage( "#loginPAGE", { transition: "none", changeHash: true });
}
Here's a pen: http://codepen.io/anon/pen/gaeoQE
Frameworks - Mobile App Development
So like i said in my comment, i would recommend you to use a framework. Since i don't know, how conversant you're in JavaScript and anything else i think you should start with jQuery. For mobile App development it's not one of the best frameworks in my opinion but it's easy to learn and thats important for you to start.
So jQuery is a thing for your website. For your mobile application you need jQuery mobile.
You go to that websites and download both. When your download is finished, you're going to open up your index.html and add the scripts to your <head></head> section so that it looks like the following:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
These things are important. Also the order in which you include the scripts is important.
After adding this to your header, you're able to access a whole bunch of functions. All of the features are testable inside a demo environment which can be found over here: jQuery mobile Demos (1.4.5).
When you have finished that, you're going to copy my code from my pen into your <body></body> and it should work. For changing a page via javascript you can use the function changePage() which i've already posted before.
I hope this will help you, if not please let me know where exactly i can help you.
I found out the solution for my query . i just wrote the following function onClick of a button (input type should be button and not submit then only it will work)
function nextPage()
{
document.location="nextpage.html"; //instead of window.location
}

jQuery Mobile create a panel

I'm trying to start with jQuery Mobile but I'm stuck when I'm trying to create a left panel with an overlay slide. Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>- test-</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"> </script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="panel" id="testPanel" data-theme="e" data-position="left" data-display="overlay">
<h3>Default panel options</h3>
<p>This panel has all the default options: positioned on the left with the reveal display mode. The panel markup is <em>before</em> the header, content and footer in the source order.</p>
<p>To close, click off the panel, swipe left or right, hit the Esc key, or use the button below:</p>
</div>
<div data-role="header">
<h1>test</h1>
Contact
</div>
<div data-role="content">
</div>
<div data-role="footer" data-position="fixed">
<h4>Copyright 2013 - All Rights Reserved -</h4>
</div>
</div>
</body>
</html>
It doesn't work, when I'm clicking on my link button I have this message "Error loading page" and the content of my panel is already shown in the page. Thanks for your help!
Seems like you're using outdated versions of both jQuery and jQuery Mobile frameworks. I would suggest updating to the latest release versions.
Here's a working demo with your same markup using jQuery 1.9.1 and jQuery Mobile 1.3.1
Sliding panels were introduced in JQM 1.3 version. So it won't work for other versions. USe jQuery 1.7.2- 1.9.1 for JQM 1.3
See the blog post for more details : http://jquerymobile.com/blog/2013/02/20/jquery-mobile-1-3-0-released/
If this is not your index page then you are most probably navigate to it through an <a href="yourpage.html>Page</a> in this case jquery uses Ajax request to navigate from one page to another the ajax request does not load the whole content of your page , it only loads the content of the <body> tag i.e any scripts that you are writing inside the <head> tag will not be loaded thus the page will not work properly and you will face error
to solve this you need to use data-ajax="false" inside the <a> attribute to prevent jquery mobile to use Ajax call to load your page.
if it is your index page then please past the js code so we can check it
in all cases check these link
for loading jqm pages and this link problem of ajax call in jqm

Showing a dialog from a separate html file and passing it a parameter

I am using android 2.2, phonegap 1.3, and jquery-mobile 1.0
I have a list view in which there is an element in the list that I want to use to create a dialog. I would like my dialog to be defined in a separate file so I can reuse it and I would like it to set the title according to the value I pass.
My dialog looks something like this:
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
$(document).ready(function() {
$("#title").append(SMSPLUS.queryString("title"));
});
</script>
<title>Dialog</title>
</head>
<body>
<div data-role="page" class="ui-page-z">
<div data-role="header" data-theme="z" class="ui-bar-z">
<h1 id="title"></h1>
</div>
<div data-role="content">
...
</div>
</div>
</body>
</html>
I have tried using a #href with the title parameter (as defined below), dialog is opened but the title param isn't present.
<ul data-role="listview" data-theme="a">
...
<li><a href="dialog.html?title=blah" data-rel="dialog"/></li>
...
</ul>
I have read that I could use a data-url but in this case it is not clear where I define it (in the <a> or in a <div> which wraps it) and how I extract this in the dialog page.
EDIT
For the record the mechanism works in a standard browser but without the styling.
I created the script inside the <script> tags below which listens for page show events and updates the title and placeholder for the input.
<div data-role="page" class="ui-page-z">
<div data-role="header" data-theme="z" class="ui-bar-z">
<h1 id="title">
</h1>
</div>
<div data-role="content">
<input placeholder="Type here..." id="configtext">
</input>
...
<script type="text/javascript">
$("div.ui-page-z").live("pageshow", function(event, ui) {
var dataUrl = $(".ui-page-active").attr("data-url");
$("#title").empty();
$("#title").append(SMSPLUS.getValue("title", dataUrl));
$("#configtext").attr("placeholder", SMSPLUS.getValue("placeholder", dataUrl));
});
</script>
</div>
The script wasn't detected when placed in the header (presumably because the framework takes no notice of headers for dialogs)
You might try removing the
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
$(document).ready(function() {
$("#title").append(SMSPLUS.queryString("title"));
});
</script>
<title>Dialog</title>
</head>
<body>
</body>
and only return the body html & javascript in your ajax call. Having two DOMS in one might confuse the browser.

Categories

Resources