BACKGROUND
I am basically parsing data that contains some team name and and its respective id. For instance my raw data looks like this --> teamName(MIAMI HEAT, id1) teamName(NewYork Knicks, id2).
I have parsed this kind of data according to my needs. So once user logins they are taken to welcome page which contains a nav menu on the side that will display the names of various teams i parsed earlier like Miami Heat, NewYork Knicks etc. I also create dynamic pages for each team on the nav menu. So for instance if you click on Miami Heat you are taken to a page www.something.com/index.html#id1
So in this case for Miami Heat page the page id is id1 as it was earlier in the raw data.
This is what i want to achieve
So basically on my welcome page where i have a nav menu containing all the various teams i am currently able to drag and drop them. So for instance if my nav menu contains
Miami,
Toronto
NewYork.
I can drag Toronto on top so the order in the nav menu canges to
Toronto
Miami
NewYork
I was wondering can i have this reflect on the actual order of the pages. so if I drag Toronto on the top and when i swipe left Toronto should appear. If i drag NewYork on top then when i swipe left NewYork should appear.
Can someone please give me guidance on how to achieve this and is is it even possible? Sorry if this is a bad question i am a noob in js world. Please pardon me as i am self learning js.
PS: i am currently able to swipe but its a random order and not responsive to the drag and drop function.
UPDATED CODE AGAIN
<!DOCTYPE html>
<html>
<head>
<TITLE>BASKETBALL FANATICO</TITLE>
<meta charset=utf-8 />
<meta name=viewport content=width=device-width, initial-scale=1>
<!-- Theme CSS -->
<link rel=stylesheet type=text/css href=css/jquery.mobile.flatui.css />
<!-- Jquery -->
<script src=http://code.jquery.com/jquery-1.10.2.min.js></script>
<script src=http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.js></script>
<!-- TEST Jquery -->
<link rel=stylesheet type=text/css href=css/jquery.countdown.css>
<script type=text/javascript src=js/jquery.countdown.js></script>
<!-- Style.css -->
<link rel=stylesheet type=text/css href=css/style.css>
<link rel=stylesheet type=text/css href=css/style1.css>
<!-- Testing Drag -->
<script src=http://code.jquery.com/ui/1.10.3/jquery-ui.min.js></script>
<script src=jquery.ui.touch-punch.min.js></script>
</head>
<body>
<div data-role=page id=page1>
<div data-role=header data-position=fixed>
<h1>BASKETBALL FANATICO</h1>
</div>
<div id=loginfo>
<h2>Please Enter the Login Credentials</h2>
</div>
<form method=GET>
<div id=username data-role=fieldcontain>
<input type=text name=username placeholder=User Name />
</div>
<div id=password data-role=fieldcontain>
<input type=password name=password id=txtId placeholder=Password/>
</div>
<div id =loginbtn>
<a data-role=button id=log data-theme=b href=#page2 data-transition=slide>Login</a>
</div>
</form>
<div data-role=footer data-position=fixed>
<h1>NBA</h1>
</div>
</div>
<!-- page 2 -->
<div data-role=page id=page2>
<div data-role=header data-positiion=fixed>
<a data-iconpos=notext href=#panel data-role=button data-icon=flat-menu></a>
<h1>BASKETBALL FANATICO</h1>
<a data-iconpos=notext href=#page2 data-role=button data-icon=home title=Home>Home</a>
</div>
<div data-role=content>
<ul data-role=listview data-inset=true>
<li data-role=list-divider data-theme=b>WELCOME!</li>
<li>Use the menu on the left to navigate <br />and configure the various options.</li>
</ul>
</div>
</div>
<div data-role=panel id=panel data-position=left data-theme=a data-display=push>
<div>
<div id=nav><h3>Navigation Menu</h3></div>
<label>
<input id=chkSort type=checkbox checked=true />Allow sorting</input>
</label>
</div>
<div id=items data-role=button>
<!-- Insert Parsed Teams Here -->
<a href=#page1 data-transition=fade data-theme=b data-role=button>LOG OUT</a>
</div>
</div>
<script>
var teamNames = new Array();
var teamId = new Array();
$( document ).on( pagecreate, function() {
$( body > [data-role='panel'] ).panel().enhanceWithin();
});
$(document).on('pagecreate', '#page1', function() {
$(#log).on('click', function(){
alert('hellow');
$.ajax({
url: http://1xx.1xx.0.1xx:8081/script.login,
type: GET,
data: { 'page':'create_user', 'access':'user','username':$(input[name='username']).val(), 'password':$(input[name='password']).val()},
dataType: text,
success: function (html) {
console.log(html);
console.log('==============>TESTING');
teamNames = new Array();
teamId = new Array();
var res = html.match(/teamNames(.*);/g);
for(var i =0;i<res.length;i++){
//alert(res[i]);
var temp = res[i].split(',');
if(temp.length >= 3){
teamNames[i] = (temp[2].replace(');','')).replace('','');
teamId[i] = temp[1].replace(',).replace(',).replace(/ /g,'');
}
}
var AllTeams = ''
for(var i = 0; i<teamNames.length; i++){
AllTeams +='<a href=#'+teamId[i]+' class=teamLink data-theme=b data-role=button >'+teamNames[i]+'</a>';
var makePage = $(<div data-role='page' id='+teamId[i]+' data-pageindex='+i+' class='dynPageClass'><div data-role='header' data-position='fixed'><a data-iconpos='notext' href='#panel' data-role='button' data-icon='flat-menu'></a><h1>BASKETBALL FANATICO</h1><a data-iconpos='notext' href='#page2' data-role='button' data-icon='home' title='Home'>Home</a></div> <div data-role='content'><ul data-role='listview'data-insert='true'><li data-role='list-divider' data-theme='b'>+teamNames[i]+</li><li><h2>0</h2></li></ul></div><div data-role='footer' data-position='fixed'><span class='ui-title'><div id='navigator'></div></span></div></div>);
makePage.appendTo($.mobile.pageContainer);
}
$('#items').prepend(AllTeams).trigger('create');
}
});
});
});
$(document).on('pagecreate', '#page2', function() {
$(#items).sortable({
stop: function( event, ui ) {
teamNames = [];
teamId = [];
$(.teamLink).each(function() {
var href = $(this).prop('href');
var name = $(this).text();
var id = href.substr(href.lastIndexOf(#) + 1);
teamId.push(id);
teamNames.push(name)
});
alert(teamNames);
$(#items).listview('refresh');
}
}).disableSelection();
$(#chkSort).on(change, function(){
var sort = $(this).prop(checked);
if (sort){
$( #items ).sortable('enable');
} else {
$(#items).sortable('disable');
}
});
$(document).on(swipeleft, #page2, function() {
$.mobile.changePage(#+teamId[0], {transition: slide, reverse: false});
});
$(document).on(swiperight swipeleft, .dynPageClass, function(e) {
var curPageID = $(this).prop(id);
var ind=0;
for(var i = 0; i<teamId.length; i++){
if (curPageID == teamId[i]){
ind = i;
break;
}
}
var topageid = page2;
var rev = true;
if (e.type == 'swiperight'){
if (ind > 0){
topageid = teamId[ind - 1] ;
}
} else {
rev = false;
if (ind < teamId.length - 1){
topageid = teamId[ind + 1] ;
}
}
$.mobile.changePage(# + topageid, {transition: slide, reverse: rev});
});
});
</script>
</body>
</html>
