I want to attach a variable into my HTML. I am using .html to do this but doesn't seem to be working.
Also am I right to use the pageinit event? The page is dynamic , the content is different depending on the choice from a list on the previous page.
Maybe append would be a better choice? Im unsure.. Any advice?
Here is my JS file
$(document).on('pageinit','#details-page', function(){
var details_view = "";
$(function() {
$.getJSON('js/bands.json', function(data) {
details_view += '<div><p>Content goes here</p></div>';
});
});
$('#detail_content').html(details_view);
});
Here is my HTML.
<div data-role="page" id="details-page">
<div data-role="header" class="header">
</div>
<div data-role="content" id="detail_content">
// **I want the details_view variable content to go here**
</div>
<div data-role="footer" class="footer" data-position="fixed">
</div>
</div>
$.getJSON() is an AJAX method. A stands for asynchronous, which means it will be finished later in the future. Whatever you want to happen when the request is finished, you should do it in the callback:
$.getJSON('js/bands.json', function(data) {
details_view += '<div><p>Content goes here</p></div>';
$('#detail_content').html(details_view);
});
Your $.getJSON() call is asynchronous. The line of code that calls .html() will run long before the data is returned.
Related
For example we have two php pages (same domain):
index.php
data.php (that uses a jQuery script)
If I load a part of the "data.php" inside the "index.php" I have to re execute the js file from the "data.php" like this:
$( ".box" ).load("data.php .my_data", function() {
$.getScript("https://website.com/js/data.js");
});
Is there an other/better way to load a part from the external data.php and automatically execute all js that is connected with it?
data.php (this template contains no script)
<div class="template">
<div class="title">
<span>Title</span>
</div>
<div class="content">
<span>Content</span>
</div>
<div>
<button type="button">Read</button>
</div>
</div>
Script on index.php:
In this example, I just show the event when clicking on the button, there are some ways to define it:
Option 1: Write the event after loading template successfully
$('.box').load('data.php').done(function (template) {
template = $(template).appendTo('body');
template.on('click', 'button', function () {
console.log('clicked!');
});
});
Option 2: Write the event outside the event which is used to load the template
$('.box').load('data.php').done(function (template) {
$(template).appendTo('body');
});
$(document).on('click', 'button', function () {
console.log('clicked!');
});
This ways require all of the scripts which are working on data.php are ready on index.php.
If you don't want to move/split the code:
data.php:
<div class="template">
<div class="title">
<span>Title</span>
</div>
<div class="content">
<span>Content</span>
</div>
<div>
<button type="button">Read</button>
</div>
</div>
<script src="/js/data.js"></script>
In the file data.js, if you want to load something more but not immediately, make sure you're working with document (there are more ways but I highly recommend this):
data.js
// this code works imediately after your document has `.load` class
$(document).on('click', '.load', function () {
// this code will work if your document already has `.box` class
$('.box').load('some_data.php').done(function (template) {
console.log(template);
});
});
On the index.php, after appending the template, the code will work correctly. Nothing is automatically more.
I have a list of buttons in my <div>, when the user click on a specific div, I want display a view of my controller, for example:
<div class="row">
<div id="booking" class="command-buttons tile col-xs-12 btn">
<h3 class="title">Book appointment</h3>
</div>
</div>
I want load the appointment booking page when my user click on booking div. For load a view I use this code:
$this->load->view('appointments/book', $view);
but how I can do this using js? Usually a call a function that contains the view load, but in this case I'm on js side.
probably something like that:
$('div#booking').on('click', function() {
$(this).load( "view.html");
});
you can find some details here http://api.jquery.com/load/
I'm not entirely sure, but I think
echo $this->load->view('appointments/book', $view, true);
will return the html to your ajax success function and you can then easily inject it in the page.
I have to call $route.reload(); in controller 2 addData API call so that I can get the added data in my UI. But then the text 'Data added successfully' goes away due to page refresh.
controller 1:
$rootScope.$on('reloaded', function(event, data) {
$scope.$parent.alerts.length=0;
$scope.$parent.alerts.push({type: 'success',msg: 'Data added successfully'});
});
controller 2:
$scope.add = function() {
someAPIService.addData(JSON.stringify($scope.rows)).success(function(response) {
ngDialog.close('ngdialog1');
$route.reload();
$rootScope.$emit('reloaded', "true");
});
}
HTML Part:
<section>
<div ng-controller="controller3">
<alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}</alert>
</div>
<div class="row form-inline" ng-controller="controller2 as vm">
<!-- Table data with text fields-->
</div>
<script type="text/ng-template" id="addDataDialog">
<div id="frm" ng-controller="controller1" class="col-xm-6">
<div class="form-group">
<!-- Labels with text fields-->
</div>
<button class="ngdialog-button" ng-click="add()">Save</button>
</div>
</script>
</section>
NOTE: Both controllers are in the same JS file and they are used for the same HTML file.
As you want to only load the latest record list which is on server side. Then there is not need to use $route.reload(); after making post call. You need to only make ajax call to get the latest records list that will solve your problem. For making ajax you need to refer $http
$route.reload() is getting used only when you need to load
controller again with specified template in your $routeProvider when
condition
just a simple hint of an answer:
add a (specific) cookie (with javascript) before calling reload (use e.g Cookies lib),
read it on reload,
and then delete it
Also you may use local storage if it is available instead of a cookie using same steps:
add a specific entry in local storage, before calling reload
read it on reload
and then delete it
Another option to maintain state client-side is to use url parameters but these will not do for page reload
I'm using $.mobile.navigate("#test-page", {id:123}) to navigate to a secondary page.
The navigation from page to page works fine.... but the state is empty!
The docs clearly show that the state should contain all information I need when the navigation is performed.
This is the code I'm using:
$(window).on('navigate', function(event, data) {
console.log("navigated", data);
console.log(data.state.info);
console.log(data.state.direction);
console.log(data.state.url);
console.log(data.state.hash);
if (data.state.hash === "test-page") {
console.log("Test page", data.state.id);
}
});
Unfortunately data is passed as empty:
{
state:{}
}
The HTML is the following:
<div id="test-home" data-role="page">
<div data-role="header">
<h1>Test Home</h1>
</div>
<div data-role="content">
<div id="test-btn">
Click DIV for TEST page
</div>
</div>
<div data-role="footer">
</div>
</div>
<div id="test-page" data-role="page">
<div data-role="header">
<h1>Test Page</h1>
</div>
<div data-role="content">
Test page
</div>
</div>
Hope that someone can help. Thanks!
$.mobile.navigate and navigate event, are used to track URL history and pass/fetch data from URL. They work with browser's navigation (back / forward).
To pass data between pages dynamically within a webapp using internal navigation, use $.mobile.changePage.
Resources:
$.mobile.navigate()
Navigate
$.mobile.changePage()
Use the below code to pass data from page to another.
$.mobile.changePage('store.html', {
dataUrl: "store.html?id=123",
data: {
'id': '123'
},
reloadPage: true // force page to reload
});
To retrieve data
$('.selector').on('pagebeforeshow', function () {
var values = $(this).data("url").split("?")[1];
id = values.replace("id=", "");
console.log(id);
});
I know it is an old question, but #Omar's answer can be improved.
In fact, it is possible to use pagecontainerbeforehide, pagecontainerbeforeshow, pagecontainerhide, pagecontainershow, pagecontainertransition and pagecontainerchange (they are fired in this order) and inside the handler you can read the property history.state, that at that point is updated with the new state.
So, for example, you can write (to initialize things that need the page already formatted, e.g. Google Maps):
$(document).on("pagecontainershow", function(e, data) {
console.log("pagecontainershow: " + JSON.stringify(history.state));
});
This works in all cases: if you click on a link (with a hash, e.g. #user), if you navigate with the back and forward buttons, if you use $.mobile.navigate and also for window.history.back().
Moreover, you can pass complex data, not limited to the query string constraints.
Resources:
Pagecontainer
History
I am trying to rewrite this link so instead of linking to a light box, it makes an ajax call and updates the contents of <div class = "add-rule>. Here is the link
<div class="add-rule>"Add a rule</div>
I am new to Javascript and Ajax, so any help would be much appreciated.
The code should look some like this (couldn't check this out but I am not far away)
For more info have a look at jquery's ajax api
and you might be interested in the load function.
This is my code, let me know if it fits or not
<div class="add-rule">
<span id="addRuleError"></span>
<a href="javascript:void(0)" onclick="loadContent()" class="lightwindow"
params="lightwindow_type=external,lightwindow_height=100,lightwindow_width=300">Add a rule</a>
</div>
<script type="text/javascript">
function loadContent()
{
$("#addRuleError").text("");
$.ajax({
url:"saffron_main/add_rule",
data:{type:"tid", mid:0, cid:1, "m-name": "valid"},
success:function(result){$(this).parent().html(result)},
error:function(result){$("#addRuleError").html(result.responseText)}
})
}
</script>