I strat 192.168.1.102:8080 to call my server but the url change it into...
http://192.168.1.102:8080/#&ui-state=dialog
Instead of
http://192.168.1.102:8080
which make an error if I refresh the browser. I don't know why it happen like that???
here is my code I call popup to start first to get username
window.onload = function(){
$('#popupLogin').popup("open","slidedown");
}
Here is My popup that I call
<!--POPUP IN THE START UP || NOTE** data-dismissible='false' = Prevent popup close when click outside -->
<div data-role="popup" data-dismissible='false' id="popupLogin" data-theme="a" data-overlay-theme="a"
class="ui-corner-all ui-popup ui-body-a ui-overlay-shadow" aria-disabled="false" data-disabled="false"
data-shadow="true" data-corners="true" data-transition="slidedown" data-position-to="origin">
<form id="startDialog" onsubmit="startActivity()">
<div style="padding:10px 20px;">
<h3>Express Your Feeling</h3>
<!--ID = username, geoFeeling-->
<input required type="text" id="username" value="" placeholder="username"
data-theme="a" class="ui-input-text ui-body-a ui-corner-all ui-shadow-inset">
<textarea required id="geoFeeling" value="" placeholder="Feeling..." style="height: 70px"
data-theme="a" class="ui-input-text ui-body-a ui-corner-all ui-shadow-inset"></textarea>
<button type="submit" data-theme="b" >Log in</button>
</div>
</form>
</div>
<!--------------------------------------------------END OF POPUP --------------------------------------->
and after user completed the form and submit form will call another function to start activity.
Popup box will disappear.
I don't know which part that i was wrong because at the beginning
I can refresh browser and popup will re-open again (re-start activity)
but now URL has change (because of what??) after develop I can't refresh it anymore
Do you have any suggestion or somethings ???
Please Advise.
Related
I am working with a single page model
JQM version 1.4.5
platform XDK
I want to navigate from SignInPage to SignUpPage on Click as follows;
<!-- pageOne -- Sign In -->
<div data-role="page" id="signInPage" class="blue">
<div data-role="content" class="ui-content formContents" style="padding: 15px;">
<img border="0" src="images/login_icon.png" class="centerimg" >
<form id="loginform">
<input type="text" placeholder="User Name" id="loginusername">
<input type="password" placeholder="Password" id="loginpassword">
<input type="submit" value="login" data-theme="a" id="loginBtn">
</form>
</div>
</div>
<!-- pageTwo -- Sign Up -->
<div data-role="page" id="signUpPage" class="blue">
<div data-role="content" style="padding: 15px" class="formContents">
<img border="0" src="images/login_icon.png" class="centerimg">
</div>
</div>
and the corresponding JS code
$(document).on('pageinit','#signInPage', function(){
$('#loginBtn').on('click',function() {
$.mobile.changePage( "#signUpPage", { transition: "slideup"} );
// redirectRegister();
});
});
function redirectRegister(){
$.mobile.pageContainer.pagecontainer('change', '#signUpPage', {
"transition" : "slide"
});
return false;
}
As you can notice i tried both pageContainer and changePage methods and both gives me the same behaviour, goes to next page then redirect automatically to home again
I checked these solutions and non of them worked for me;
pagecontainer solution
change page solution
Does anyone have an idea about what is going on exactly or how to trace what's going on while trying to change page and he auto redirection to home
I'm making a multi-page web app. I want it to have a left and right panel that are available no matter what page you're on. I managed to do that but the contents don't seem like they have the jQuery CSS rules applied to them. I did
$("[data-role=panel]").panel().enhanceWithin();
And that made my panel work... kinda of the labels for my check marks aren't formatted like they were when the panel wasn't external. I guess I'll just put the code up. I swear I've searched this site forever trying to find answers.
$(function () {
$("[data-role=panel]").panel().enhanceWithin();
});
<div data-role="panel" id="RoomInfoPanel" data-display="overlay" data-theme="b" data-position="right" data-dismissible=false>
<div data-role="main" class="ui-content">
<h2 id="roomNumberHeader">Panel Header..</h2>
<p class="main" id="CrewText">Crew Assigned:</p>
<select id="selectCrew" >
<option>Select Crew</option>
</select>
<div id="cblist" style="display:inline">
<label for="#compChk" class="ui-content">Completed</label>
<input type="checkbox" value="first checkbox" id="compChk" />
<input type="checkbox" value="first checkbox" id="paidChk" />
<label for="#paidChk">Paid</label>
</div>
<div data-role="main">
Edit Crews
</div>
</div>
</div>
Remove # in for attribute. It should be for="checkboxID" without hash.
I just started exploring J query mobile. I tried to open a dialog with following code.
<a data-role="button" href="test_my_dialog.php" data-icon="plus" data-iconpos="left" data-mini="true" id="test_dialog" data-rel="dialog">Test Dialog </a>
The dialog opens but there is no close button and header as it is being displayed at demos at following link Dialogs
Is there anything I'm missing here ?
EDIT: The markup of test_my_dialog.php
<div data-role="page">
<div data-role="content">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
<legend>
Add As
</legend>
<input id="radio1" name="RC_type" value="radio1" type="radio">
<label for="radio1">
Team Driver
</label>
<input id="radio2" name="RC_type" value="radio2" type="radio">
<label for="radio2">
Team Member (Driver2)
</label>
</fieldset>
</div>
</div>
</div>
Add a header div to the dialog, it will automatically get a close button to the left.
Demo
<div data-role="page" id="myDialog">
<div data-role="header">
<h1>Header</h1>
</div>
</div>
If you want to change button's position to right, add data-close-btn="right" attribute to dialog div.
<div data-role="page" id="myDialog" data-close-btn="right">
Try modifying the page definition of your dialog with the following code and add a header-section to your dialog page
<div id='mydialog' data-role='page' data-add-back-btn='true'>
...
</div>
I am developing a mobile application with jQuery mobile and backbone. I have backbone model change event function, if any changes in the model, I simply destroy the whole page and recreate with template binding. i use $('#pageId').page('destroy').page(); which works fine.
I want to do the samething for dialog (just destory the dialog and recreate the dialog and display it). Can you anyone tell me the right method to call.... I just tried with .dialog() but i didn't work.. thanks in advance.
my dialog code.
<div data-role="dialog" id="myDialog" data-close-btn="right">
<div data-role="header" class="ui-corner-top">
<h1>dialog</h1>
</div>
<div data-role="content">
<form id="myForm">
<fieldset>
<label for="fromDate">Date From</label>
<input id="fromDate" type="date" required placeholder="mm/dd/yyyy">
</fieldset>
<fieldset>
<label for="toDate">Date To</label>
<input id="toDate" type="date" required placeholder="mm/dd/yyyy">
</fieldset>
<input type="submit" value="submit" id="btnSubmit" data-inline="true" />
</form>
</div>
</div>
I have this link on my page:
It shows up correct but it should render this when clicked:
<div data-role="page" id="advOptions">
<div data-role="header">
<h1>Advanced Options</h1>
</div>
<div data-role="content">
<div data-role="fieldcontain">
<label for="stdDevs">Standard Deviations:</label>
<input type="textarea" name="stdDevs" id="stdDevs"/>
</div>
<div data-role="fieldcontain">
<label for="numsims">Number of Simulations:</label>
<input type="text" name="numsims" id="numsims" />
</div>
<div data-role="fieldcontain">
<label for="term">Forward Rate Data (in yrs):</label>
<input type="text" name="term" id="term" />
</div>
<div data-role="controlgroup" data-type="horizontal">
<fieldset class="ui-grid-a">
<button type="submit" data-theme="d" data-transition="pop" data-icon="delete">Reset</button>
<button type="submit" data-theme="a" data-transition="pop" data-icon="plus">Add</button>
</fieldset>
</div>
</div>
<div data-role="footer">
<h4>Chatham Financial</h4>
</div>
</div>
But it's trying to instead call the advOptions method on my controller which doesn't exist, looks like it's just trying to redirect from the base URL instead of opening that dialog.
What am I doing wrong?
The code looks good to me...
Are you adding that link to your page dynamically? Because if so, maybe JQuery Mobile did not recognize the data-rel="dialog" attribute. If this is the case, you should be able to simply call the .page() method on your page to let JQuery Mobile do its thing.