Develop Reference

JSTree Select Open Node

I have a problem with the JSTree.
I'm filling the selected item with data from DB.
But I want the item I selected to open automatically after it is filled. I could not do the automatic opening part.
I added one button to the page (btn_test).
I wrote the following in the click event of this button.
$("#TreeElement").jstree("toggle_node","#34B526D0-1E2C-4170-829E-1995782DB831");
When I click on the btn_test button, the node whose ID is written opens and closes. But I could not set this to open automatically when selecting and filling the corresponding node.
$("#btn_test").click(function () {
$("#TreeElement").jstree("toggle_node","#34B526D0-1E2C-4170-829E-1995782DB831");
});
JS side is as follows;
var TreeElement = $("#TreeElement");
TreeElement.jstree({
"core" : {
"check_callback" : true
},
state : { "opened" : true }
});
TreeElement.bind("select_node.jstree", function (e, data) {
GetSelectedElementChildrenNodes(data.node.id);
});
function GetSelectedElementChildrenNodes(SelectedNodeId) {
$.getJSON('http://serveripadress/api/browser.php?getchildren='+SelectedNodeId,function (data) {
$.each(data,function (index,element) {
TreeElement.jstree().create_node(SelectedNodeId
, { "id" : element.nodeid, "text" : element.nodename}, "last");
TreeElement.jstree(true).set_icon(element.nodeid,element.icon);
});
});
}
I get a different result when I change the code as follows.
I click on Node1, it is filled with relevant data, but it does not open, then I click on Node2, but node1 is opening :)
TreeElement.bind("select_node.jstree", function (e, data) {
GetSelectedElementChildrenNodes(data.node.id);
$("#"+data.node.id).jstree("open_all");
});
I've been changing the code for a while, but I just couldn't get it to work. If someone can help me with this, I really thank him.
Thank you so much!

Problem solved.
In the function where I pulled the data with Json, I added the following code to the end of getJson.
TreeElement.jstree("toggle_node",NodeId);
The new state of the function is as follows;
function GetSelectedElementChildrenNodes(SelectedNodeId) {
$.getJSON('http://serveripadress/api/browser.php?getchildren='+SelectedNodeId,function (data) {
$.each(data,function (index,element) {
TreeElement.jstree().create_node(SelectedNodeId
, { "id" : element.nodeid, "text" : element.nodename}, "last");
TreeElement.jstree(true).set_icon(element.nodeid,element.icon);
});
TreeElement.jstree("toggle_node",NodeId);
});
}

Form in Bootbox Dialog

I want to display a Bootbox dialog that includes an "OK" button. When the user clicks the "OK" button, it should POST back, with the ID of the message to confirm that the user has viewed the message. The Bootbox dialog is the form. I don't see a way to make the dialog buttons a submit form with hidden fields, which is what I assume is the right way to accomplish my goals.

Thanks to the helpful comments from Isabel Inc and Mistalis, I have a working solution.
Notes specific to my implementation:
The messages contain images that need to be responsive, so I add the appropriate Bootstrap classes to each image
The messages may have links. Clicking a link is equivalent to clicking "OK" on the dialog
And the JavaScript that makes it happen...
jQuery(function($, window, bootbox, undefined) {
var accept = function(callback) {
$.ajax({
type: 'POST',
data: {message_id: 244826},
success: callback()
});
};
var $message = $('<p><img src="https://www.gravatar.com/avatar/80fa81938a6d1df92cd101d7fe997a71" alt></p><p>Here is a message from Sonny.</p>');
$message.find('img').addClass('img-responsive center-block');
$message.find('a').on('click', function(e) {
var href = $(this).attr('href');
if (0 === href.length) {
return;
}
e.preventDefault();
accept(function() { window.location.href = href; });
});
bootbox.dialog({
message: $message,
closeButton: false,
buttons: {
accept: {
label: 'OK',
callback: function() {
accept(function() { window.location.reload(); });
}
}
}
});
}(jQuery, window, bootbox));

Trigger event after event.preventDefault()

I had a hyperlinks in the header. When user navigates from one header link to other i need to check whether page is in dirtied or not, if page is dirtied i need to show a modal which has ok and cancel buttons and on ok i need to navigate to the clicked header and on cancel i need to remain in the page. Below is the sample code I wrote.
Template:
HeaderView.js
..
..
ui {
"link1" : "#link1",
"link2" : "#link2",
},
events {
"click #link1" : "navigateLink1"
"click #link2" : "navigateLink2"
}
navigateLink1 : function(e) {
this.navigate(this.ui.link1, "#link1", true, e);
}
navigateLink2 : function(e) {
e.preventDefault();
this.navigate(this.ui.link2, "#link2", true, e);
}
navigate: function(uiElement, path, trigger, event) {
e.preventDefault();
if (model.isDirty() ) {
// I need to send a callback for clicking on ok button
this.callback = function() {
event.trigger();// I am getting an error saying that event.trigger is not a function.
}
new ApplicationModal(model: {callback: this.callback});
} else {
app.router.navigate(path , {trigger: trigger});
}
}
In ApplicationModal i am just executing the callback
I am getting an error saying that event.trigger is not a function while calling from the callback.Let me know how to navigate to the new page after e.preventDefault();

How we can implement the Onclick functionality in titanium grid view item

I have developed the gridview application using the widget (from this code)
https://github.com/pablorr18/TiDynamicGrid
i have modified the code as per my client requirements. Now if i like to click the view cart button on the list item it will alert the message like "Am clicked". But i tried in various ways.but i can't find the solutions. Can anyone please explain me how we are write the code for this.
I have follows below code in my application:
var items = [];
var showGridItemInfo = function(e){
alert("Onclick the row");
};
var delay = (OS_ANDROID) ? 1000:500;
$.tdg.init({
columns:3,
space:5,
delayTime:delay,
gridBackgroundColor:'#e1e1e1',
itemBackgroundColor:'#fff',
itemBorderColor:'transparent',
itemBorderWidth:0,
itemBorderRadius:5,
onItemClick: showGridItemInfo
});
function createSampleData(){
var sendit = Ti.Network.createHTTPClient({
onerror: function(e){
Ti.API.debug(e.error);
alert('There was an error during the connection');
},
timeout:10000,
});
sendit.open('GET', url+'android_livedev/client/test.php?action=listitems&categoryid='+subcategorylist_category_id+'&productmin=0&productmax=50');
sendit.send();
sendit.onload = function(){
var response = JSON.parse(this.responseText);
if(response[0].success == 0){
alert("No Products Found");
}
else {
items = [];
for (var x=0;x<response[0].data.length;x++){
var view = Alloy.createController('item_layout',{
image:imageurl+response[0].data[x].thumb_image,
product:response[0].data[x].product,
productprice:"$"+" "+response[0].data[x].price,
onItemClick: addcart,
}).getView();
var values = {
product: response[0].data[x].product,
image: response[0].data[x].thumb_image,
productid : response[0].data[x].productid,
};
items.push({
view: view,
data: values
});
};
$.tdg.addGridItems(items);
reateSampleData();
$.tdg.clearGrid();
$.tdg.init({
columns:nColumn,
space:nSpace,
delayTime:delay,
gridBackgroundColor:'#e1e1e1',
itemHeightDelta: 0,
itemBackgroundColor:'#fff',
itemBorderColor:'transparent',
itemBorderWidth:0,
itemBorderRadius:5,
onItemClick: showGridItemInfo
});
createSampleData();
});
$.win.open();
The item_layout.xml code is looking like :
<Alloy>
<View id="mainView">
<ImageView id="thumb"/>
<Label id="product"></Label>
<Label id="productprice"></Label>
<Button id="addcart" onClick="additemtocart"/>
</View>
</Alloy>
EDIT:
now am getting the view and the button id from that specified view. But if am trying to click the button means can't able to do. can you check my code and give a solution.
i have added the below code :
var view = Alloy.createController('item_layout',{
image:imageurl+response[0].data[x].thumb_image,
product:response[0].data[x].product,
productprice:"$"+" "+response[0].data[x].price
}).getView();
var controller = Alloy.createController('item_layout');
var button = controller.getView('addcart');
button.addEventListener('click', function (e){
alert("click");
Ti.API.info('click');
});

First switch the ids to classes because they're non-unique. Only use ID's if you must. Second, try something like this:
Try something like this:
$('.addCart').click(function() {
var item = $(this).silblings('.product').text;
addItemToCart(item);
});
Even better, add a data-productId attribute to the shopping cart button and you could do something like this:
$('.addCart').click(function() {
var itemId = $(this).attr('data-productId');
addItemToCart(itemId);
});
This is better since you're only requiring the shopping cart button to be on the screen.
All this said, you also probably need to include a fallback that adds the item to the cart when javascript isn't available on the page.

How to close SP.UI.ModalDialog from button click in sharepoint?

I want to show Confirmation Dialog when user saves any document from EDITForm.aspx. So I have written following JavaScript code.
function PreSaveAction() {
var _html = document.createElement();
_html.innerHTML = " <input type=\"button\" value=\"Submit\" onclick ='javascript:SubmitDlg();' /> <input type=\"button\" value=\"Cancel\" onclick =\"javascript:CloseDlg();\" /> </td> </tr> </tbody> </table>";
var options = {
title: "Confirm",
width: 400,
height: 200,
showClose: false,
allowMaximize: false,
autoSize: false,
html: _html
};
SP.UI.ModalDialog.showModalDialog(options);
}
function SubmitDlg() {
SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.OK);
}
function CloseDlg() {
SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.Cancel);
}
Now I have following queries.
SubmitDlg and CloseDlg is not fired when clicking on Submit or
Cancel.
Is this right way to Submit form (SubmitDlg method ) and Cancel dialog (CloseDlg method) from modal dialog ?
Also this modal dialog-box should be only appeared if no validation errors while saving record, means if any field-value is required and we have not put any value then it should display in-built red colored messages.
Thanks

in the options for the modal dialog you need to pass a reference to your call back function like this:
var opt = SP.UI.$create_DialogOptions();
opt.width = 500;
opt.height = 200;
opt.url = url;
opt.dialogReturnValueCallback = MyDialogClosed;
SP.UI.ModalDialog.showModalDialog(opt);
Then in your callback function you can check the status:
function MyDialogClosed(result, value) {
if (result == SP.UI.DialogResult.Cancel) {
//Cancel. Do whatever
}
else { //SP.UI.DialogResult.OK
//User clicked OK. You can pickup whatever was sent back in 'value' }
}
If you need to send stuff back from your dialog you can use this:
function okClicked()
{
SP.UI.ModalDialog.commonModalDialogClose(1, someobject);
}
To make this work you'd need to hook-up a function to the OK button in your server side code using something like this:
protected override void OnLoad(EventArgs e)
{
if (Master is DialogMaster)
{
var dm = Master as DialogMaster;
if(dm != null) dm.OkButton.Attributes.Add(#"onclick", #"return okClicked();");
}
base.OnLoad(e);
}

add class "CloseSPPopUp" to the btn u want to click to close
Add This Script to Page which has "CloseSPPopUp" btn
$('.CloseSPPopUp').click(function(){
window.top.CloseSPUIPopoup();
});
$('.CloseSPPopUp').click(function(){
window.top.CloseSPUIPopoup();
});
Now on Main Page where u are calling popup
function CloseSPUIPopoup{
$(".ms-dlgContent").hide();
}
Reason:
ms-dlgContent class is in Parent Page & CloseSPPopUp is in Iframe which is created at runtime