hi all,
i am trying to route my app after successful ajax submision to index (/) but it doesnt seem to work.
but routing to other pages works fine.
i also realised that when i use “/” as the element value eg(home ) i realise it doesn’t go.
kindly assist.
success: function(data){
console.log(data);
setTimeout(function () {
app.dialog.close();
}, 3000);
if(data == 'failed'){
app.dialog.alert("ERROR: Sorry something went wrong");
}else{
localStorage.removeItem("cart");
//mainView.router.refreshPage();
//app.dialog.alert("Order placed successfully","Awesome");
// console.log(mainView.router.currentRoute);
// console.log(mainView.router.routes);
// console.log(document.location.href);
mainView.router.navigate("/",{
force:true
});
}
},
I guess issue can be in your routes configuration which doesn’t have / route
hello @nolimits4web,
please i have / route defined in my route array.
this is how it looks like.
thanks in advance.
routes = [
{
path: '/',
url: './index.html',
//name:'home',
// App root methods
methods: {
helloWorld: function () {
app.dialog.alert('Hello World!');
},
},
on: {
pageInit: function () {
$.ajax({
type: "GET",
url: server_link + 'get_menu_cate.php',
crossDomain: true,
cache: false,
success: function(result){
.........
And what is in your index.html ?
@nolimits4web i have a div that is populated by the get ajax request on pageinit.
and i also have some demi data as well which will also be populated by a get request later.
please it looks like this.
thanks
<div class="view view-main ios-edges">
<!-- Page, data-name contains page name which can be used in callbacks -->
<div class="page" data-name="home">
<!-- Top Navbar -->
<div class="navbar">
<div class="navbar-inner">
<div class="left">
<a href="#" class="link icon-only panel-open" data-panel="left">
<i class="icon f7-icons ios-only">menu</i>
<i class="icon material-icons md-only">menu</i>
</a>
</div>
<div class="title sliding">SweetPepper</div>
<div class="right">
<a href="/cart/" class="link icon-only text-color-red">
<span class="cart_price">₵ <span class='cart_total'></span></span>
<i class="icon f7-icons ios-only">bag_fill</i>
</a>
</div>
</div>
</div>
<!-- Toolbar-->
<!--<div class="toolbar">
<div class="toolbar-inner">
<a href="#" class="link">Left Link</a>
<a href="#" class="link">Right Link</a>
</div>
</div>-->
<!-- Scrollable page content-->
<div class="page-content">
<div class="block block-strong card">
**<div class="row" id="cate_list"> </div>**
</div>
<!--FAVOURITES-->
<div class="block-title">Your Favourites</div>
<div class="list media-list">
<ul>
<li>
<div class="item-content">
<div class="item-media">
<img src="assets/fdflider.jpg" class="home-img" width="100" height="100"/>
</div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">Greek Salad</div>
</div>
<div class="item-subtitle cart-details color-red">
<p>with jellof,fresh fish</p>
<p>Salad</p>
<p class="price">₵ 12.00</p>
<a class="float-right color-red">
<i class="f7-icons ">bag_fill</i>
</a>
</div>
</div>
</div>
</li>
If this code is inside of index.html page then it should work. Otherwise problem is somewhere else. Would be good to see live example
hi @nolimits4web how do i share a live example with you?
would you prefer me to mail a compressed version of my project?
please i’m opened to any suggestions. thanks
regards,
Emmanuel
Better if you can upload it somewhere so it will be available on web for preview
hello @nolimits4web,
i have uploaded it on one of my test servers.
on the check out page, i have consoled out the listed available routes as well.
and i am also requesting a route.navigate to “/”
success: function(data){
console.log(data);
setTimeout(function () {
app.dialog.close();
}, 3000);
if(data == 'failed'){
app.dialog.alert("ERROR: Sorry something went wrong");
}else{
localStorage.removeItem("cart");
//app.dialog.alert("Order placed successfully","Awesome");
console.log(mainView.router.currentRoute);
console.log(mainView.router.routes);
console.log(document.location.href);
/*setTimeout(function () {
window.location.replace("index.html");
}, 2000);*/
// mainView.router.refreshPage();
mainView.router.navigate('/',{
force:true
});
}
},
please find test accounts below.
username: [email protected]
password: 1234567890
link: http://devops.gazelleweb-tech.com/swtppr/www/
also there is something i also noticed that any time im using the back button on the menu category page to the home page, it freezes.
i cant tell if its because of the same route issue.
kindly advice
Looks like issue happens because router can’t extract main-view’s page from index.html file. I will dig deeper it, could be a bug. But i can recommend to move home page’s content to just seprate file and use this technic to load initial home page http://framework7.io/docs/view.html#initial-page-route
hi @nolimits4web, sorry i didnt get that.
you cant recommend me doing that or you do recommend i use your work around.
regards,
Emmanuel
Sorry, was i typo. I recommend you to use the following:
hello,
i am not sure if i get the explanation right on the Doc.
so per my understanding, i copied and paste my index.html content in to a new file home.html.
i added a a route to it as /home/ and i tested but it still didnt route to it.
kindly assist because things are not clearer.
counting on your usual support.
cheers
Your index.html file not correct page/component/template file.
For example, see your “cart.html” file. Its correct page-file because contains valid page structure (<div class="page" data-name="cart">...</div>). Or see your “page-loader-component.html” file. Its correct template-file too because contains valid template-page structure (<template><div class="page">...</div></template>). All this files will work correct with navigate() function.
Finally, see your “index.html” file. The file contain full HTML of page (<html><body>...</body></html>). Isnt correct page/component/template file. It will not work with navigate() calls.
- You must copy into ./pages/home.html only home page structure (
<div class="page" data-name="home">...</div>). And next change route url with “home” name to “./pages/home.html”.
- Keep clean space in block
<div class="view view-main ios-edges"></div>
3 Likes
HELLO @nolimits4web,
thanks to @a.chubutkin, finally figured out what was causing it not to route back to home.
i took my time to analyse my index.html and figured i had commented out some closing divs (i.e page-content and that of the id=app).
i made the corrections and everything seem to work fine now.
im so sorry for the worries.
thanks all the same
cheers
2 Likes
@a.chubutkin thanks chief