I want to delete pagination, search box, etc from datatable, i tried lot to delete it but no result has came can anyone suggest me a solution for this
And i want to delete this pagination from list page alone so i placed following script in list.gsp but still its not working
<script>
$(document).ready(function() {
$('#gow').dataTable( {
"bPaginate": false,
"bFilter": false,
"bInfo": false
});
});
</script>
Related
I'm generating some list items with JQuery Mobile. These list items have an id on the anchor. All anchors needs to load the page event.html. I need to retrieve the id when event.html is loaded.
On my index page I have the following code, which should pass the id from my anchor and refer me to event.html.
$(document).on('pageinit', '#index', function() {
$(document).on('click', '#overview a', function(e) {
e.preventDefault();
$.mobile.changePage('event.html', {
transition: 'slide',
data: {
'id': 'this.id'
}
});
});
});
On the page event.html I want to retrieve the data id.
$(document).on('pageinit', '#event', function() {
//output data id
});
How do I do this?
I've seen some examples where people have tried to do this by using global variables and submitting through get request. I have not been able to successfully reproduce their solutions and I would prefer if the data could be passed directly from the pages. Is this possible?
i think get method is the best , however I sometimes use the method data() , but you have to create a dummy element that is common among pages to keep you data , you can check this page though :
http://api.jquery.com/data/
I have a simple function that opens a page with jquery mobile; the page structure is like that:
$(document).on('pageinit','#page', function(){
//all script
});
My function:
function dettail(id) {
//alert(id);
localStorage.setItem("id", id);
var url = "#page";
$.mobile.changePage( url, {transition: "none", reloadPage:true} );
}
This function doesn't load #page; "reloadPage:true" why doesn't work?
ps (I used pageinit and no pageshow because I need that the page is loading only in one case).
Try using the allowSamePageTransition option, i.e.:
$.mobile.changePage(
window.location.href,
{
allowSamePageTransition : true,
transition : 'none',
showLoadMsg : false,
reloadPage : true
}
);
Taken from http://scottwb.com/blog/2012/06/29/reload-the-same-page-without-blinking-on-jquery-mobile/
If I understand your question correctly, you are trying to refresh just a specific #page portion within a multi page layout.
As you have discovered, the $.mobile.changePage does not work like that, it retrieves a fresh copy of the entire page from the server and not just the #page portion you want to refresh. The work around I came up with uses an 'emulated' refresh, for lack of a better term.
The following will walk you through the setup/use of the emulated refresh:
Step 1 - Create an empty page
Place the following html code into the body .. /body section of your multi page layout
<div data-role="page" id="empty_page_content" data-theme="b" data-content-theme="b"></div>
Step 2 - Your dettail() function
In the head .. /head section (or an external js file loaded in this section), BEFORE the jquery mobile library is loaded, place your dettail function, written as follows:
function dettail(id){
localStorage.setItem("id", id);
//emulate a refresh by switching to an empty page div (and then back to this page again)
$.mobile.changePage(
'#empty_page_content',
{
allowSamePageTransition : true,
transition : 'none',
showLoadMsg : false,
reloadPage : false
}
);
}
Step 3 - Setup a pageshow event on the #empty_page_content page
In the head ... /head section (or an external js file loaded in this section), BEFORE the jquery mobile library is loaded, place the following js code:
$(function() {
$(document).on("pageshow", "#empty_page_content", function() {
//console.log('pageshow event - #empty_page_content only');
// return to #page whenever this page is loaded
// The return url is hardcoded in this example but it could be switched to a variable if different return pages are needed
$.mobile.changePage(
'#page',
{
allowSamePageTransition : true,
transition : 'none',
showLoadMsg : false,
reloadPage : false
}
);
});
});
Step 4 - doing stuff in your #page each time it is displayed
In the head ... /head section (or an external js file loaded in this section), BEFORE the jquery mobile library is loaded, place the following js code:
$(function() {
$(document).on("pageshow", "#page", function() {
//console.log('pageshow event - #page');
// .. do stuff here, such as look for a stored id value and update the content of the #page accordingly
});
});
I successfully tested this solution on a private network (so I don't have a link for you to go look at). Hopefully it will work for you in your project. If not let me know and I'll see if I can help you get it going.
Just remember that it is best to load all head .. /head javascript code that is needed for all your pages on every page (best done by loading the same external js file on all pages) because the js code in the head section is only ever loaded ONCE from the first page that is accessed. You may intend for users to initially browse page1 but unless you can guarantee it your code should work if page 2 or 3 or etc were initially loaded instead.
reloadPage:true works only with page urls, not page ids
therefore:
$.mobile.changePage("#page", {
transition : "fade",
reverse : false,
changeHash : false,
allowSamePageTransition : true,
reloadPage:true
});
will not work
jQuery Code: I removed all my Sortable settings. If you feel they are pertinent I can put them back in.
$('#navsort').sortable({ ... });
$("#content").on('click', '#submit_menu', function (event){
event.preventDefault();
$.ajax({
type: "POST",
url: "menu-ajax.php",
data: { data:$('#form').serialize() }
}).done(function (response) {
$('#content').hide().html(response).fadeIn('slow');
});
});
HTML Code: This is a simplified version because the real code has lots of PHP and other stuff going on.
<div id="content">
<form method="post" id="form">
Save
<ol id="navsort">
...
</ol>
</form>
</div>
As you can see the entire form, including the elements attached to Sortable, are replaced (with an identical copy of itself) via AJAX when the form is submitted. This is when Sortable stops working.
I understand that the new form was not part of the DOM when Sortable was initialized and so its not attached despite being identical to the form it replaced. I also understand how .on() is used to delegate between elements that are present when the page first loads and those added afterwards. What I do no understand is how to apply this concept to the initialization of Sortable.
I got it to work with a dirty hack, but I want to understand the right way.
Dirty Hack:
function dirtyhack(){
$("selector").on('event', 'target', function (){ ... });
}
dirtyhack();
$("#content").on('click', '#submit_menu', function (event){
event.preventDefault();
$.ajax({
type: "POST",
url: "menu-ajax.php",
data: { data:$('#form').serialize() }
}).done(function (response) {
$('#content').hide().html(response).fadeIn('slow');
dirtyhack();
});
});
So Sortable is initialized when the page loads and reinitialized when AJAX is done replacing the elements Sortable is attached to. Maybe this is right, but it feels wrong.
Disclosure: I am actually using the nestedSortable plugin in place of Sortable, but the plugin author claims that "All jQuery Sortable options, events and methods are available" through his plugin. I also did switch to the standard Sortable Widget to test and had the same issue, so I do not think its the plugin.
Plugin URL: https://github.com/mjsarfatti/nestedSortable/tree/2.0alpha
I have an ASP.NET MVC 3.0 partial view which is render inside a jquery ui dialog.
Inside this partial view I have some link which help me to display some more info.
#foreach (StatusType status in ViewBag.Status)
{
<li>#status.StatusMessage<a href='#' status='#status.StatusCode'><img src=#Url.Content("~/Content/Images/information.png") alt="See detail"/></a></li>
}
I've bound those link with the click event:
$('a[status]').live('click', function (e) {
if (e.preventDefault)
e.preventDefault();
else
e.returnValue = false;
var status = $(this).attr('status');
alert('#Model.Code');
...});
What is happening is when I click the first time on the link it will display me the correct Code (let's say 12). When I will load the partial view again for another code (66) it will display me two alert message, the first one with 12 (the old value I've clicked before) and the second one with 66.
The more partial view I will load the more value I will have in my alert.
I don't understand why it is keeping me like an history of all the code I've clicked.
If somebody have any idea on this problem, it will be welcomed, it just driving me mad.
Thanks in advance.
UPDATED
The use of the on instead of the live works, but I still have an issue with the dialog.
I've change the code with the solution proposed:
$('#StatusDiv').on('click', 'a[status]', function (e) {
e.preventDefault();
var status = $(this).attr('status');
alert('#Model.Code');
$('#StatusDialog').dialog({
autoOpen: false,
width: 800,
resizable: true,
title: 'Status Info',
modal: true,
open: function (event, ui) {
alert('#Model.Code');
$(this).load('#Url.Action("ViewStatusInfo")', { clientId: clientId, Code: '#Model.Code', status: status
});
}
});
$('#StatusDialog').dialog('open');
});
The first alert display the correct code, but the second alert inside the open function display the old one. On the second click it will work correctly but I don't understand how it can pick the old value since the first display is correct...
Thanks again for your help.
First of all: do not use live in last versions of jquery.
$('#list').on('click', '.status', function(e){
e.preventDefault();
alert(this.href);
});
Here we bind event to #list and when we will insert new links, everything will work.
Demo: jsfiddle.net/wPSH2/
I am trying to get my form to submit when a user either clicks enter or mouse clicks. I have seen some examples as well as the example on the jQuery UI site. The example that I am following is jQuery UI autocomplete submit onclick result. Therefore my code looks like this.
<script type="text/javascript">
$(document).ready(function() {
$("#myInput").autocomplete({
source: "fh_autocomplete_search.php",
minLength: 2,
select: function(event, ui) {
if(ui.item){
$("#myInput").value(ui.item.value);
}
$("#myInput").submit();
}
});
$( "#myInput" ).bind( "autocompleteselect", function(event, ui) {
})
});
</script>
I'm not sure what should go under the .bind section of the code. Or really what it is even doing. And I have been here and read it but still just not clicking http://api.jquery.com/bind/ When I put an alert under it and select a ui.item from the #myInput box the alert does go off. But nothing fills or submits. If I put an alert under the if(ui.item) part it doesn't go off. If someone could explain to me what is going on and suggest some code to put under the .bind section I would greatly appreciate it.
If the id of the form is myForm:
$(document).ready(function() {
$("#myInput").autocomplete({
source: "fh_autocomplete_search.php",
minLength: 2,
select: function(event, ui) {
$("#myInput").val(ui.item.value);
$("#myForm").submit();
}
});
});
Also see this example.
I'm not entirely sure you need to write code for the "autocompleteselect" event. The default behavior of the event is to replace the text in the textbox with the users selection from the menu of items.