Develop Reference

How to recreate Sharepoint quick edit button functionality in custom button

I got rid of the O365 bar and the edit bar (#s4-ribbonrow) on my site for styling purposes. I want the user to still be able to use the functionality that the "quick edit" button provides when they select a list item. How can i implement the same functionality in a custom button on my page?

Open SharePoint quick edit mode for view
SharePoint uses this method :
EnsureScriptParams('inplview', 'InitGridFromView', 'VIEW ID');return false;
So, your sample anchor element:
<a onclick="EnsureScriptParams('inplview', 'InitGridFromView', SP.ListOperation.ViewOperation.getSelectedView());return false;">TEST</a>
Use SP.ListOperation.ViewOperation.getSelectedView() to get view ID in older sharepoints, or use _spPageContextInfo.viewId in SharePoint Online
Open SharePoint edit item dialog
Use SP.ListOperation.Selection.getSelectedItems() to get selected items from view.
click button handler should look something like this:
if (SP.ListOperation.Selection.getSelectedItems().length === 1) {
var itm = SP.ListOperation.Selection.getSelectedItems()[0];
var _url = _spPageContextInfo.siteServerRelativeUrl + '/' + _spPageContextInfo.layoutsUrl + '/listform.aspx?PageType=6&ListId=' +_spPageContextInfo.pageListId + '&ID=' + itm.id;
console.log(_url);
var options = {
title: "Edit item",
width: 500,
height: 600,
showClose: true,
allowMaximize: true,
autoSize: true,
url: _url
};
SP.UI.ModalDialog.showModalDialog(options);
}
The hardest part is generating proper url:
PageType=6 means editform, value of 4 means dispform
To properly link to listform.aspx page you need to use some of _spPageContextInfo properties like list id, server relative url and layouts folder url

Tab index get increased in Jquery UI tab

I am using Jquery UI tab plugin.
Here is my DEMO
In my code I use
var tabControl = $("#tabs");
tabControl.tabs();
tabControl.tabs({ heightStyle: "auto",
beforeLoad: function (event, ui) {
},
load: function (event, ui) {
alert(ui.panel.selector);
if (ui.panel.selector == "#ui-tabs-1") {
m1();
} else if (ui.panel.selector == "#ui-tabs-2") {
m2();
}
}
});
When I moved to page 1st time it displays ui-tabs-1 correctly on pop up. But when I moved to some other page and come back and select the tab it shows an increased index (ui-tabs-4) and my desired method is not called. I don't know why my tab index gets increased. Your help is really appreciated.
Edit 1:
Thanks Rahul for creating the Demo. This code is part of a web application. This is related to one single page. In other pages also there are tabs. When I first load the page alert(ui.panel.selector) shows as "#ui-tabs-1" and when I go to other pages and come back it shows increased id such as #ui-tabs-4". I found that in the source code (jquery.ui.tabs.js) I found following implementation.
var tabId = 0,
rhash = /#.*$/;
function getNextTabId() {
return ++tabId;
}
Seems like tabId is increased and not being reset # . I want to reset that # every page load. Thank you very much for concerns.
Edit 2:
I have created a demo. when tabs clicked u get #ui-id-3 and #ui-id-5. In my scenario when I go back and come to the same page it displays as some increased number like #ui-id-7 for which it displayed #ui-id-3 previously.
Thank You!

jQuery image slider stops working after page sliding

I'm having a trouble with a jQuery image slider that works only the first time i open its page !
I have one main page, that includes via Ajax three page portions (Home, Presentation and Contact), the home portion contains the image slider !
To move through the pages, i use another jQuery page slider which includes the right portion and plays a sliding animation to show it !
So when i go for example from the home page to the presentation page, and then comeback to home ... the image slider isn't working anymore, and sometimes doesn't even appear !
What does it mean ?
How can i make sure the script is reloaded after the page slider finishes the transition, cause i think the problem comes from it ?
$(document).ready(function() {
$('#slides').slidesjs({
width: 700,
height: 300,
play: {
active: false,
auto: true,
interval: 3000,
swap: true
}
});
$(".menuButton").click(function() {
var page = $(this).attr("id");
var cont = $("#container");
var cont1 = $("#container1");
cont1.load("parts/"+page+".html", function() {
cont.hide("slide", {direction:"right"}, function() {
cont1.show("slide", {direction:"left"});
});
});
});
});
Thank you.

If the script is included in the portions loaded by ajax, it won't run (ajax loaded scripts are not ran by default). So basically, after the success event, just call the functions from the script.

Triggering a back button in webview

I'm using titanium studio to package an app we are currently working on, and one of the pages is a webview to a mobile version of our site. This all works and looks great, but when the user navigates to a new url, going backwards is impossible. I've tried several methods to set up a back button/ navigation group to solve this problem, but nothing seems to work. What would be the best way to either to load the next page into the nav group, or trigger a back button to appear upon a new page being loaded?
So far I have tried:
Creating a navigation group and firing an event upon opening a new
window to add it as a child.
Creating a button and removing/adding it depending on canGoBack()
Having a constant button exist that only fires if goBack() is
defined

var btnBack = Titanium.UI.createButton({
title : '< ',
top : 0,
left : 0,
height : '10%',
});
var btnFwd = Titanium.UI.createButton({
title : ' >',
top : 0,
right : 0,
height : '10%',
});
var webView = Titanium.UI.createWebView({
url : 'http://gooogle.com',
canGoBack : true,
canGoForward : true,
top : '10%',
height : '90%',
});
btnBack.addEventListener('click', function() {
webView.goBack();
});
btnFwd.addEventListener('click', function() {
webView.goForward();
});
var win1 = Titanium.UI.createWindow({
backgroundColor:'#fff',
});
win1.add(btnBack);
win1.add(btnFwd);
win1.add(webView);
win1.open();
Does this solve your issue? if this doesn't, please clarify what do you need to do??

Single paged website, which i want to get at a certain point after refreshing page

I have a single paged website, in which i've got a div named sitecontent with the width of 4400, which holds 4 "pages". The pages start at 0px of sitecontent, 1100 px of sitecontent, 2200px of sitecontent, and 3300px.
I use Jquery to set de div position to the right px, so i get the right text displayed. After pressing a link i get for example:
<div id="site-content" style="left: -1100px;">
At one of the pages i have to refresh the page, and after this refresh i want the page to display the same "page" on 1100px, but it starts at 0px, the home page.
Is there any way how i can make sure that the sitecontent starts at -1100px of home?
Thanks in advance,
Cheers

You need to append some identifier onto the hash of the URL that you can parse on the page load.
For example:
http://www.somewebpage.com/somepage#page1
Then in the load of the page, you can inspect this hash value and immediately change the UI to show the new page:
var hash = window.location.hash;
if(hash == "#page1")
$('#site-content').css('left', '-1100px');

You can use a cookie to store the value, then, every time the page loads, you need to check the cookie and deal with the value collected:
The link for Jquery Cookie with download and usage manual!
HTML (example)
<a href="#" title="Go Page 1" id="page_01" class="setCookie">
Click to view page 01
</a>
JQUERY (jquery.cookie)
// SET THE COOKIE
$('.setCookie').bind("click", function() {
var pageNumber = $(this).attr("id");
$.cookie('the_cookie_name', pageNumber, { expires: 7, path: '/' });
});
// READ THE COOKIE
$(function() {
var oldNumber = $.cookie('the_cookie_name');
if (oldNumber !== NULL) {
$("#page_"+oldNumber).trigger("click");
}
});
Note:
The link that you currently use to change pages, should have the class "setCookie" to trigger the cookie creation, and also the id that is being used to identify the page number.
One advantage of this is that you can control for how long is the cookie preserved and thus allowing the visitant to resume the website experience.

An approach very similar to what Tejs is proposing would be to use a hash-based routing framework that listens to hash changes. That will result in much cleaner code since you don't need to define the scrolling in two different places.
Every link in your page is currently being observed by a jQuery event listener (onclick -> moves the content container to the show the desired content). The HTML looks probably somewhat like this: Contact details.
With this approach, you don't need to watch those links. Instead, simply make them change the hash: Contact details.
Now observe the hash and react to changes. I'm using the Simrou framework (https://github.com/buero-fuer-ideen/Simrou) but you can go with any other framework that provides similar functionality.
jQuery(document).ready(function() {
// Define a function that moves the content, e.g. moveContent(3300);
function moveContent(pixelPosition) {
$('#site-content').css('left', '-' + pixelPosition + 'px');
}
// Setup the router
var router = new Simrou({
'page1': function() { moveContent(0); },
'page2': function() { moveContent(1100); },
'page3': function() { moveContent(2200); },
'page4': function() { moveContent(3300); }
});
router.start();
});
That's all the javascript you need!
(and here is a quick and dirty fiddle, demonstrating the whole thing: http://jsfiddle.net/R7F6r/)