Can someone help me to figure out why my collapsible panel won't expand? My html markup with jquery mobile appears to be working. The data gets bound to the collapsible set via a foreach loop, but the panels will not expand.
html:
<div data-role="collapsible-set" class="ui-block-a" data-bind="foreach: opportunityData">
<div data-collapsed="true" data-role="collapsible" >
<h3>
<span data-bind="text: name" />
</h3>
<p data-bind="text: company" />
</div>
</div>
JS:
function OpportunityViewModel() {
var self = this;
self.opportunityData = ko.observable([]);
$.ajax({
url: 'url....',
type: 'GET',
async: true,
cache: false,
crossDomain: true,
dataType: 'jsonp',
success: function (data) {
self.opportunityData(data)
},
error: function (jqXHR, textStatus, ex) {
alert(textStatus + "," + ex + "," + jqXHR.responseText);
}
}); //end ajax call
}; //end viewmodel
ko.applyBindings(new OpportunityViewModel());
});
I just found the solution, just create a new out side div then put foreach in that div:
<div data-bind="foreach: opportunityData">
<div data-role="collapsible-set" class="ui-block-a" >
<div data-collapsed="true" data-role="collapsible" >
<h3>
<span data-bind="text: name" />
</h3>
<p data-bind="text: company" />
</div>
</div>
</div>
Related
I am creating an 'assign button' which calls a modal. In this modal will search a username queried from a database table. This autocomplete should be listed in the modal box, in fact it is not. I am using Jquery UI for this.
The "No search result" text is behind the modal, as well the assignee is listed behind the modal.
I am detailing my code in this jsfiddle
This is my original code:
$("#user_name").autocomplete({
source: function(request, response) {
$.ajax({
url: "https://dummyjson.com/products",
// url: "<?= site_url('Inventory/readuser'); ?>",
method: "get",
dataType: "json",
data: {
term: request.term
},
success: function(data) {
console.log("response --> ", data);
response(data); //callback fn
}
}) //ajax
console.log("ok");
}, //source
select: function(event, ui) {
$('[name="username"]').val(ui.item.username);
$('[name="role"]').val(ui.item.role);
$('[name="location"]').val(ui.item.location);
}
}); //#user_name
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-3">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js" integrity="sha512-57oZ/vW8ANMjR/KQ6Be9v/+/h6bq9/l3f0Oc7vn6qMqyhvPd1cvKBRWWpzu0QoneImqr2SkmO4MSqU+RpHom3Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<i class="bx bxs-filter-alt text-white-50"></i>Assign
</div>
<div class="modal fade" id="updateUser" tabindex="-1" aria-labelledby="updateUser" aria-hidden="true">
<div class="modal-dialog modal-dialog-sm modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">Assign user ...</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<fieldset class="border rounded-3 p-2">
<legend class="float-none w-auto px-2 small">type a user name</legend>
<div class="frmSearch">
<input type="text" class="form-control form-control-sm" id="user_name" name="user_name" size="20" maxlength="3">
<div id="suggesstion-box"></div>
</div>
</fieldset>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary btn-save-filter" data-bs-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary btn-save-filter" data-bs-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
but in fiddle I am using dummy json from
https://dummyjson.com/docs/products
Please advise how to put the listed value into the green box in the modal.
Please review the following:
https://jsfiddle.net/Twisty/orv2j67n/1/
JavaScript
$("#user_name").autocomplete({
appendTo: "#suggestion-box",
source: function(request, response) {
$.ajax({
url: "https://dummyjson.com/products",
method: "get",
dataType: "json",
data: {
term: request.term
},
success: function(data) {
var results = $.map(data.products, function(v, i) {
v = $.extend(v, {
label: v.brand,
value: v.brand
});
return v;
});
console.log(results);
response(results);
}
});
console.log("ok");
},
select: function(event, ui) {
$('[name="label"]').val(ui.item.title);
}
});
Two changes to be aware of:
appendTo: "#suggestion-box",
Which element the menu should be appended to. When the value is null, the parents of the input field will be checked for a class of ui-front. If an element with the ui-front class is found, the menu will be appended to that element. Regardless of the value, if no element is found, the menu will be appended to the body.
I also added a $.map() in the Success. This ensure that the proper elements exist when passing the data back to response().
var results = $.map(data.products, function(v, i) {
v = $.extend(v, {
label: v.brand,
value: v.brand
});
return v;
});
console.log(results);
response(results);
This is discussed here: https://api.jqueryui.com/autocomplete/#option-source
An array of objects with label and value properties: [ { label: "Choice1", value: "value1" }, ... ]
I figured out how to make a checkbox dropdown without using custom Javascript other than the bootstrap library for the dropdown button. No Javascript for handling the form data.:
http://plnkr.co/edit/NOM0UK2io6LaiJE5aSbs?p=preview
I have implemented this in an ASP-MVC view, but the behavior id different. In the ASP-MVC version, the dropdown pops back up after each checkbox selection. It's very annoying.
The ASP-MVC code is just the container div and its contents. Here is a live example, for as long as it stays up.
HTML + Bootstrap:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form action="http://yahoo.com" method="get" target="_blank">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Checkboxes
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><input type="checkbox" name="cx1">cx1</li>
<li role="presentation"><input type="checkbox" name="cx2">cx2</li>
<li role="presentation"><input type="checkbox" name="cx3">cx3</li>
<li role="presentation"><input type="checkbox" name="cx4">cx4</li>
</ul>
</div>
<input type="submit" value="submit" class="btn btn-default">
</form>
</div>
</body>
</html>
Index.cshtml
#{
ViewBag.Title = "View";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="container">
<form action="http://yahoo.com" method="get" target="_blank">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">
Checkboxes
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><input type="checkbox" name="cx1" data-stoppropagation="true">cx1</li>
<li role="presentation"><input type="checkbox" name="cx2" data-stoppropagation="true">cx2</li>
<li role="presentation"><input type="checkbox" name="cx3" data-stoppropagation="true">cx3</li>
<li role="presentation"><input type="checkbox" name="cx4" data-stoppropagation="true">cx4</li>
</ul>
</div>
<input type="submit" value="submit" class="btn btn-default">
</form>
</div>
<script type="text/javascript">
$(function () {
$("ul.dropdown-menu").on("click", "[data-stopPropagation]", function (e) {
e.stopPropagation();
});
});
</script>
#section Scripts{
<script type="text/javascript">
$(function () {
$("ul.dropdown-menu").on("click", "[data-stopPropagation]", function (e) {
e.stopPropagation();
});
});
</script>
}
EDIT: offending Javascript
$(document).ready(function () {
getSpeciesList();
});
var current_path = window.location.pathname;
var current_controller = current_path.split('/')[1];
var species_select_url = "/" + current_controller + "/fillSpeciesSelect";
function getSpeciesList() {
console.log("in get species list");
$.ajax({
type: "GET",
url: url, // the method we are calling
contentType: "application/json; charset=utf-8",
dataType: "json",
data: "",
success: function (result) {
//alert("successfully got species list");
//alert(result[0]["SpeciesName"]);
fillSpeciesList(result);
},
error: function (result) {
//alert('Oh no aa :(' + result[0]);
}
})
}
function fillSpeciesList(species_list) {
console.log(species_list[0]["SpeciesName"]);
var species_select = $('.rreport-species-select');
for (var i = 0 ; i < species_list.length ; i++) {
//alert(species_list[i]["SpeciesName"]);
console.log(species_list[i]["SpeciesName"]);
species_select.append
(
"<li role='presentation'>" +
"<input type='checkbox' " +
"name='" + species_list[i]['SpeciesId'] + "' " +
"data-stoppropagation='true'" +
">" + species_list[i]['SpeciesName'] + "</li>" +
"</option>"
);
}
}
$('#species-select').on('change', function () {
var species_id = $('.report-species-select').val();
$('#variety-select').empty();
$.ajax({
type: "GET",
url: "/" + current_controller + "/fillVarietiesSelect", // the method we are calling
contentType: "application/json; charset=utf-8",
data: { "species_id": species_id },
dataType: "json",
success: function (result) {
fillVarietiesList(result);
},
error: function (result) {
alert('Oh no aa :(' + result[0]);
}
});
});
Referring to this answer Keep DropDown Open
Try this:
Add Script tag to whatever view you're working on
$(function () {
$("ul.dropdown-menu").on("click", "[data-stopPropagation]", function (e) {
e.stopPropagation();
});
});
As per the accepted answer add data-stoppropagation="true" to every checkbox element.
<input type="checkbox" name="cx1" data-stoppropagation="true">cx1</li>
I want to use autocomplete and popover in one input tag.
But autocomplete can't display , I see google chrome developer tools, autocomplete is work, just can't display . I don't know how to do .
HTML code
<span class="form-labelTitle img-searchForm02">place</span>
<input class="auto-input" placeholder="city" data-toggle="popover" data-placement="bottom">
<div class="leave-btn"></div>
<div class="autocomplete-div auto1"></div>
<div id="popover-content" class="hide">
<div role="tabpanel">
<ul class="nav nav-tabs arrival-tabs" role="tablist" id="myTab">
<li class="active" role="presentation" ><a href='#JPN' role='tab' data-toggle='tab'>japan</a></li>
<li role="presentation" ><a href='#TPE' role='tab' data-toggle='tab'>taiwan</a></li>
</ul>
<div class="tab-content">
<div class='tab-pane active city' id='JPN'>
<span>Tokyo</span>
<span>okinawa</span>
</div>
<div class='tab-pane' id='TPE'>
<span>taipei</span>
</div>
JS code
$(function(){
$('.auto-input').popover({
'html': true,
'content': function () {
return $('#popover-content').html();
}
});
$('.auto-input').autocomplete({
open:function(event, ui){
$(this).popover('hide');
},
source: [
"tokyo",
"okinawa",
"taipei
],
appendTo:($('.auto1')),
});
});
I'm currently working on a ASP.NET MVC project. The sites of the web application are created with Bootstrap. Later I added some AngularJS script to be able to translate the page into different languages. This works fine for all the pages, but not so if a partial view is loaded from a page.
So, for example I have a page to search for rollout objects by name or host name. On the page all the angular expressions in curly braces are evaluated properly and are replaced with strings in several languages by using a translate script. Now if I filter the objects by one of the three attributes the partial view for that page is loaded showing the results of the search, but here are the angular expressions not evaluated and it just shows the expressions themselves.
Here is the page where it works properly:
#{
ViewBag.Title = "{{ 'ROLLOUT-OBJECT_MANAGEMENT.TITLE' | translate }}";
}
<!-- html -->
<div style="font-size: 20px; margin-top: 20px; margin-bottom: 20px;">
<div class="gray-background list-group-item" translate="{{'ROLLOUT-OBJECT_MANAGEMENT.TITLE'}}"></div>
</div>
<div class="list-group">
<div class="gray-background list-group-item">
<div class="row margin-bottom">
<div class="col-md-3">
<h6 translate="{{'ROLLOUT-OBJECT_MANAGEMENT.FIRST_NAME'}}"></h6>
</div>
<div class="col-md-3">
<h6 translate="{{'ROLLOUT-OBJECT_MANAGEMENT.SURNAME'}}"></h6>
</div>
<div class="col-md-3">
<h6 translate="{{'ROLLOUT-OBJECT_MANAGEMENT.HOST_NAME'}}"></h6>
</div>
</div>
<div class="row margin-bottom">
<div class="col-md-3">
<!-- referenced in getPartial() -->
<input type="text" class="form-control" id="iFirstName" name="iFirstName" placeholder="">
</div>
<div class="col-md-3">
<!-- referenced in getPartial() -->
<input type="text" class="form-control" id="iSurName" name="iSurName" placeholder="">
</div>
<div class="col-md-3">
<!-- referenced in getPartial() -->
<input type="text" class="form-control" id="iHostName" name="iHostName" placeholder="">
</div>
<div class="col-md-3">
<!-- getPartial() added to click through javascript-->
<button type="submit" class="btn btn-primary btn-block" id="iButton"><span translate="{{'ROLLOUT-OBJECT_MANAGEMENT.BUTTON_SEARCH'}}"></span><span class="white-color glyphicon glyphicon-search"></span></button>
</div>
</div>
</div>
</div>
<div class="list-group">
<div class="gray-background list-group-item">
<h5><span translate="{{'ROLLOUT-OBJECT_MANAGEMENT.RESULTS'}}"></span><span class="purple-color glyphicon glyphicon-globe"></span></h5>
</div>
<!-- referenced in getPartial() -->
<div class="gray-background list-group-item">
<div class="row">
<div class="col-md-12" id="partialViewContainer">
#{Html.RenderPartial("_RolloutObjectManagementResultsPartial");}
</div>
</div>
</div>
</div>
<!-- layout -->
#Styles.Render(
"~/content/chosen/chosen.css",
"~/content/chosen/prism.css",
"~/content/chosen/style.css",
"~/content/bootstrap.css",
"~/content/Site.css")
<!-- javascript -->
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/chosen/chosen.jquery.js"></script>
<script src="~/Scripts/chosen/prism.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
<script>
var config = {
'.chosen-select': {},
'.chosen-select-deselect': { allow_single_deselect: true },
'.chosen-select-no-single': { disable_search_threshold: 10 },
'.chosen-select-no-results': { no_results_text: 'Oops, nothing found!' },
'.chosen-select-width': { width: "95%" }
}
for (var selector in config) {
$(selector).chosen(config[selector]);
}
</script>
<script>
//add functionality to button
$('#iButton').click(function () {
getPartial('0');
});
</script>
<script>
function previous() {
var temp = document.getElementById("hPage").value;
//alert(temp);//debug
if (temp > 0) {
temp = --temp;
}
getPartial(temp);
}
function next() {
var temp = document.getElementById("hPage").value;
//alert(temp);//debug
temp = ++temp;
getPartial(temp);
}
</script>
<script>
function getPartial(newPage) {
//get search values
var tempFirst = document.getElementById("iFirstName");
var tempSur = document.getElementById("iSurName");
var tempHost = document.getElementById("iHostName");
var firstResult = tempFirst.value;
var surResult = tempSur.value;
var hostResult = tempHost.value;
//ajax call
$.ajax({
url: "_RolloutObjectManagementResultsPartial",
type: "POST",
data: { firstName: firstResult, surName: surResult, hostName: hostResult, page: newPage, count: 10 },
dataType: "html",
error: function (xhr) {
//alert(xhr.responseText);//debug
},
success: function (result) {
$("#partialViewContainer").html(result).find("select").each(function () {
$(this).chosen({});
})
},
complete: function () {
//alert("everything worked");//debug
}
});
}
</script>
And here is the partial view where it doesn't work (important are the expressions in {{...}}:
<!-- Import needed namespaces -->
#using RolloutTool.BusinessLayer.Foundation
#using RolloutTool.Utility
<!-- Initializing needed variables -->
#{
List<RolloutObject> RolloutObjects = ViewContext.Controller.ViewBag.RolloutObjects;
List<Cluster> Clusters = ViewContext.Controller.ViewBag.Clusters;
string name = "";
int count = 0;
string rowID = "";
int page = 0;
if (ViewContext.Controller.ViewBag.Page != null)
{
page = ViewContext.Controller.ViewBag.Page;
}
}
<!-- html elements -->
<div class="row">
<div class="col-md-12">
<table class="table">
<thead>
<tr>
<th style="width:25%"><h6 translate="{{'ROLLOUT-OBJECT_MANAGEMENT.EMPLOYEE'}}"></h6></th>
<th style="width:20%"><h6 translate="{{'ROLLOUT-OBJECT_MANAGEMENT.WORK_STATION'}}"></h6></th>
<th class="text-center" style="width:15%"><h6 translate="{{'ROLLOUT-OBJECT_MANAGEMENT.EDIT'}}"></h6></th>
<th class="text-center" style="width:25%"><h6 translate="{{'ROLLOUT-OBJECT_MANAGEMENT.CLUSTER'}}"></h6></th>
<th class="text-center" style="width:15%"><h6 translate="{{'ROLLOUT-OBJECT_MANAGEMENT.ASSIGN'}}"></h6></th>
</tr>
</thead>
<tbody>
<!-- creating all RolloutObject Table rows -->
#foreach (RolloutObject ro in RolloutObjects)
{
<!-- generating rowID -->
rowID = "row" + Convert.ToString(count);
count++;
<!-- generating the full employee name -->
name = Functions.TryGetValue(ro.Employee.FirstName) + " " + Functions.TryGetValue(ro.Employee.SecondName) + " " + Functions.TryGetValue(ro.Employee.Name);
<tr id="#rowID">
<td>#name</td>
<td id="#Convert.ToString(rowID + "_hn")">#Convert.ToString(Functions.TryGetValue(ro.Hostname))</td>
<!-- generate link to right rolloutobjectedit -->
<td class="text-center"><span class="btn-pencil glyphicon glyphicon-pencil blue-color glyph-hov" onclick="location.href='#Url.Action("RolloutObjectEdit", "RolloutObject", new {hostName = ro.Hostname })'"></span></td>
<!-- generating the link for cluster addition and populating cluster dropdown -->
<td class="text-center">
<div class="row">
<div class="col-sm-12">
<select class="chosen-select no-margin" style="width:100%" id="#Convert.ToString(rowID + "_cl")" name="iCluster" data-placeholder="Cluster">
#if (ro.Cluster != null)
{
<option selected>#Convert.ToString(Functions.TryGetValue(ro.Cluster.Name))</option>
}
else
{
<option></option>
}
#foreach (Cluster cluster in Clusters)
{
<option>#Convert.ToString(Functions.TryGetValue(cluster.Name))</option>
}
</select>
</div>
</div>
</td>
<td class="text-center"><span class="btn-ok glyphicon glyphicon-ok green-color glyph-hov" onclick="callAjax('#rowID')" /></td>
</tr>
}
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="col-md-12">
<input class="hidden" id="hPage" value="#Convert.ToString(page)" />
<nav>
<ul class="pager">
<li class="pull-left"><a class="btn-paging glyphicon glyphicon-arrow-left" onclick="previous()"></a></li>
<li class="pull-right"><a class="btn-paging glyphicon glyphicon-arrow-right" onclick="next()"></a></li>
</ul>
</nav>
</div>
</div>
<!-- javascript -->
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/chosen/chosen.jquery.js"></script>
<script src="~/Scripts/chosen/prism.js"></script>
<script>
function callAjax(idRow) {
//get row values
var tempTD = document.getElementById(idRow + "_hn");
var tempSelect = document.getElementById(idRow + "_cl");
var tempHostName = tempTD.textContent;
var tempCluster = tempSelect.options[tempSelect.selectedIndex].text;
//ajax call
$.ajax({
url: "AddToCluster",
type: "POST",
data: { clusterName: tempCluster, hostName: tempHostName },
dataType: "html",
error: function (xhr) {
alert(xhr.responseText);
},
success: function (result) {
},
complete: function () {
//alert("everything worked");//debug
}
});
}
</script>
<script>
function previous() {
var temp = document.getElementById("hPage").value;
//alert(temp);//debug
if (temp > 0) {
temp = --temp;
}
getPartial(temp);
}
function next() {
var temp = document.getElementById("hPage").value;
//alert(temp);//debug
temp = ++temp;
getPartial(temp);
}
</script>
<script>
function getPartial(newPage) {
//get search values
var tempFirst = document.getElementById("iFirstName");
var tempSur = document.getElementById("iSurName");
var tempHost = document.getElementById("iHostName");
var firstResult = tempFirst.value;
var surResult = tempSur.value;
var hostResult = tempHost.value;
//ajax call
$.ajax({
url: "_RolloutObjectManagementResultsPartial",
type: "POST",
data: { firstName: firstResult, surName: surResult, hostName: hostResult, page: newPage, count: 10 },
dataType: "html",
error: function (xhr) {
alert(xhr.responseText);
},
success: function (result) {
$("#partialViewContainer").html(result).find("select").each(function () {
$(this).chosen({});
})
},
complete: function () {
//alert("everything worked");//debug
}
});
}
</script>
This is the _Layout.cshtml where the scripts are contained and loaded:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - {{ 'TITLE.PROGRAM' | translate }}</title>
#Styles.Render(
"~/Content/css",
"~/Content/flag-icon-css-master/assets/docs.css",
"~/Content/flag-icon-css-master/css/flag-icon.min.css",
"~/Content/Site.css")
<script src="~/Scripts/angular/angular.js"></script>
<script src="~/Scripts/angular/angular-translate.js"></script>
<script src="~/Scripts/angular/angular-cookies.min.js"></script>
<script src="~/Scripts/angular/translate.js"></script>
<script src="~/Scripts/angular/angular-route.min.js"></script>
<script src="~/Scripts/angular/angular-translate-storage-cookie.min.js"></script>
<script src="~/Scripts/angular/angular-translate-storage-local.min.js"></script>
</head>
<body ng-controller="Ctrl">
<!-- Here is the html for the navigation bar etc. -->
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
I am really not an expert on AngularJS as I only wanted to provide some cool translation feature, but I hope you guys have an idea why it doesn't work in the partial views.
Its just that you need to call the partial view using ng-include("'controller/action'"). Apostrophe(') is important while writing url.
Example
<div id="TestDiv" ng-include="templateUrl"></div>
and inside the angular controller
var app = angular.module("Layout", []);
app.controller("LoadPage", function ($scope, $http, $sce) {
//Initially
$scope.templateUrl = '/Home/DefaultPage';
// To dynamically change the URL.
$scope.NewProjFn = function () {
$scope.templateUrl = '/Home/ProjectPage';
};
});
It might well not at all be difficult for you to re-implement it but by using ng-include you also need not to make an ajax call. It do it all by itself which includes ajax call, compilation and display. But the functions like ng-click and other events will not work as its a one time compilation process.
I'm working on a single page application using jquery mobile along with knockout.js binding on MVC4 platform..
This is my button on the main div page:
<div data-role="page" id="pageMain">
<div data-role="content">
View Invoices
</div>
</div>
This is my target div page:
<div data-role="page" id="pageExisting">
<div data-role="header">
<h1>Existing Invoices's</h1>
<a data-rel="back" data-role="button">Back</a>
</div>
<div class="choice_list" data-role="content" data-bind="visible: Headers().length > 0">
<ul id="headersList" data-role="listview" data-bind="foreach: Headers" data-filter-placeholder="Search Invoice" data-filter-theme="a" data-inset="true"
data-filter="true" data-theme="b">
<li>
<a href="#" data-inline="true">
<h2>Invoice No.: <span data-bind="text: inv_no"></span></h2>
<p>Amount.: <span data-bind="text: inv_amt"></span></p>
</a>
</ul>
</div>
</div>
Here is the script section:
var HeaderViewModel = function () {
//Make the self as 'this' reference
var self = this;
self.Headers = ko.observableArray([]);
function GetHeaders() {
//Ajax Call Get All Employee Records
// self.GetHeaders = function () {
$.ajax({
type: "GET",
url: "/api/InvAPI",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
self.Headers(data);
},
complete: function () {
$.mobile.changePage("#pageExisting");
},
error: function (error) {
alert(error.status + "<--and--> " + error.statusText);
}
});
}
self.GetHeader = function () {
GetHeaders();
}
};
$(document).ready(function () {
ko.applyBindings(new HeaderViewModel());
}
When I hit the button "view Invoices" I get a typical Jquery mobile formated listview
but the problem is when I hit the back button and navigate again to the "PageExisiting" div Page I get the list data with no styling..
When viewing page source in both cases, I noticed that on second navigation;
Li tags have not attributes.
I have tried some solutions like: listview refresh, page destroy, page create prior to the line:
$.mobile.changePage("#pageExisting");
with no luck.
I'm stuck here guys and I will appreciate your proposed solutions
Thanks
Refresh list view before showing the page.
$('#pageID').on('pagebeforeshow', function() {
$('[data-role=listview]').listview('refresh');
});