I got a table on my site which I want to save in the session storage and replace it on button click (discard changes). Seems to work well to save it in session storage, but now I dont know how to make it usable for my HTML, that I can replace the current table with the table in my storage.
Tried to convert it with this , but I only got this:
I hoped that I can store it like this: [ and just set it later on.
This is my current code.
$(document).ready(function () {
let table = document.querySelector('.overallTable');
sessionStorage.setItem('init', JSON.stringify(table));
document.getElementById("dcChanges").addEventListener("click", function () {
if (sessionStorage.getItem('init') == sessionStorage.getItem('cache')) {console.log("equal")}
});
document.getElementById("saveInCache").addEventListener("click", function () {
document.getElementsByClassName('overallTable');
sessionStorage.setItem('cache', table);
console.log(table);
console.log("Output: Table: " + sessionStorage.getItem('cache'));
console.log("Output: Converted: " + JSON.stringify(sessionStorage.getItem('cache')));
});
});
I hoped I just could do something like this document.getElementsByClassName("overallTable").innerHTML = sessionStorage.getItem('cache');
You can use html() function of jQuery.
$('.overallTable').html();
try document.getElementsByClassName('overallTable')[0].innerHTML
Related
I have a Jquery DataTable with multiselect ability. Moreover there is a button and a div element:
<script>
$(document).ready(function() {
var tablemovChAf = $('#movChAf').DataTable({
//multiselect
$('#movChAf tbody').on('click', 'tr', function () {
$(this).toggleClass('selected');
} );
})
</script>
<button name="sbmsimulate" class="button-input btn btn-info" id="sbmsimulate" style="info" type="button" >
<div id="divAccMovement"></div>
What I want is to send all the selected rows to "accMovement.jsp" by clicking on the button.
$('#sbmsimulate').click( function () {
$('#divAccMovement').load('accMovement.jsp',{
mode:"2",
arrayData:tablemovChAf.rows('.selected').data()
});
} );
my jsp accMovement.jsp looks like this;
<%
String str_mode=request.getParameter("mode").toString();
String[] arrayData=null;
if (str_mode.equals("2")) {
arrayData=request.getParameterValues("arrayData[]");
}
%>
I tried the solution of : Passing javascript array to servlet (In fact, that is what I have done) but it didnt work for me. Nothing happens when I click the button.
I was debugging, and it seems the problem is with:
arrayData:tablemovChAf.rows('.selected').data()
because, if it is commented (and the "if" statement in the jsp is commented also) it is working. However what I need is to send the selected rows to the jsp page.
What is the correct way to send the array from the client and receive the array on the server?
Thanks in advance.
I found a solution not so smart for my case (following this jQuery DataTables Getting selected row values), it does not exactly what I need, but I can add some statements later in order to achive my goal
$('#sbmsimulate').click( function () {
var ids = $.map(tablemovChAf.rows('.selected').data(), function (item) {
return item[11]
});
$('#divAccMovement').load('accMovement.jsp',{
mode:"2",
arrayData:ids
});
} );
The column of index 11 is the id of my dataTable, so in the server side I can get all the information about every row.
However I would like to avoid that step:
var ids = $.map(tablemovChAf.rows('.selected').data(), function (item) {
return item[11]
});
and specify everything in the parameter, something like this :
arrayData:tablemovChAf.rows('.selected').data()
So I know scoping in JavaScript can be a little wonky and I've tried a few different things including attaching the variable declaration to the window (i.e. window.var) and declaring the variable inside and outside different parts of the function but to no avail. Here's what I've got:
$(".some_field").on('focus', function () {
// Store the previous option value before the change
prev = String($(":selected", $(this)).data('option_id'));
}).change( function() {
alert(prev); // alerts '4'
current = String($(":selected", $(this)).data('option_id'));
alert(current) // alerts '5'
alert(prev); // alerts '5' ..... it should alert '4'
});
Essentially within the change function I need to do stuff with both the previous and current option id's
Instead of using a global, I recommend decorating the input with an old value data attribute.
Try this: http://jsfiddle.net/zpe7azsq/16/
For example:
$(".some_field").on('focus', function () {
$(this).data('oldValue', $(this).data('option_id'));
}).change(function () {
alert("Old value on focus was: " + $(this).data('oldValue'));
alert("Current option_id value: "+$(this).data('option_id'));
});
You need to use one variable/property for storing the previous value per element. A global variable won't help. Actually you don't even need those focus events.
$(".some_field").each(function () {
$(this).data('id_value', $(":selected", this).data('option_id'));
}).change(function(e) {
var previous = $(this).data('id_value'),
current = $(":selected", this).data('option_id');
alert(…); // or whatever
$(this).data('id_value', current);
});
With #Scott 's answer as a guide here is what ended up working for me. I used the parent element to store the data instead... #Bergi's answer also works though!
$(".some_field").on('focus', function () {
// Store the previous option value before the change
$(this).parent().data('prev_option_id', $(":selected", $(this)).data('option_id'));
}).change( function() {
current = String($(":selected", $(this)).data('option_id'));
alert("Old value on focus was: " + $(this).parent().data('prev_option_id'));
alert("Current option_id value: "+current);
});
Hi i am currently working on a small project where I am supposed to query a JSON API with the format
{
"results": [
{
"livingstd": "80%",
"place": "ClassA"
},
{
"livingstd": "50%",
"place": "ClassC"
}
...
]
}
I am supposed to show the livings td whenever i hover over to a mini house icon.
so i wrote a javascript but it doesnt work. and I dont understand what went wrong. Can anyone shed some light on this? It doesn't show anything at all
<script type="text/javascript" src="js/function1.js"></script>
<script>
$(document).ready(function (e) {
//api url
var url = "dummyurl";
//store search term
var query;
//when the user hover over
$("button").hover(function (e) {
//get value and store in variable
query = $("#query").val();
//get the json file
$.getJSON(url + query, function (json) {
$.each(json.results, function (i, occupancy) {
$("results").append('<p>' + occupancy.occupancy + 'at' + occupancy.time + '</p>')
});
});
});
});
</script>
Did you look at the line that reads var url = "dummyurl";?
Also look at if your url and query are properly separated by a /. You can add query vars with '?' + $.param(queryObj).
Also if you look at the docs for hover, only giving one handler to hover means it gets called on mouseenter and mouseleave. Although that shouldn't prevent your code from working.
I have this function,
function add_to_team_confirm(a, b) {
result = window.confirm("Sure?");
if (result) {
window.location = "url";
}
return result;
}
and I will call this once I will click an anchor tag,
Add to team
when this is clicked, a prompt will be shown having only two options, OK and Cancel. Now, what I would like is adding another option like, Use Credits, since a feature like using credits is possible in adding a player to the team. Now my question is, is it possible to add another option? And what is the value of that option so that when it is clicked, its value will then be shown and then I can process any process I want once it is clicked. I am not that really good in explaining but I hope you get it. Thanks.
Options are very flexible for things like this. Here's a simple pattern for doing this with jQuery:
In your onclick statement:
onclick="handle_team_confirm_click();"
function handle_team_confirm_click() {
var returnData = add_to_team_confirm(' a ', 'b ');
var myOptions = {val1 : returnData };
var mySelect = $('#mySelect');
$.each(myOptions, function(val, text) {
mySelect.append(
$('<option></option>').val(val).html(text)
);
});
}
Now you can get the value like this:
$("#mySelect").click(function() {
$("#mySelect option:selected").val();
});
You can try window.showModalDialog
References & useful pages:
"showModalDialog method (window) JavaScript" [help.dottoro.com]
Google Search: 'showmodaldialog example'
[CiteHistory Record]
I'm trying to use AJAX to dynamically generate a JquerUI Accordion based on what is selected in a box. Currently I have
<div style="display:none" id="testselect">
</div>
With JS
$("#courseselect").change(function () {
$("#testselect").html(""); // Empty any previous data
$("#testselect").css("display", "block"); // Display it if it was hidden
$.getJSON('json.php?show=tests&courseid=' + $(this).val(), function(data) {
for(x in data)
{
$("#testselect").append("<h3 value=\"" + data[x].uno + "\">" + data[x].name + "</h3>");
$("#testselect").append("<div>Foo</div>");
}
$("#testselect").accordion({ change:function(event, ui) { courseid = ui.newHeader.attr("value");
} });
});
});
Now this works the first time I change my selection, but after that it reverts to plain old unformatted HTML. As if the call to .accordion() was never done. I'm guessing this has something to do with JQuery not wanting me to format something twice, but I really have no idea.
Try to destroy the accordion before you empty the div and start again:
$("#courseselect").change(function () {
$("#testselect")
.accordion("destroy")
.empty() // equivalent to .html("");
$.getJSON(...
More info here.
Good luck!