Using PhoneGap...
I would like to find a way to prevent the navigation for data-role='page', if the user has no network connection. I'm having a hard time finding any resources for this, am a few hours deep on google searching, although I could be using the wrong terms.
I want the user to only be able to navigate here if there is network connection:
<div data-role="page" id="Location">
<div data-role="header" data-theme="e">
Incid..
<h1>
Location</h1>
Use Current
</div>
<!-- /header -->
<div data-role="content">
<!--<div id="panel">
<input id="target" type="text" placeholder="Search Box">
</div>-->
<div id="map_canvas">
</div>
</div>
Using this jQuery for pageshow:
$('#Location').live('pageshow', function (event, ui) {
try {
display();
}
catch (e) {
log(e);
alert(e);
}
});
I know I should be able to catch the network status using if(navigator.network.connection.type == 'none'), but I'm having difficulty stopping the Location page from showing.
Use $.mobile.changePage('#pageID') to change the page depending on if the user has a network connection or not.
Related
I have a ScriptRunner Fragment which shows a form dialog. Here is the code:
import com.onresolve.scriptrunner.runner.rest.common.CustomEndpointDelegate
import groovy.transform.BaseScript
import javax.ws.rs.core.MediaType
import javax.ws.rs.core.MultivaluedMap
import javax.ws.rs.core.Response
#BaseScript CustomEndpointDelegate delegate
showCloneEazyBIAccounts() { MultivaluedMap queryParams ->
def dialog =
"""<section role="dialog" id="sr-dialog" class="aui-layer aui-dialog2 aui-dialog2-medium" aria-hidden="true" data-aui-remove-on-hide="true">
<header class="aui-dialog2-header">
<h2 class="aui-dialog2-header-main">Clone EazyBI Accounts by Model</h2>
<a class="aui-dialog2-header-close">
<span class="aui-icon aui-icon-small aui-iconfont-close-dialog">Close</span>
</a>
</header>
<div class="aui-dialog2-content">
<form class="aui" action="/rest/scriptrunner/latest/custom/cloneJE2Cube" method="post">
<div class="field-group">
<label for="accountNames">Account Names <span class="aui-icon icon-required"></span></label>
<input class="text medium-field" type="text"id="accountNames" name="accountNames" placeholder="Cubo 1, Cubo 2...">
</div>
<div class="field-group">
<label for="projectKeys">Project Keys <span class="aui-icon icon-required"></span></label>
<input class="text medium-field" type="text"id="projectKeys" name="projectKeys" placeholder="JESC, JEBACK....">
</div>
<div class="field-group">
<label for="model">Model <span class="aui-icon icon-required"></span></label>
<select class="select" id="model" name="model">
<option>Select</option>
<option>JESC</option>
<option>JEBACK</option>
<option>COM</option>
<option>AGILE</option>
</select>
</div>
<div class="buttons-container">
<div class="buttons">
<input class="button submit" type="submit" value="Clone" id="clone-button">
</div>
</div>
</form>
</div>
<footer class="aui-dialog2-footer">
<div class="aui-dialog2-footer-hint"></div>
</footer>
</section>
"""
Response.ok().type(MediaType.TEXT_HTML).entity(dialog.toString()).build()
}
I need this form to send the data to another custom rest endpoint (that it works fine when i call it from postman), but when I submit this dialog, it appears "XSRF check failed".
Is there a way to make it work?
Best regards,
Eloi.
Finally I solved the problem sending the request with AJAX and adding headers: { 'X-Atlassian-Token': 'nocheck' }.
Hope this helps!
It's because of headers that are added by your browser, In this case I think the problem is User-Agent header, override it to something dummy if it doen't solve the problem open networking tool of your browser and make override all custom headers which are added by your browser.
In our case, there were two possible solutions.
Change User Agents Header (Not possible as far as I know in Chrome)
Whitelist/Allowlist the origin domain in Jira. When you send a request to the Jira API your browser automatically populates the "origin" header. You need to add that value to the whitelist/allowlist in Jira. -> See here:
https://confluence.atlassian.com/adminjiraserver073/configuring-the-allowlist-1014667631.html
Type "Domain" should work.
See the issue documented by Atlassian:
https://confluence.atlassian.com/jirakb/rest-api-calls-with-a-browser-user-agent-header-may-fail-csrf-checks-802591455.html
I am trying to load a htm to a div in another htm but I keep getting the error below:
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.
Here is my scenario:
First.html (html)
<div id="selectedPage"></div>
First.html (script)
<script>
function loadHTML2Div(htmlPage){
var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
{
$("#selectedPage").html(xmlHttp.responseText);
}
};
xmlHttp.open("GET", htmlPage, true); // true for asynchronous
xmlHttp.send(null);
}
$(document).ready(function(){
loadHTML2Div("Second.htm");
});
</script>
Second.htm (html)
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class='jumbotron'>
<span>Verifique as datas disponíveis e agende seu evento.</span>
</div>
<div data-provide="calendar" id="calendar"></div>
</div>
</div>
</div>
<div class="modal fade" id="preReservaModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="modaldate"></h4>
</div>
<div class="modal-body ">
<div class="form-group">
<label for="exampleInputNome">Nome Completo</label>
<input class="form-control" id="exampleInputNome" placeholder="Digite seu nome completo" type="nome">
<br/>
<label for="exampleInputEmail1">Email</label>
<input class="form-control" id="exampleInputEmail1" placeholder="Digite seu email" type="email">
<br/>
<label for="exampleInputTelefone">Telefone para contato</label>
<input class="form-control" id="exampleInputTelefone" placeholder="Digite seu telefone para contato" type="telefone">
<br/>
<label for="exampleInputPlano">Pacote</label>
<select class="input-large form-control">
<option value="" selected="selected">Selecione um pacote</option>
<option value="DI" >Diamante</option>
<option value="ES">Esmeralda</option>
<option value="RU">Rubi</option>
</select>
</div>
</div>
<div class="modal-footer">
Fechar
Confirmar
</div>
</div>
</div>
</div>
<script src='bootstrap/js/bootstrap-combobox.js'></script>
<script src="bootstrap/js/bootstrap-year-calendar.js"></script>
</body>
I also have a navbar-nav from bootstrap on top of my First.htm for the navigation, and I also have a Third.htm and Fourth.htm that can be opened when the navbar is clicked. I use loadHTML2Div for switching between the contents of the . I don't know if this is the best approach.
As far as I searched this Synchronous XMLHttpRequest error, I would fix it by using ajax async call. I tried using xmlHttpRequest as mentioned above and I also tried using .ajax async
function loadHTML2Div(htmlPage){
$.ajax({
async: true,
type: "GET",
url: htmlPage,
success: function(data){
$("#selectedPage").html(data);
}
});
}
But I got the same error.
Please advise me how can I avoid this sync error. As you can see I tried different ways before elaborating this question.
If you need more information please let me know.
Edited
I kept testing and I fixed this error in some htmls. The problem was I was adding the Jquery and the bootstrap js in both First and Third html for example.
I removed the script declaration from the third.htm for example and left only the declaration in the 'upper' html (First.html). So somehow declaring it on both files was causing me the error.
Unfortunatelly, I still have a problem with the Second.htm which I copied to this question. This htm has a calendar and a bootstrap combobox. If I delete them from the Second.htm and write them in the First.htm, it doesn't work.
<script src='bootstrap/js/bootstrap-combobox.js'></script>
<script src="bootstrap/js/bootstrap-year-calendar.js"></script>
I also have some scripts for the clickDay and setMinDate in the Second.htm as shown below which fail if I remove the scripts declaration and move it to the upper First.htm.
$('#calendar').data('calendar').setMinDate(todayDt);
So it seems to me my lack of knowledge is leading me to this problem. It is probably very simple to solve it, if someone could help me i will appreciate.
set your the ajax attribute async to false
$.ajax({
async: false,
type: "GET",
url: htmlPage,
success: function(data){
$("#selectedPage").html(data);
}
});
I finally figured out what the problem was.
I moved the scripts declaration from Second.htm to First.htm
<script src='bootstrap/js/bootstrap-combobox.js'></script>
<script src="bootstrap/js/bootstrap-year-calendar.js"></script>
Then I changed my html from
<div data-provide="calendar" id="calendar"></div>
to
<div id="calendar"></div>
and created the calendar in the ready function
<script>
$( document ).ready(function() {
$('#calendar').calendar();
});
</script>
As I am a newbie in web development, I know this is still not the best way to structure my website navigation using navbar from bootstrap. For now I will leave this way.
My goal is to have my first htm with the navbar and the contents from each navbar item in different htms (as I have now), but I want the url to change as I click each item:
www.mywebsite.com/First.htm
www.mywebsite.com/Second.htm
www.mywebsite.com/Third.htm
And right now I only have
www.mywebsite.com/First.htm
Where all my scripts are included in the First.htm. It means I am loading the calendar.js even if I don't open the calendars page.
Well, I hope I will help someone with my question/answer in the future even though it is a little confusing. I promise next time I will have more knowledge.
some friends and I have started a team project but we are stuck at this point. We made a function of the site to add comments under every post. The problem is that when submit is clicked it adds the comment but doesn't refresh the page which causes some problems. The author stays "anonymous" and when refresh button is clicked it shows an alert:
The page that you're looking for used information that you entered. Returning to that page might cause any action you took to be repeated. Do you wish to continue?
However, if we just type the URL again and click ENTER everything is good: the author shows up and the comment appears only once. So the only solution for us is to redirect to the same page. Here is the form:
<div style="text-align: left">
<div><i>Leave your comment</i>
</div>
<form method="post">
<fieldset>
<p>
<textarea rows="10" class="form-control" type="text" id="1" name="commentText" style="height: 100px"></textarea>
</p>
<p>
<input type="submit" name="buttonSubmit" onclick="redirect" value="Add comment" class="btn btn-default" style="" />
</p>
</fieldset>
</form>
</div>
This is how the comments are printed on the page:
<h3>Comments</h3>
<br>
<div>
#foreach (var comment in ViewBag.Comments) {
<section class="row">
<article class="post col-md-12">
<div class="about">
Posted on <i>#comment.Date</i>
#if (comment.AuthorId != null) { #: by <i>#comment.Author.FullName</i>
}else { #: by <i>anonymous</i>
}
</div>
<div class="body">#comment.Text</div>
</article>
</section>
}
</div>
Thanks in advance!
Use the #Ajax.BeginForm() helper.
In the AjaxOptions(), you'll want to set the Httpmethod to "Post", InsertionMode.InsertBefore (or After depending on where you want new comments), and UpdateTargetId = "your-comment-div".
You'll need to include jquery.unobtrusive-ajax.js so the Ajax helper works correctly. You can use the nuget package manager to pull it in. Be sure to add it to your jquery bundle.
Then, you need to create the post action in your controller to accept the comment params and return a partial view.
Doing thIs keeps the Ajax confined to a razor helper and controller method.
View:
#using (Ajax.BeginForm("AjaxAddComment",
"MyController",
/* route params */,
new AjaxOptions()
{
InsertionMode = InsertionMode.InsertBefore,
UpdateTargetId = "commentsDiv",
HttpMethod = "Post"
}, htmlAttributes: new { /* ... */ }))
{
<div class="form-horizontal">
#* comment form... *#
</div>
}
...
<div id="commentsDiv">
<div class="comment">...</div>
<div class="comment">...</div>
</div>
Controller:
[HttpPost]
//[ValidateAntiForgeryToken]
public async Task<PartialView> AjaxAddComment(string comment, /*...other params*/)
{
var newComment = ... // comment viewModel
// add comment to db
await db.SaveChangesAsync();
return PartialView("_CommentPartial", newComment);
}
_CommentPartial:
<div class="comment">
...
</div>
I have some trouble. I am using this plugin "angular-masonry" (it's on Github) to dynamically build the grid on the page. When the page loads I get this:
http://joxi.ru/YBQPVP3JTJCwfIgLgbc
Here is my code:
<div class="container" style="width:80%">
<h1 style="text-align: center; margin-bottom: 40px">
Category: {{category.text}}
</h1>
<div>(masonry='' load-images="false")
<div class="masonry-brick" ng-repeat="portal in category.claim_portals" style='width:50%;float:left'>
<div>
<h3>(style='margin-left:30px')
Portal: {{portal.text}}
</h3>
<div class="category-list" ng-repeat="claim in portal.portal_claim" style="margin-bottom:2px">
<div class="claim_sections">
<claimforlist claim="claim"></claimforlist>
</div>
</div>
</div>
</div>
</div>
</div>
But after resizing browser window, everything becomes normal and looks like this:
http://joxi.ru/iBQPVP3JTJCUfLnoqQQ
I think that view loads earlier than JSON data arrives.
Can anyone help and tell me how can I load view after the data has arrived? Or if you know another reason of such an issue, please reply.
Thanks in advance.
You can add a scope boolean variable with value set to false, and change the value to true on your http promise success.
Code sample:
function myController($scope, YourDataServer) {
$scope.dataLoadedSuccessfully = false;
yourDataServer
.query()
.$promise
.then(
function(result) {
$scope.dataLoaded = true; // set the value to true
});
}
HTML would look like:
<div id="loadingBar" ng-show="!dataLoadedSuccessfully">Loading data...</div>
<div id="dataWrapper" ng-show="dataLoadedSuccessfully">
<!-- data goes here -->
</div>
Anyone can please tell me what im doing wrong here:
i just update the library, and seems that the code broke for some reason it's not doing anything.
angular library
html5 code
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<header id="header">
<h1 id="logo"></h1>
<div id="menu">
<a ng-click="setRoute('home')" class="btn">Home</a>
<a ng-click="setRoute('about')" class="btn">about</a>
<a ng-click="setRoute('experiments')" class="btn">Experiments</a>
</div>
<div class="color"></div>
<div class="clear"></div>
</header>
<!-- //top -->
<div class="shadow"></div>
<div id="container">
<div ng-view></div>
</div>
angular.js
angular.module('WebSite', []).
config(function($routeProvider) {
$routeProvider.
when('/about', {templateUrl:'folder/test.html', controller:AboutCtrl}).
when('/experiments', {templateUrl:'folder/test.html', controller:ExperimentsCtrl }).
when('/home', {templateUrl:'folder/test.html', controller:HomeCtrl }).
otherwise({redirectTo:'/home'});
});
function AboutCtrl($scope) {
$scope.title = 'About Page';
$scope.body = 'This is the about page body';
}
function ExperimentsCtrl($scope) {
$scope.title = 'Experiments Page';
$scope.body = 'This is the about experiments body';
}
function HomeCtrl($scope) {
$scope.title = 'Home Page';
$scope.body = 'This is the about home body';
}
First you need to use ng-app to setup the angular application with your module. Maybe you already did, but it is not part of the snippet you posted:
<html ng-app="WebSite">
Also, about the setRoute(), I don't know where you copy that from, but you don't need it. Just use the href with the hash, for example:
about
You need to check out the source from github at https://github.com/simpulton/angular-website-routes
There is no changeRoute method. After some dialog, I realized it was best to handle the anchors tags as naturally as possible.
Your menu element should look like this
<div id="menu">
Home
About
Experiments
</div>
Hope this helps!