i was using a javascript like this...
<select onchange="document.langForm.submit();" ... >
but that broke when i started using jquerymobile.
i know this issue has come up 100 times before. but hyperlinks to prior cases wont help here because i have already read dozens and unfortunately i am just not smart enough to understand any of those other discussions. seriously. i am totally confused.
on the other hand, i have made time to make a REALLY, REALLY simple example to show the headache i have. so, if someone can tell me exactly how to fix these two pages, that would be very much appreciated.
http://activemetrics.ch/test/en.html
http://activemetrics.ch/test/de.html
notice that you can load either one of these in your browser and then switch to the other page by changing the selection in the select list. however, after you get to the second page, you can not use a similar action to get back to the first page.
yes, this has to with ajax. i know that much. but what is the very best way for me to fix the problem right here on these 2 pages to allow users to switch back and forth between the two pages easily?
all suggestions are welcome.
thanks very much to anyone who is spending some of their brain waves considering this for me!
-jd
Description :
To understand this situation you need to understand how jQuery Mobile works. It uses ajax to load other pages.
First page is loaded normally. Its HEAD and BODY is loaded into the DOM, and they are there to await other content. When second page is loaded, only its BODY content is loaded into the DOM.
From what I have so in your answer you understand this but you had make a mistake. There are 2 html files: en.html and de.html but their names are not slightly important. What is important is page id's or id's attribute of data-role="page" div. In your case you have 2 pages with a same div and with a same select id. Because both of them are loaded into the DOM event binding will always go to the first loaded page.
What you need to to is use unique id for your pages and your select boxes.
Working example :
en.html
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
</head>
<body>
<div data-role="page" id="sbePage1">
<h3>this is english</h3>
<form name="langForm" id="langForm" action="BookNow.asp?" method="get" style="margin-top:0px auto">
<select data-inline="true" name="lang" id="langId" data-native-menu="false" >
<option value="1972" SELECTED>Something Already Selected</option>
<option value="1973">Some Sort of Change</option>
</select>
</form>
<script>
$(document).on('pageinit', '#sbePage1' ,function () {
$(document).off('change', '#langId').on('change', '#langId',function (event) {
$.mobile.changePage('de.html', {
type: 'get',
data: ''
});
});
});
</script>
</div><!-- /page -->
</body>
</html>
de.html
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
</head>
<body>
<div data-role="page" id="sbePage2">
<h3>this is german</h3>
<form name="langForm2" id="langForm2" action="BookNow.asp?" method="get" style="margin-top:0px auto">
<select data-inline="true" name="lang" id="langId2" data-native-menu="false" >
<option value="1972" SELECTED>Something Already Selected</option>
<option value="1973">Something Else</option>
</select>
</form>
<script>
$(document).on('pageinit', '#sbePage2' ,function () {
$(document).off('change', '#langId2').on('change', '#langId2',function (event) {
$.mobile.changePage('en.html', {
type: 'get',
data: ''
});
});
});
</script>
</div><!-- /page -->
</body>
</html>
Edit :
While I understand your wish, I still must tell you that it is impossible. You can't have 2 pages with a same id with jQuery Mobile in your current example. Think about it, you will have 2 pages with an identical id loaded into the DOM. Each time you try to access the page DIV you will ALWAYS access the first page because it is first in line.
If you want to create a multilingual page you don't need several html pages. Just look for a good jQuery multilingual plugin.
On the other hand you can do what you want if you turn ajax off but you will loose animated transitions.
Example without ajax but where pages have same id
en.html:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script language="text/javascript">
$(document).bind("mobileinit", function () {
$.mobile.ajaxEnabled = false;
});
</script>
<script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
</head>
<body>
<div data-role="page" id="sbePage1en">
<h3>this is english</h3>
<form name="langFormEn" id="langFormEn" action="BookNow.asp?" method=get style="margin-top:0px auto">
<select data-inline="true" name="lang" id="langId" data-native-menu="false" >
<option value="1972" SELECTED>Something Already Selected</option>
<option value="1973">Some Sort of Change</option>
</select></form>
<script>
$("#sbePage1en").live('pageshow', function () {
$('#langFormEn').bind('change', function (event) {
$.mobile.changePage('de.html', {
type: 'get',
data: ''
});
});
});
</script>
</div><!-- /page -->
</body>
</html>
de.html
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script language="text/javascript">
$(document).bind("mobileinit", function () {
$.mobile.ajaxEnabled = false;
});
</script>
<script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
</head>
<body>
<div data-role="page" id="sbePage1de">
<h3>this is german</h3>
<form name="langFormDe" id="langFormDe" action="BookNow.asp?" method=get style="margin-top:0px auto">
<select data-inline="true" name="lang" id="langId" data-native-menu="false" >
<option value="1972" SELECTED>Something Already Selected</option>
<option value="1973">Something Else</option>
</select></form>
<script>
$("#sbePage1de").live('pageshow', function () {
$('#langFormDe').bind('change', function (event) {
$.mobile.changePage('en.html', {
type: 'get',
data: ''
});
});
});
</script>
</div><!-- /page -->
</body>
</html>
Related
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed last year.
can someone be happy to help me, in my code below I'm trying to display a div with a dropdown select, but why is the existing javascript not working.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#business {
display: none;
}
#local {
display: none;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script>
$('#purpose').on('change', function () {
if (this.value === "1") {
$("#business").show();
$("#local").hide();
} else if (this.value === "2") {
$("#business").hide();
$("#local").show();
} else {
$("#business").hide();
$("#local").hide();
}
});
</script>
</head>
<body>
<select id='purpose'>
<option value="0">Personal use</option>
<option value="1">Business use</option>
<option value="2">Passing on to a client</option>
</select>
<div id="business">
<label for="business">Business Name</label>
<input type='text' class='text' name='business' value size='20' />
</div>
<div id="local">
<label for="local">Local Name</label>
<input type='text' class='text' name='local' value size='20' />
</div>
</body>
</html>
the above code works fine if i run it in fiddle, but not when i run it on my local computer, can someone help me, what should i do for the above problem, any kind of help i thank you.
The <select id='purpose'> doesn't exist yet when you try to run $('#purpose').on('change', ...). Either move your <script> tag to the end of the <body> tag, or add a defer attribute to the tag (which follows best practices anyways).
I have this jQuery selectors. Everything was working fine but just by adding and initializing angular, the multiselect stops working. You can try removing everything that is not necesary and you'll see this happens:
(I don't know why github's urls are not working here, but you can download the file if needed, as that is not the problem I'm trying to depict)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>SPIROOX - Campaigns</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="bootstrap-multiselect/dist/css/bootstrap-multiselect.css" type="text/css" />
</head>
<body ng-app="campaign_listing">
<div class="content" ng-controller="campaign_list_controller as ctrl">
<h2>Campaign Administration</h2>
+
<div class="filters">
<select id="multiselect_status" ng-model="ctrl.filters.status" ng-change="ctrl.update_fields()" multiple="multiple">
<option value="active">Active</option>
<option value="suspended">Suspended</option>
<option value="closed">Closed</option>
</select>
</div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>
<script>
$(document).ready(function() {
$('#multiselect_status').multiselect({
includeSelectAllOption: true,
enableFiltering: true,
nonSelectedText: 'Status'
});
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.js"></script>
<script>
var my_app = angular.module("campaign_listing", []);
var controllers = {};
controllers.campaign_list_controller = function($http) {
this.filters = {
status: 'active',
client: null
};
var campaigns = {};
this.update_fields = function() {
console.log("update!");
console.log(this.filters);
}
}
my_app.controller(controllers);
</script>
</body>
</html>
As mentioned in the comments add the jQuery plugin code in a directive and remove the document.ready stuff because it's not needed in the directive.
The DOM is ready when you're adding the plugin code in directive's link method.
I haven't tested the rest of your angular code because it looks too complicated and I've re-coded it to improve readability. (Maybe your code is working but I wouldn't code it like this.)
Please have a look at the demo below or in this jsfiddle.
Update 29.09.15
For a better understanding of directives please read the documentation about directives to get the basics for custom directives.
Anyway here is the explanation to the directive:
The multiselect directive is added as attribute directive (restrict: 'A') to the select tag and so element inside of link function is the select tag where you'd like to apply the jQuery plugin. (Inside of link it's safe to use jQuery functions but I'd recommend to reduce the usage to a miminimum.)
Search for link, compile, controller in google or here at SO to learn more about directives. There is a question for the difference between them here at SO.
You could also create an element directive with template then you can add the select tag into the directive and pass your selection with two-way binding. That's probably better here because it's more reusable.
angular.module('campaignListing', [])
.controller('CampaignListController', CampaignListController)
.directive('multiselect', MultiSelectDirective);
function CampaignListController($http) {
this.filters = {
status: 'active',
client: null
};
var campaigns = {};
this.update_fields = function () {
console.log("update!");
console.log(this.filters);
}
}
function MultiSelectDirective() {
return {
restrict: 'A',
link: function (scope, element) {
$(element).multiselect({
includeSelectAllOption: true,
enableFiltering: true,
nonSelectedText: 'Status'
});
}
}
}
<link href="https://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div ng-app="campaignListing">
<div>
<div class="content" ng-controller="CampaignListController as ctrl">
<h2>Campaign Administration</h2>
+
<div class="filters">
<select id="multiselect_status" multiselect ng-model="ctrl.filters.status" ng-change="ctrl.update_fields()" multiple="multiple">
<option value="active">Active</option>
<option value="suspended">Suspended</option>
<option value="closed">Closed</option>
</select>
</div>
</div>
</div>
</div>
Unfortunately, I am not sure to understand anything to java, jquery and all this kind of thing. Nevertheless, I am trying to get some inspiration on forums in order to make a personal website that contains a vertical navbar and a div container in which external html pages will be loaded. Each html file uses an html5 applet called JSmol, which plots 3D molecules that can be manipulated interactively. The main page looks like this:
<!DOCTYPE html>
<html>
<head>
<title> 3D Chemistry </title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" type="text/css" href="Chem3D-CSS/MolChem.css" />
<link href='http://fonts.googleapis.com/css?family=Archivo+Narrow' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="jquery/jquery.min.js"></script>
<!-- META TAGS start -->
<meta name="Title" content="Molecular Chemistry" />
<meta charset="UTF-8">
<!-- META TAGS end -->
<script type="text/javascript">
$(document).ready(function() {
// select all the links with class="lnk", when one of them is clicked, get its "href" value
// load the content from that URL and check the "status" of the request
// place the response or an error message into the tag with id="content"
$('a.lnk').click(function() {
var url = $(this).attr('href');
$('#content').load(url, function(response, status, xhr) {
// check the status, if "success", place the response into #content
// else, if "error", define an error message and insert it into #content
// else, display an Alert with the status
if(status=='success') {
$('#content').html(response);
}
else if(status=='error') {
var ermsg = '<i>There was an error: '+ xhr.status+ ' '+ xhr.statusText+ '</i>';
$('#content').html(ermsg);
}
else { alert(status); }
});
return false;
})
});
</script>
</head>
<body class="s_page" alink="#ee0000" link="#0000ee" vlink="#551a8b">
<div id="header"> <a id="UPS-link" href="http://www.univ-tlse3.fr/" title="Paul Sabatier University - Toulouse III">
<img src="Chem3D-IMAGES/UT3_PRES_logoQ.png" alt="Paul Sabatier University" id="logoUPS" width=300px />
</a>
</div>
<div id="vmenu">
<ul>
<li>Home</li>
<li>3D Molecules
<ul>
<li>Mol1</li>
<li>Mol2</li>
</ul>
</li>
<li>Symmetry
<ul>
<li>Symmetry Elements
<ul>
<li>C<sub>2</sub>H<sub>6</sub></li>
<li>Ru<sub>4</sub>H<sub>4</sub>(CO)<sub>12</sub></li>
</ul>
</li>
<li>Point Groups
</li>
</ul>
</li>
<li>Solids
<ul>
<li>fcc</li>
<li>hcp</li>
</ul>
</li>
</ul>
</div>
<div id="content">
</div>
<div class="s_author" id="footer">
author: romuald.poteau_at_univ-tlse3.fr
<br/>last modification: 2013/12/16
</div>
</body>
</html>
Up to now, I have worked on the PG.html file (Point Group entry in the vertical menu), which works perfectly fine when it is loaded separately. But is not the case when it is loaded inside the main page as an external html page. The title is the only thing that appears, it seems that the jsmol application is not properly initialized. May be this is specific to the invocation of jsmol ; or is this a general issue when one wants to load hmtl files with embedded scripts ?
<!DOCTYPE html>
<html>
<head>
<title> POINT GROUPS </title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" type="text/css" href="Chem3D-CSS/MolChem.css" />
<!-- META TAGS start -->
<meta name="Title" content="Molecular Chemistry" />
<meta name="Format" content="text/html" />
<meta name="Language" content="en" />
<meta charset="UTF-8">
<!-- META TAGS end -->
<script type="text/javascript" src="jquery/jquery.min.js"></script>
<script type="text/javascript" src="./JSmol.min.js"></script>
<script type="text/javascript">
// ---------------------------------------------------------------------------------
////// every page will need one variable and one Info object for each applet object
var Info = {
width: 500,
height: 500,
color: "0xC0C0C0",
use: "HTML5",
jarPath: "java",
j2sPath: "j2s",
jarFile: "JmolApplet.jar",
isSigned: false,
addSelectionOptions: false,
serverURL: "php/jsmol.php",
readyFunction: jmol_isReady,
console: "jmol_infodiv",
disableInitialConsole: true,
debug: false,
}
</script>
</head>
<body class="s_page" alink="#ee0000" link="#0000ee" vlink="#551a8b">
<div class="s_title" id="titlePG">
Point Groups
</div>
<div class="s_normal" id="mainPG">
<table border="0">
<tbody>
<tr valign="top">
<td nowrap="nowrap">
<script type="text/javascript">
Jmol.getApplet("Jmol1", Info);
Jmol.script(Jmol1,'load Chem3D-data/nh2cl.xyz;');
Jmol.resizeApplet(Jmol1, 500);
</script>
<br>
</td>
<td>
<script>
Jmol.setButtonCss(null,"style='width:300px'")
Jmol.jmolButton(Jmol1,"load Chem3D-data/nh2cl.xyz;", "NH2Cl (Cs)");
Jmol.jmolBr();
Jmol.jmolButton(Jmol1,"load Chem3D-data/cis-dichloroethylene.xyz;", "cis-dichloroethylene (C2v)");
Jmol.jmolBr();
Jmol.jmolButton(Jmol1,"load Chem3D-data/trans-dichloroethylene.xyz;", "trans-dichloroethylene (C2h)");
</script>
<br>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
I have tried to find an answer to this question by checking previous posts, but my poor skills do not allow me to identify relevant suggestions for such issue.
Thanks for any help.
// Create a DOM object from a URL
$html = file_get_html('http://www.google.com/');
// Create a DOM object from a HTML file
$html = file_get_html('test.htm');
I'm using asp.net web forms. I have DynamicDataField with some jquery.mobile widjets:
<head>
<title></title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile- 1.3.2.min.css" />
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"> </script>
<script>
function go() {
////some code
};
</script>
</head>
<div>
<div data-role="rangeslider" class="searchBlock">
<label for="range-1a">Комнат:</label>
<input name="range-1a" id="range-1a" min="0" max="100" value="0" type="range" class="seearchSlider" />
<label for="range-1b">Rangeslider:</label>
<input name="range-1b" id="range-1b" min="0" max="50" value="100" type="range" class="seearchSlider" />
</div>
///etc, several same divs
this DynamicDataField(Search.ascx) I place on my Main.Master padge:
<%# Register Src="~/DynamicData/FieldTemplates/Search.ascx" TagPrefix="search" TagName="search" %>
<head runat="server">
<meta name="viewport" content="width=device-width" />
<link href="/Content/MainStyle.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<title></title>
<asp:ContentPlaceHolder ID="TitleContent" runat="server" />
</head>
<body>
<div id="left">
<div style="background: #fff">
<search:search id="menu2" runat="server"/>
</div>
</div>
</body>
The problem is: after adding
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"> </script>
all my project starts behave strange. All fonts etc are like as in jquery.mobile widjet, some javascript methods don't work. So. How can I isolate jquery.mobile-1.3.2.min.js? I want it to be used ONLY in Search.ascx.
Any suggestions? sry, i'm new in jquery:)
By default, jQuery Mobile enhances everything on the page. You can use data-enhance="false on the page body, and just use data-enhance="true" on the control that you want to enhance.
See the docs for more info.
In this case, you need to tell JQM not to to auto-initialize pages. You should do that once mobileinit fires to apply global changes, after loading jQuery and before loading jQuery mobile JS libraries.
Nevertheless, bu doing so, you will need to manually enhance JQM elements (widgets).
<head>
<!-- jQuery.js here -->
<script>
$(document).on("mobileinit", function () {
$.mobile.autoInitializePage = false;
});
</script>
<!-- jQuery Mobile.js here -->
</head>
I have a Tinybox 2 popup opening when clicking 'register'. The user has then to choose if he/she wants to register as a user or a performer. I'd like to show a different registration page for each, but first asking it, so handling with ajax would be the best. It can be done, as shown here, in the 5th example. Here is my current code:
<!doctype html>
<html>
<head>
<title>Regisztrációs típus kiválasztása</title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="../css/soon.css"/>
<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
</head>
<body>
<div id="teljes">
<h1>Miként szeretnél regisztrálni?</h1>
<div id="felhasznalo">
Felhasználóként
</div>
<div id="eloado">
Előadóként
</div>
</div>
<script type="text/javascript">
$('#felireg').click(function() {
$.get("../php/register.php");
});
</script>
</body>
</html>
Thanks!
If i understand correctly, you want to make an ajax call to your registration file named "register.php" and show this in a Tinybox
$('#felireg').click(function() {
TINY.box.show({
url:'../php/register.php',width:300,height:150
})
});
This should work.
//EDIT :
Assuming your file returns only html:
$('#felireg').click(function() {
$.get("../php/register.php", function(data)
{
TINY.box.fill(data);
});
});
This should update the current Tinybox