Usage of Web.storage in Jquery / Javascript - javascript

I'm working on my webpage, because I want my jobs to be stored on page and I can check them anytime I want.
This is my code at the moment: http://jsfiddle.net/p0cdbozx/
I have already done that you can add any job you need, and you can delete it by clicking on it, also slideUp and slideDown function.
The only thing I can't figure out how to do is WEB STORAGE. I want that informations I type in table will be saved anytime I open the website.
If I am not wrong I should add something like that code:
localStorage.data=$("#table").html();
document.getElementById("table").innerHTML=localStorage.data;
but the problem is I actually don't know where exactly to put it in.
If anyone have minute of time, please check out my problem and help me!
Thanks a lot!

Sorry to burst your bubble, but localStorage only supports strings.
Use JSON.stringify() and JSON.parse() to be able to set and store the data.
To set:
if(typeof localStorage["tableHtml"] !== 'undefined')
$('#table').html(JSON.parse(localStorage["tableHtml"]));
and to store:
localStorage["tableHtml"] = JSON.stringify($('#table').html());
Have a look: http://jsfiddle.net/p0cdbozx/1/

Related

Calling a website with results from javascript

I have a small app which calls an URL and scrape the data returned from it. I now want to do something similar for another site but this site uses JavaScript and the results are not included in the html. I've found a way to retrieve the data by using "stringByEvaluatingJavaScript" but to complicate things, the results I want is displayed on the webpage only after I click a button / function on the website:
i.e. To get to display the results I want, I have to:
1) go to the website. (data is displayed but not what I want) 2) click one of the options on the site. (data I really want is displayed)
The URL of this page never changes, as expected being JavaScript. So I want to know if there's a way to call the page so that when the page is displayed, it is already on the option I want, e.g. "https://example.com/page1?option" etc...
I don't know if this is possible since I don't know JavaScript but technically I think it should be?
Thanks.
I would use the Developer Tools/javascript console on your browser
(Chrome has a pretty good one) to see what the browser sends to the
server when you click on the button, then use that as the basis for
your query. – cowbert
#cowbert's suggestion really did the trick! Upon digging more, I found more results in the Chrome console and one of them actually has the link to the data which is what I need!
Thank you to all who contributed! This is my first post here so if I didn't do something right, please forgive me.

created buttons with user input, how to store them for the next time

I created a html page, where the user can create a button via javascript/jquery, which will appear on the html page after adding it.
So my question is, how it is possible that the button will be there also if I am closing an opening the page again?
I hope my question is clear, I can also post my code if it is necessary! Thanks!
You will need to use some server side code to do this.
You cannot rely on cookies since they will be gone sooner or later.
PHP with MySQL to store the information you need seems like the easiest approach for some simple user database interaction.
There's not much to work with here hope you find this response helpful and guiding you the right direction.

Keep SESSION value OR Cookies when hitting back button

I have two pages. The page 2 is accessible by the page 1.
The thing is I want to detect if someone came back to page 1 by the page 2 with a return button in order to display an other thing.
PAGE 1 -------------------------> PAGE
Normale Display Create SESSION or COOKIE
|
|
If SESSION or COOKIE <--------- Pressed back button
-> Secondary Display
So I tried to :
Create a cookie but it wasn't read
Create a Session variable but
it wasn't read neither
Empty the cache but I ended up with a warning message
Local Storage / Session Storage still react like a Cookie
Does anyone see a solution for me, either to force the read of one of those thing or force the page to acte as if it was a normale way of going to it when back button pressed?
Im open to any solution It's been two long days going around in circle.
EDIT :
Let change a bit my question by : How to detect if a page is reach using back button?
So I've seen this question but its an old one (2009) and an answer using Iframe which if I could avoid I'd like too.
The easiest way is to check for $_SERVER['HTTP_REFERER'] but if someone has multiple tabs opened while looking at your website it will not work properly.
I do not think that there is any "nice" solution to your problem.
Edit:
I guess that better question would be to ask what are you trying to achieve specifically. Why do you need to know if someone came to page 1 by the page 2 with a return button? Is there any other way how to solve your problem?
You can do that by changing the local storage I guess.
When page 2 is initialized, check if the precise storage of your local storage is empty or not. If not, display what you want in addition.
To do that you must put a controller which does that when he is called and don't forget to call it when the page 2 is loaded.
But you need to empty that local storage. Consequently you may want to reset it each time you go on another page except the seconde one.
It's kind of dirty, but it should work.
NB : It's pretty easy to do that with Angular JS. With pure Javascript it may be not that easy to do, but I'm pretty sure it is possible.
Hope that could help.
Ok so the solution was to send variables via history of url's.
Since HTML5 you can modify the history of navigation.
So basically the idea in my case was to send values in the url as in a get request :
yoursite.com/where_you_are?something=value
And for doing that you can modify url history with : history.replaceState({},'',newURL)
Eventually if you want to send object to your page you can use {} like this {myobject: value, ...}.
Hope this could help and have a look at the great documentation by mozilla linked above.
And eventually have a look there too

Strange javascript/jquery issue

Hopefully someone can help me here.
I have a page that displays a list of users in a modal popup. This page can be accessed in two ways, one way you choose Unapproved users and it will open the page, the other way you choose user accounts which will open a popup asking if you have any search criteria such as name, once you have finished there you search and it brings up the page of users.
I have a button on the form to clear any filters. When i run it on the Unapproved users page, it clears the box fine, however if i do it on the form from the other way the code will not empty the textbox and when i try an alert it shows no data. Where as the alert works on the Unapproved route!
Here is the jquery that i am using:
clear: function () {
//reset filters//
$('.usersFilterList li').remove();
$('.userFilterSelect option').show();
$('#UserFilter_SearchTermIncluded').attr('value', ''); // This line doesn't seem to work properly
alert($('#UserFilter_SearchTermIncluded').attr('value'));
//hide filter options
MSG.showNHide('', '#usersFilterBox');
//reset modal control buttons
$('#usersButSaveFilter,#usersButClearFilter').hide();
$('#usersButFilter').fadeIn();
usersFilter.refresh(0);
}
Can anyone see if i am doing anything stupid? As i say, it is exactly the same form called from the same MVC action just with the other popup in between.
Apologies if this is confusing, I cannot post anymore code i am afraid. I can assure you that the ID of the textbox is correct though.
Any advice here would be much appreciated as I have been staring at it for hours now...
Cheers,
Gareth
If i right click the second option and run in new tab and run that first pop up as a full page the code will then work! So the problem appears to be that there are two popups.
SOLVED
I found a work around of my own, thanks for all your help.
I simply assigned a class and searched for any items with that class and cleared it like so:
$('.jq-clearme').val('');
I will close this when i can. I am not allowed yet due to my rep being too low.
To change the value of an element (or to retrieve it), accessing the attribute is the wrong way to go - it's not synchronized in both directions. What you want is the property. While also exposed through .prop('value'[, newvalue]) the correct way to get/set it with jQuery is .val([newvalue]).
To clear the element's value use the following:
$('#UserFilter_SearchTermIncluded').val('');
To retrieve/show it, use
alert($('#UserFilter_SearchTermIncluded').val());
You should use val() to get/set the value of the input.
Use without a parameter to get the value:
$('#UserFilter_SearchTermIncluded').val();
And with a paramater set the value, in this case set it to nothing:
$('#UserFilter_SearchTermIncluded').val('');
Is there an ajax call involved which might be loading the Javascript you posted twice and hence when called the second time (after the ajax call) it finds a conflict?
As mentioned by others best to use .val('') to set a value and .val() to get the value. Check in firebug if there are any Javascript errors.
I found a work around of my own, thanks for all your help.
I simply assigned a class and searched for any items with that class and cleared it like so:
$('.jq-clearme').val('');
I will close this when i can. I am not allowed yet due to my rep being too low.

Dynamically change a value on a asp.net page without actually refreshing it

I have a label, let's call it LblA. I have a SqlDataSource, let's call it sds. Now, I have selected out and managed to get specific values using the select function. I want to set LblA's text to the value selected out of sds. I need this to occur every 5 (or as many as I specify really) seconds. I orignally used a timer object, however, for any of you who have used the timer object before, it likes to refresh the page, this makes it very hard to navigate off of the page; not only that, it's sloppy. Does anybody know a way to easilly update LblA's text from sds without refreshing the actual page.
I've read around and came to the conclusion that I need to use ajax, err... jQuery. However, I really don't know anything about the two except that they are both Javascript libraries? I need a simple way, you might even have to explain it to me like I'm an idiot.
I'm using VB.net and ASP.net just so you know.
Thanks so much!
If you want it simple use UpdatePanel If you want more control and efficiency, use jQuery's Content

Categories

Resources