I'm trying to figure out how to transition from one page to the next using jQuery mobile. I have a JSON callback function, and once that function returns a value (say YES or NO), then I either want to transition to a specific page or display an error message. Could somebody provide some sample code on how to write this transition?
I get that the href should look something like this:
Next page
But how do I call this from within a javascript callback function? Thanks!
Invoking changePage from your callback should accomplish what you are trying to do.
Your_Callback(){
if(YES) {
changePage("nextPage.html");
} else if(NO){
changePage("errorPage.html");
}
}
Would it be possible to share the JS code that's not working for you?
There is a method for this purpose:
$.mobile.changePage('nextPage.html')
Check de documentation to see the parameter it accepts
Did you consider writing the page in PHP to create a session cookie?
`session_start();
$url = $_SESSION['back'];'
in the jquery you would use:
window.location ="'.$url.'";
or
maybe try location.href = "myPage.html"
Related
I receive data in a function and this function needs to load a new page. I was doing this with Jquery using the method .load(), But my vue method gets an error saying that can not find the element in the other page.I believe that could be a better approach, but I do not know how I can pass data through a vue component
static foo(a,b){
$('#maindiv').load("/newPage");
new Vue({
el: '#newPageElem',
data: {
vueVar1:a
vueVar2:b
},
});
}
How can I do that? I believe that using Jquery is not the best way to achieve this, but I dont know how to change routes with vue and passing parameter between them.
Thanks.
You can take a look at vue-router here: http://router.vuejs.org/en/essentials/getting-started.html - it allows you to handle all the client-side routes.
For making http calls to receive data from server, you can use vue-resource (https://github.com/vuejs/vue-resource)
It is better to avoid mixing jQuery with Vue, as Vue is responsible for rendering the DOM. If you make any DOM changes with jQuery, it will get over-written by Vue in the next DOM update. So you will end up spending a lot of time in debugging.
Also, you cannot instantiate a Vue app inside a function, as seen in your code example, unless you call the function on page load. Ideally, the first few lines of script should start the Vue app.
I'm facing an issue (or probably two) that is frustrating the swearwords out of me; keep in mind, I'm a fairly beginner coder, so there's a good chance I'm missing something obvious.
One: I've got a page that has a sidebar that is hidden via a class containing margin-left: -90%. When the class is removed, the bar slides in to fill the whole screen. I can handle this really easily with jQuery, but I'd rather stick as much as possible in Angular - to this end, I've given it the following code:
<div id="detail_box" ng-class="{d_hide: dVis}">
<div tw-detail></div>
</div>
Which, as you can see, has a class that refers to a variable in a controller, and a link that has an ng-click connected to a function. The controller in question is stupidly simple, and relies on $rootScope variables. I'm only using rootScope because in total, over my whole page, I have two variables that will need to change dynamically, but be the same, for every controller and directive I've made. The connecting scope and controller are here:
app.run(function($rootScope) {
$rootScope.currentUrl = 'visual/design/1/';
$rootScope.detail_hide = true;
});
app.controller('navController', ['$scope', '$rootScope',
function ($scope, $rootScope) {
$scope.dVis = $rootScope.detail_hide;
$scope.hide = function(){
$rootScope.detail_hide = false;
}
}]);
Now, I've used console.log from my ng-click to see that it is picking up clicks, and I've used console.log to make sure that the detail_hide part of rootScope is changing. If I change true to false by hand in my app.js, the detail page hides itself just fine... but that ng-click doesn't actually do what I'm trying when I test it on the page. It's painful and I can't understand why changing the variable via a function (which I know changes the actual variable in rootScope, thanks to extensive testing) isn't telling my detail box to just go away.
Secondly, and it's connected to the first; dynamically changing the currentUrl in rootScope similarly doesn't change the actual AJAX content I've got stuck inside my twDetail directive, even though, again, the ng-click functions I've written do change the variable. Changing it manually works fine (although images in the second URL aren't loading but that's probably an entirely different problem) but just... what the heck am I doing wrong here?
The following code is only being run once, when the controller is being setup
$scope.dVis = $rootScope.detail_hide
Make sure you change the $scope.dVis in the hide function, like this
$scope.hide = function(){
$rootScope.detail_hide = false;
$scope.dVis = $rootScope.detail_hide;
}
I need more info on the twDetail directive to be able to solve that problem
I have an array from ajax and i need to create jQuery Mobile Listview. I don't found a method for this, so is it possible?
Here's a working example: http://jsfiddle.net/Gajotres/SS7vJ/
And another example with an array: http://jsfiddle.net/Gajotres/yHHWQ/
$(document).on('pagebeforeshow', '#index', function(){
$('<ul>').attr({'id':'test-listview','data-role':'listview', 'data-filter':'true','data-filter-placeholder':'Search...'}).appendTo('#index [data-role="content"]');
$('<li>').append('Audi').appendTo('#test-listview');
$('<li>').append('Mercedes').appendTo('#test-listview');
$('<li>').append('Opel').appendTo('#test-listview');
$('#test-listview').listview().listview('refresh');
});
Also don't forget to call .listview( twice, first without refresh parameter, and second time with a refresh parameter. Without it you will receive this error:
cannot call methods on listview prior to initialization
If you want to find out more about how jQuery mobile handles dynamically added content and its markup take a look at this ARTICLE, to be transparent it is my personal blog, or find it HERE.
I have multipul input fields on a page, a few of them are type="textfield"
and some of those textfields i want to group,
so that if i type something into one of them it propergates to the rest within that group.
I have tried using the same name as radio buttons work like this, but that doesn't seem to work.
i have looked around the net but cannot find any examples.
does anyone know how to do this, or anywhere which tells you how?
Regards
chris
I don't think it's possible with pure html, have you tried using JavaScript? I would look into jQuery to set up event handlers for that.
$('textbox1').change(function(o) {
$('textbox2').val($(o).val());
}
Will react to all changes of textbox1 and replicate the value to textbox2. Untested code, only an approach.
jQuery since version 1.7 offers a convenient way to handle several events by using the .on() handler - method:
$(document).ready(function() {
$('#textbox1').on('keypress keyup change', function(event) {
$('#textbox2').val(event.target.value);
});
});
I have predefine MooTools.js and some another javascript called moomenu for dropdown...
However i could test the code and i come to know that "typeof(MooTool)" return undefined...
I am new to MooTool so will any body please tell me what happens there???
It's because your calling it "MooTool" instead of "MooTools"; however, if you look at the source, var MooTools only refers to an object with the version and build information. If you're trying to select an element, you want to look at the $ and $$ functions of the Element object:
http://mootools.net/docs/core/Element/Element