I am creating the runtime table in mvc3.net. From controller i am getting the json collection and in view am creating the runtime table according to json collection
first am just initialising the table
<div id="DisplayBookChapterList" class="fLeft per30 mr15">
<table class="contentTable" id="tblDisplayChapterList" >
</table>
In Runtime am populating the table rows by below given code
$.getJSON("#Url.Action("GetBookChapterList", "CourseManagement")" + '/' + bookname, function (data) {
$.each(data, function (key, val) {
BookChapterlist += '<tr><td style="display:none" id=ChapterListBookID value=' + val.BookID + '>' + val.BookID + '</td><td>' + val.ChapterNo + ' </td><td>' + val.Title + '</td><td><input type=checkbox id="' + val.ChapterID + '"></td></tr>';
}
});
$('#DisplayBookChapterList table').append(BookChapterlist);
I want to give paging to this dynamically created table.
You'll want to create the paging links to select a specific page, next, previous, first, last or whatever you need. E.g.
<ul>
#foreach (var page in Enumerable.Range(1, numPages)) {
<li>#Html.ActionLink(page.ToString(), "GetBookChapterList", "CourseManagement", new {page}, new {#class = "page-link"})</li>
}
</ul>
Note that all links have the css class "page-link".
On the server side, add a "page" parameter to your action so you know which page to fetch in the controller.
Now, back to the HTML code: the href of each link is the address where to fetch the data from and we can use this in our JavaScript code:
<script>
$(function() {
$(".page-link").on('click', function(e) {
e.preventDefault();
$.getJSON($(this).attr('href'), function(data) {
console.log(data);
});
});
});
</script>
The nice thing about this approach is that you can make it easily fall back for clients that have JavaScript disabled: in the "GetBookChapterList" action, check if the request is an ajax request (Request.IsAjaxRequest()). If so, return the required JSON data. If not, render a normal, full page showing the selected page of the table.
This is generally a good approach: if possible, make sure the site works without JavaScript, then add JavaScript to improve it.
Add an optional 'Page' parameter to your GetBookChapterList action method and make GetBookChapterList return data for that page. If you use entity framework, use the Skip and Take methods on IQueryable to implement the paging.
In the browser, render next/previous page links at the bottom of the table that gets and re-renders the data for the next/previous page.
Related
I have an HTML link that calls a JavaScript function that in turn makes a NEW link. This new link calls the same JS function when clicked, making another link etc. The function also creates a new div where the next link is added.
function displayChildren(displayLocation, myList) {
innerHtml = "";
for (item in myList) {
name = myList[item];
newDisplayLocation = displayLocation + "/" + name;
innerHtml += "<a href='#' onclick='displayChildren(\"" + newDisplayLocation + "\", " + myList + ");'>" + name + "</a>";
innerHtml += "<div id='" + newDisplayLocation + "'></div>";
}
document.getElementById(displayLocation).innerHTML = innerHtml;
}
{{myList.0}}<br />
<div id="{{myList.0}}"></div>
However, I want to pass this JS function a list as a parameter. The first HTML link made is not dynamically created and therefore can pass that list easily, but subsequent links will not give the JS function the list. The onclick tag will call the JS function and pass other parameters fine, but lists are turned into a string.
So the list [["apple", []]] will turn into apple,. This makes sense because I am putting this entire <a> tag into a string. But I still need that link to pass a list, or just in some way get this JS function a list. Any ideas how to do this?
Additional Information:
I am using this to create a tree structure that will show all of a node's
children when clicked.
The list is changed each time it is passed to the JS function. It actually passes the list of the node's children.
The page is not refreshing.
I have an external javascript file and I have a function that appends HTML to siteLayoutComponent.html DIV as below code:
function LoadNotificationData(data) {
$("#lstNotification").append(' <li id="' + data.id + '"><a (click)="logout()"><i class="fa fa-sign-out fa-fw" "></i>' + data.subject + '</a></li> <li id="dv' + data.id + '" class="divider"></li>')
}
logout function that in a siteLayoutComponent.ts
logout() {
this.router.navigate(['/login']);
}
after inspecting the generated code, we could realize that the event wasn't rendered in a correct way, I need to perform this binding dynamically in the appended HTML. any Ideas
I would prefer to use angular2 directives instead of jquery append because that is the proper way to work in angular2 like:
// maybe json list or lists
this.data = [{id:1212,subject:"login"},{id:1212,subject:"logout"}];
you can push pop your data from this variable and on behalf of this data variable, you can create your list like given in screenshot attached.
Thanks
I'm writing an application based on Django and Bootstrap that displays media files as thumbnails, along with a description and tags. I'd like these tags to be styled as regular Bootstrap labels and to be clickable.
I'm using X-editable to individually edit the description and tags (via Select2) inline and send them back to the server. That works well except for the tags. I cannot manage to:
Populate the container with tags with markup
Get the clean tags (without markup) to be fetched the x-editable widget
After doing the changes on the x-editable widget, return the clean tags and send them to the server
Add markup to the returned tags from the widget and re-populate the container with tags with markup.
Step 3 (sending clean data to the server) is something I can probably figure out or could be the subject of another question.
This fiddle should illustrate what I'm trying to do and the results: notice that when the edit button is clicked the widget loads the data with the unwanted markup.
HTML: X-editable tags setup and tag styling
<div class="controls controls-row">
<span class="tags" id="tags-editable-1" data-toggle="manual" data-type="select2" data-pk="1" data-original-title="Enter tags">
<span class="label">apples</span>
<span class="label">oranges</span>
<span class="label">pie</span>
</span>
<i class="icon-pencil"></i>
</div>
Javascript: set up X-editable and Select2
$('.tags').editable({
placement: 'right',
select2: {
tags: ['cake', 'cookies'],
tokenSeparators: [",", " "]
},
});
$('[id^="tags-edit-"]').click(function(e) {
e.stopPropagation();
e.preventDefault();
$('#' + $(this).data('editable') ).editable('toggle');
});
So the actual question is for steps 2 and 4: how can I strip the markup sent to the x-editable widget and re-add it to the results it returns?
I've found out after some experimentation, although the solution is not 100% perfect.
To preload data, I can use the data-value attribute in the HTML, as in data-value="apples, oranges, pie"
To display data in the format I want, I specify a function for the display option in X-editable. Here's the relevant bit.
.
display: function(value) {
$.each(value,function(i){
// value[i] needs to have its HTML stripped, as every time it's read, it contains
// the HTML markup. If we don't strip it first, markup will recursively be added
// every time we open the edit widget and submit new values.
value[i] = "<span class='label'>" + $('<p>' + value[i] + '</p>').text() + "</span>";
});
$(this).html(value.join(" "));
To load clean data in the editing widget, I'm using the shown callback.
.
$('.tags').on('shown', function() {
var editable = $(this).data('editable');
value = editable.value
$.each(value,function(i){
value[i] = $('<p>' + value[i] + '</p>').text()
});
});
This fiddle shows the code and a working example.
I have the following working code. This displays a drop down and also fetches a html file to be displayed:
$.getJSON('json/shares.json', function(data) {
var items = [];
$.each(data.Shares, function(key, val) {
items.push('<option id="' + val.shareID+ '">' + val.shareID+ '</option>');
});
$('<select/>', {
'id': 'shares',
html: items.join('')
}).appendTo('#shares');
});
</script>
<script type="text/javascript">
$.get('lon_shares.html', function(data){
$(data).appendTo('#shares');
});
</script>
I need to amend this to a few extra things.
Firstly, I need the drop down to auto submit when a choice is made.
I then need it to get the html file relevant to the choice, for example if they choose the "FML" option it will get the html file "FML_shares.html" if they choose "GBP" then it should get "GBP_shares.html" and finally if the choice doesn't have any html file related to it then an error should be displayed such as "no such file" etc.
Just to make it a little more complex, I don't want the whole file. The file has a table in it and I want to get the data from the first row of the table, for the first five columns of data and display those alone.
Thanks for any assistance, I've been searching for a solution for a while without any success and my JQuery/Javascript knowledge is very basic! (I've done something similar with PHP in the past but that's not an option here)
Well for the first point you could just run
$('#shares').on('change', function(){
var val = $(this).val();
//submit another ajax request with this value, and get the relevant page, then you'd just need to parse it for the appropriate content from that page.
});
If you want to parse the returned page and get only part of this we'd need to know the markup structure.
Seems like you just need to bind to the .change event of the dropdown you are creating to do the submission, which you can retrieve with .get. You can use jQuery to parse the html. It does a nice job of that:
.appendTo('#shares')
.change(function () {
$.get($(this).val() + '_shares.html)
.done(function (html) {
var $table = $(html).find("table tr:first td").slice(0,5);
})
.fail(function () { /* no such file */ });
});
This code is untested, but hopefully you can follow the example. Also beware of GET caching.
On my blog I have a lot of <pre> blocks containing code snippets.
What I want to do is add a .click() handler to all the <pre> elements on the page which will send its content to another page - let's call it viewcode.php - via POST.
I know how to send information to this page using $.ajax, I'm just not sure how to send the information and navigate to the page.
The idea is that visitors can click a <pre> which will navigate to another page containing the code on its own for readability and easy copy / paste.
I have a feeling the solution is dead simple and probably obvious, I just can't think of it.
Not sure I would handle it this way, probably I would simply pop up a dialog with the code rather than leave the page, but you could handle this by building a form using javascript then triggering a submit on that form instead of using AJAX.
Using dialogs with jQuery UI:
$('pre').on('click', function() {
$('<div title="Code Preview"><p>' + $(this).text() + '</p></div>').dialog({
... set up dialog parameters ...
});
});
Build a form
$('pre').on('click', function() {
var text = $(this).text();
$('<form class="hidden-form" action="something.php" method="post" style="display: none;"><textarea name="code"></textarea></form>')
.appendTo('body');
$('[name="code"]').val(text);
$('.hidden-form').submit();
});
You could use a hidden <form> element. Then set the onclick() attribute of the <pre> to copy the value from the <pre> to the form. Optionally, you can set the action attribute to select the page you'd like to post the information to. Finally, submit that form.
I know it's not elegant, but it'll work.
If your code snippets are stored somewhere in a database or files, I suggest you just link the snippets to a page where you get the snippet based on some identifier.
If the snippets are only contained in your html, and you just want to display them in a cleaner way, you shouldn't need any ajax posting. You might want to Use a hover div or a jquery plugin, that pop's up and shows a cleaner piece of code obtained from the pre element, something like:
$('pre').click(function() {
var code = $(this).html(); //this is the pre contents you want to send
$('#hoverDiv').html(code).show();
});
Yes, you have to create a form and submit it. You can do all sorts of things with ajax posts/gets but the only way to navigate to a post result is via an actual form post. Here is concise version of it:
$('<form style="display: none;"/>').attr('action', action).html(html).appendTo('body').submit();
My code does this:
// Navigate to Post Response, Convert first form values to query string params:
// Put the things that are too long (could exceed query string limit) into post values
var form = $('#myForm');
var actionWithoutQueryString = form[0].action.split("?")[0];
var action = actionWithoutQueryString + '?' + $.param(form.serializeArray());
var html = myArray.map(function(v, i) { return "<input name='MyList[" + i + "]' value='" + v + "'/>"; }).join("\n");
$('<form style="display: none;"/>').attr('action', action).html(html).appendTo('body').submit();