I'm trying to implement a side menu that saves it previous state (or selected item) after a submit or after the user refreshes the page.
I decided to use cookies to save the index of the selected item of the menu.
However, is not working everytime. What's going on?
Here's my code:
$(document).ready(function () {
var cookie = $.cookie("SelectedNode");
$('.t-link').click(function () {
var name = "SelectedNode";
var index = getIndex($(this));
$.cookie(name, null); //delete previous value
$.cookie(name, index);
alert("It should save: " + index + " but it saved: " + $.cookie("SelectedNode"));
});
});
I would go like this, I don't think you need to delete the cookie value, it just overrides the existing one.
$(document).ready(function () {
var name = "SelectedNode";
$('.t-link').click(function () {
var cookie = $.cookie(name, getIndex($(this)));
});
});
Updating the same cookie with constantly evolving values is sometimes flaky depending on the browser you are using. I remember Firefox and Safari both being a PITA when trying to do this 2 years ago.
Anyway, you might consider a completely different tact and read/write the value into a hidden form field whose value is simply emitted back by your master page.
Related
I am using MVC hmtl helper syntax for textbox i.e.#Html.TextBoxFor(m => m.Id). I have quite lengthy form with multiple textboxes, radio buttons and drop downs.
Problem is that when I am refreshing the page, the values filled in the controls i.e. textbox,dropdown,radio-buttons filled get lost.
How can I avoid this and restore the filled values of the form even if user refreshes the page? Any other method than localstorage/cookies etc.?
you can create your jquery custom method with sessionStorage and you can add it to jquery.fn object to keep your form data even after page refresh
(function($){
// To Load your form values from sessionStorage, and set sessionStorage when value is changed.
$.fn.keepValue = function(name) {
if(!name) {
name= "";
}
return this.each(function() {
var $this = $(this);
var id = $this.attr('id');
var storage_name = namespace + id;
var value;
// Store form changes in a cookie
$this.change(function() {
sessionStorage.setItem(storage_name, $this.val());
});
value = sessionStorage.getItem(id);
// Don't overwrite value if it's already exist
if(!$this.val()) {
$this.val(name + value);
}
});
};
})(jQuery);
$(document).ready(function(){
$('#YourElementId').keepValue();
});
I have two TextBoxes, and I want to prevent the user from editing one of it while the other is not empty in real time. How could I do that ?
You can add a text changed event on the textbox that needs a input firts. Then in you C# side you can do a check in that event to see:
If(string.IsNullOrEmpty(txtbox.Text))
{
txtbox2.Enabled = false
}
else
{
txtbox2.Enabled = true;
}
Hope that helps
The interaction you're describing is on the client, not the server, so you'll need to write some javascript to make that happen.
Add this to the bottom of your aspx page. Depending on the id schema you're solution is using, you may need to inspect the Id's of the textareas in your browser to get their actual DOM element Id's. (note - haven't tested the code, but you get the idea)
<script>
var elDisabledTxtBx = document.getElementById("Your_Disabled_Textbox_ID");
var elTxtbxThatAcceptsInput = document.getElementById("ID_of_textbox_user_types_into");
$(elTxtbxThatAcceptsInput).on("keyup", function(el, $e){
if ( this.value.trim() === "" ){
elDisabledTxtBx.disabled = false;
}
});
</script>
from the last version update (from openui5 1.36.12 to openui5 1.38.4) the following code is not working anymore:
var myTable = new sap.ui.table.Table();
myTable ._oVSb.attachScroll(function() {
colorTheTableRows();
})
I'm using the "attachScroll" event in order to color the table rows with a specific logic.
Since last openui5 version update I get this error in console:
Uncaught TypeError: Cannot read property 'attachScroll' of undefined
I've tried to debug the problem and it seems that the object _oVSb has be removed from sap.ui.table.Table.
My final goal is to paint the rows with different colors based on the content ... is there any other way to reach this feature?
Thanks
Even i want this event some how came to this thread. i tried #Dopedev solution it was not working then i changed bit in that as below
$("#<tablid>-vsb").scroll(function() {
console.log("Table is scrolled")
});
instead of getting the tbody get the table-id-vsb and attach the scroll function
You can still get scroll event for your table using .scroll() of jQuery.
onAfterRendering: function(){
//Register handler for scroll event
$("tbody").scroll(function(){
// your stuff
});
}
Demo
I know that one of the earlier posts was already marked as the 'right' answer, but it did not work for me, so I thought I would post my working solution, as it might be helpful to others. The following code will work to effectively 'attach' to the vertical scroll event of a table in 1.38:
onAfterRendering: function() {
if (this.firstTime) { //You only want to override this once
var oTable = this.getView().byId("<YOUR_ID_HERE>");
//Get a reference to whatever your custom handler is
var oHandler = this.handleScroll;
//Store a reference to the default handler method
var oVScroll = oTable.onvscroll;
oTable.origVScrollHandler = oVScroll;
oTable.onvscroll = function(i) {
//Call the 'default' UI5 handler
oTable.origVScrollHandler(i);
//Call your handler function, or whatever else you want to do
oHandler();
};
this.firstTime = false;
}
},
var myTable = new sap.ui.table.Table("myTable");
After rendering:
sap.ui.getCore().byId("myTable-vsb").attachScroll(function() {
colorTheTableRows();
})
I am using dojo EnhancedGrid to display some data and handling "onRowClick" event to allow the user to click on a row in the grid to view more details about this row like below.
dojo.connect(grid, "onRowClick", grid, dojo.partial(displayDetailsForSelectedElement, type) );
Now, I want to allow the user to delete an item from the grid by providing a delete button in separate column for each of the row in the grid. The code for the button is provided below.
function buttonFormatterRemove(col, rowIndex){
var w = new dijit.form.Button({
label: "Delete", //label: '<img src="images/del.png" />',
iconClass: "dijitIconDelete", //"dijitEditorIcon dijitIconCut",
showLabel: false,
onClick: function() {
console.log(this);
//if (confirm("Are you sure you want to delete the assertion?")){
alert("Do I come here for delete...");
//var item = grid.selection.getSelected();
//var work_id = grid.store.getValue(item[0], "work_id");
var item = this.grid.getItem(rowIndex);
var id = item['id'];
alert("delete row with id = " + id);
//Send POST request to delete
require(["dojo/request"], function(request){
request.del(contextPath + "/rest/items/" + id)
.then(function(text){
console.log("The server returned: ", text);
});
});
//}
}//function
});
w._destroyOnRemove=true;
return w;
}
The issue I am having is that when I click on the delete button for a row, though it does come inside onClick(), the code after alert("Do I come here for delete..."); doesn't get invoked. After, it executed first alert(), it calls displayDetailsForSelectedElement() to handle 'onRowClick'.
I am not sure if this issue is due to the fact that 2 events are fired when I click on delete button and if there is a solution to fix this? Any help and advice would be much appreciated.
You may call dojo.stopEvent(e) firstly to stop the event propagation in your delete method.
I'm using Google places AutoComplete on a textbox and it's essentially working, picking the locations and stuffing them into the textboxes.
The problem is that I want to only stuff the selection name - not the full name + address formatting out of the list that the AutoComplete list produces. I can't seem to find a way to override what goes into the textbox.
var $name = $("#txtName");
$name.focus();
var autocomplete = new google.maps.places.Autocomplete($name[0]);
google.maps.event.addListener(autocomplete, 'place_changed', function () {
var place = autocomplete.getPlace();
// explicitly update model
// but doesn't display in UI
$scope.locationData.Name = place.name;
// explicitly update the input box - doesn't update UI
$name.val(place.name);
return false; // doesn't work - updates UI
});
Basically what I'd like to do is take over the input box text assignment myself by doing the assignment myself and forcing autocomplete to not set the textbox value.
Is this possible?
Set the value with a short delay.
$('#NameBox').on('blur change', function () { $(this).val(place.name).off('blur change'); });
setTimeout(function () { $('#NameBox').val(place.name); }, 150);
Using .off() allows the user to edit the name if they wish. If you wish to only allow the places API name remove .off().