Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I am making a HTML form where I need my users to be able to get back whatever data that they have filled up, after closing the window/tab and reopening it.
If I do it with JavaScript cookies or HTML 5 local storage, Then I will have to write code for every single input tag there is, even if its like thousands.
So, what would be the most efficient way to accomplish this?
P.S. I am using PHP for back end processing.
I want the function just like we have in the browser like restoring the session in firefox or chrome.
you can use like this with localstorage.
localStorage.setItem('formData', JSON.stringify($('form').serialize())); //comfortable java script way.
or with cookies you can like this
$.cookie('formData', JSON.stringify($('form').serialize())); //can support old browsers also.
please read the excellent accepted answer at storage-vs-cookies you will know which one to use.
LocalStorage is your best option.
I will have to write code for every single input tag there is, even if it's like thousands.
That is not true. You can use a JS loop, or a jQuery each, to do that:
$("input").each(function(){
$(this).val(storage.getItem($(this).attr("id")));
})
.change(function(){
storage.setItem($(this).attr("id"), $(this).val());
});
When the page loads, you loop through each input on the page and put content into it based on the input's ID.Then you attach an event listener to all the inputs, which saves any changes into local storage.
I have not tested this, and it is only for illustrations purposes. This code probably won't work straight away, but I hope you understand the concept.
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
I'm attempting to click a button on a page (index1.html) and I want it to modify the color of some text that is actually on another html page (index2.html). Is this possible to do with jquery?
Everything I've tried doesn't work and I understand why: since to view the second page (index2.html), I need to refresh that page, the action is lost during that refresh. I know this can be done with angular or react but i really want to stick with jquery or javascript only.
Is this possible?
One option I can see is when navigating to index2.html, is to pass some query params. For example: ./index2?something=true&otherthing=false. Then use js to get the query params on page load.
var searchParams = new URLSearchParams(window.location.search);
searchParams.get("something"); // true
For reference
It can't be achieved directly neither with jQuery nor with React/Angular/vanilla JS.
You have 2 options both related with storing data.
Use localStorage or sessionStorage (or well cookie if you prefer and it makes sense).
Just store the information you want to pass in index1.html then check if it exists on index2.html, if so, use it.
Use backend
It's actually quite similar to the firs option but slightly more reliable (even though much more complex).
In this case, once the button on index1.html gets clicked, set a cookie with needed data/send data directly to the server with HTTP request.
This way you will have to play with data mostly on the server side.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I have a lot JS files in legacy project. Some JS code is blocking form submit, how I can find what JS events is listening form submit ?
Chrome actually has a great tool that is able to do this. Right-click on the submit button and open dev tools. Then go to event listeners in the sub tab from there you should be able to see the submit action. You can expand the action and view the source.
the comments are a good start, additionally search through all files for any reference to the forms name or id and if thats not enout for any code looping through all forms.
depending on the techniques used, e.g. jquery you might need to change your search like
document.getElementsByTagName("form")
$("form")
$("#ID_OF_FORM).submit
and so on... i guess best chances by using the ID of the form
You can also add event listener in Console Tab.
More in article below.
How to debug Front-end: Console
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 4 years ago.
Improve this question
I have a classic report where the last few columns are fa icons.
Using jQuerySelector i capture the "on click" event.
I do some calculations, and get back a number that I wanna pass to another page. I assign that number to a page item, that has an "on-change" event. Inside the event I have an "Execute JavaScript Code" containing the following:
var href = 'f?p=&APP_ID.:41:&SESSION.::::P41_ITEM:' + $("#P40_ITEM").val();
window.location = href;
Now... the thing that bothers me the most with this, is that I already have code like this inside a dynamic tree, that's used for navigation, and it works as expected. But this get's bypassed all together. I encapsulated the "Execute JavaScript Code" with two "Execute PL/SQL Code" blocks with logs, and both of them recorded in the logs. Also, when i had "Fire on Page Load" set to yes the redirect happens.
I also tried something like this, thinking there's some mysterious reason it won't execute js code:
owa_util.redirect_url('f?p=&APP_ID.:10:&APP_SESSION.');
apex_application.stop_apex_engine;
but this also doesn't work(can't even find if it's even suported in apex 5).
Does anyone know of a reason why this isn't working? Or another way to call a page redirect from a dynamic action?
tnx
You already answered your question with the comment
Or if there's a way to fake a request, so i can submit and initiate a branch?
In dynamic action that listens to change event create True action submit after Execute JavaScript Code.
If you have trouble doing it, recreate the scenario on apex.oracle.com. Provide login credentials and I will check what you are doing wrong.
Sorry for not replying sooner. All your answers are probably correct, but i didn't get the chance to use them - as soon as i read my own highlighted text :) i figured what i was doing wrong. I put some of the logic in dynamic events and some of it in branch/process.. so yeah.. that didn't work.. fixed that up and all was well..
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
I've got a setup of HTML, PHP & jQuery. The steps I want the user to take are as follows:
Click a button
Modal Appears with dynamic data (taken from button markup, parent div etc.)
User Submits Modal & Close
I have two options. To:
Generate the HTML prior the user clicking the button. With PHP & Just hide it & then manipulate it with jquery once clicked.
Request the the HTML on click via Ajax using an API & again manipulate it with jQuery.
My question is. From the two options which would be the best for performance?
Reading through this and documenting my logic. I'd say that point 1. would be best as I'm not requesting a large amount of data through the API every time?
Can anyone see any advantages to number two? Apart from not requesting the data server side on page load?
Thanks.
I think the main question here is "how dynamic is the information used to produce that HTML ?".
If there isn't any high probability that the information used to produce that HTML could change at any time, then you should better off with 1st option, since therefore you will be avoiding an additional request to the server.
If the information used to produce that HTML could change at any time, that would be the reason to use the 2nd approach.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I am making an events website using technologies like HTML, CSS, Javascript, Jquery, PHP etc. I retrieve data from a RESTful service in PHP.
There is a separate event page which is viewed both by actual intended audience and by the organizers who can edit details of the event on this page. When organizer opens the page he should see the options to edit the details of the event. But these options should not be visible to the other users. Other than these options, the page view is same for both the organizers and other users.
My question is that should i hide these options using Javascript/Jquery? Or should I have separate pages for each of the versions of this event page and direct the users according to whether he is a organizer or not? Which is preferable and why?
In php you will know if the current user is an organizer or not. Simply send back a variable in the response like is_organizer: 1 then you can determine what to show based on the user.
If there is not much difference in the html output to the user then this method is preferable to using a completely different view as you keep your code DRY and do not have duplicates of the same markup.
I assume you already check that the user is an organizer before they can save changes to an event. If not you should definitely do so.
UPDATE
Here is some more info based on your recent comment.
If you're using jQuery to make and ajax call and get the data from the REST api I would do something like this (please bear in mind that this is pseudo code):
$.ajax({
url: "event-data.php"
}).done(function(response) {
html = "";
//loop over events
foreach response.events as event
//add event html
eventHtml = "<div class='event'>" + event.name + "</div>";
//if organizer add edit tools
if response.is_organizer
eventHtml += "<div class='edit-controls'>...</div>";
//concat html string
html += eventHTML;
//insert html to dom
$('#content').html(html);
});
I don't know how you are inserting your html into the dom but this way is just an example of how you might build the html based on the user's role.
On a side note I would recommend using a front end framework for this sort of stuff. Here is a decent list:
https://github.com/showcases/front-end-javascript-frameworks
You should use Php.
If you use Jquery to hide these fields , everyone could "unhide" these fields easily. But you could combine these two techniques. Just Hide the fields and if somone do edits the server has to check again if the user is allowed to do changes.