I'm trying to get the value inputted/selected to the search bar to stay displaying underneath it, within "Displaying 5 of 14 palettes for..."
Here's the link to the live prototype I've use.
The get set function I've used below, which allows me to do this, however this seems to appear just before the API kicks in, and disappear once the results load, any ideas why?
$(document).ready(function() {
$("#button").click(function(event) {
var un = $('#nobg').val();
greeting = un;
$("#displayUserName").text(greeting);
});
});
When you send the search query the page is reloaded - the value that was entered into the input field is gone. You'll need to have the search function return that value in some way - and either grab it with JavaScript and put it back into the div, or output it in the proper place via php.
I think the problem is that your JS code gets executed correctly, but then your form gets submitted and causes the page to reload.
Try sticking a event.preventDefault() in there, like so:
$(document).ready(function() {
$("#button").click(function(event) {
event.preventDefault();
var un = $('#nobg').val();
greeting = un;
$("#displayUserName").text(greeting);
});
});
Related
I am making a web application with Django, JavaScript, JQuery, and ajax. I've been with this problem for two days, and I can't make progress at all, the problem is the following:
I have two modals, in which a form is loaded. If I hit the create button to open the create modal, everything works fine, I can fill in the form, it is submitted and the data is saved to the database. If I give the edit button, the modal is loaded with the form with the data of the object that is being edited, and everything works perfectly. The problem is when I first open the creation modal, close it, and open the edit modal, a very strange thing happens, and that is that the value of an input that I need always returns it to me empty, despite not being empty. Here is the code (what matters, a summary):
<script>
$(document).ready(function () {
$('#edicion').on('shown.bs.modal', function (e) {
let $tipoActivo = $('#id_tipo_activo');
console.log($tipoActivo.val());
});
$('#creacion').on('shown.bs.modal', function (e) {
let $tipoActivo = $('#id_tipo_activo');
console.log($tipoActivo.val());
});
});
</script>
If I open the create modal first, close it, and then open the edit modal, let $TipoActivo = $('# id_tipo_activo'); it always empty (''), when in reality I see that its value is not empty.
I'm having a problem with one the buttons. It doens't work properly.
When I click "Add Run" button and then "Home" button almost nothing work. The form that is dynamically created doesn't hide and search input doesn't show, and function return undefined.
$("#home").on("click", function () {
$("#search").show();
$("#addForm").hide();
$("#noPrevious").hide();
complete()
console.log(complete())
});
But on the other hand, some things work, they hide or show. For example, after refresh, when I click "All my Runs" it displays text, which will hide after clicking on "Home" button, and on top of that, search input field shows up. I don't understand this. Does anybody know what's wrong?
Thanks in advance.
Here is CodePen and GitHub. The problem is at the top of .js file.
https://codepen.io/ovy1448/pen/gZrKOX
https://github.com/ovy1448/MyRun/blob/master/js/main.js
Your problem is that you are not initializing your values properly. For example, in the case of bookmarks your code presumes that localStorage has a value with that key. However, that is not necessarily the case. You would need to have a default value for bookmarks. A helper function could be useful here:
function getBookmarks() {
var bookmarks = localStorage.getItem("bookmarks");
if (!bookmarks) bookmarks = [];
return bookmarks;
}
and then replace all occurrences of localStorage.getItem("bookmarks") to getBookMarks() in your code, except the one in the function above. Pay attention to other initializations as well.
EDIT
If you want to parse JSON inside the function, you can do it like so:
function getBookmarks() {
var bookmarks = localStorage.getItem("bookmarks");
if (!bookmarks) return [];
return JSON.parse(bookmarks);
}
I have a form which is updated by the user through javascript. Indeed, the user can add some fields dynamically. So far, all is working great. Let's say my form has one field. The user add one more time that field. He validates it, he reached a new page with the results of his form but then realizes he did something wrong and go back (e.g. browser previous button).
The form is still displayed with the previous input but only with one field. (the one he added with javascript does not appear anymore) Can I update somehow the cache after the submit of the form so that if the user go back, he can see the same form that he just submitted?
Cheers!
Whenever your code changes the form, you should call a function that stores the current form code in the localStorage. Whenever the page is opened, you should check to see if the localStorage contains that information and, if so, set your form code to the stored code. This doesn't update the browser's cache, but it does store the information on the client side.
$(document).ready(function(){
$("#something").click(function(e){
e.preventDefault();
// do stuff: add form elements, bla bla bla;
updateStorage();
});
$("#clearStorage").click(function(e){
e.preventDefault();
localStorage.removeItem("theUsersPage");
});
function updateStorage(){
var current;
current = $("#container").html();
localStorage.setItem("theUsersPage", current);
}
function loadFromStorage(){
var old = localStorage.theUsersPage;
if(old){
$("#container").html(old);
}
}
loadFromStorage();
});
jsfiddle: http://jsfiddle.net/JjxV8/1/
I have a javascript function as below.
$("#update").click(function (){
this.disabled = true;
$("#kwBody > tr").each(function() {
var $cells = $(this).children("td");
var found=false,count=0,currentCell;
for (var i=0;i<masterData.length;i++) {
currentCell=$cells.eq(i+1);
found = parseInt(currentCell.text(),10) >=masterData[i];
currentCell.toggleClass("found",found); //add or remove class to highlight
count+=found;
}
window.console && console.log(masterData,count);
$(this).toggle(count==masterData.length); // show if all cells >
});
});
});
$("slider:changed")
Once I click on the button for updating the values, I am trying to disable the button. However, since I am using pagination, if I navigate to the second page, my button re-enables again. Is there any way to keep it disabled across all the pages?
This is the link to my work so far.
Use localStorage, or a cookie, to store the "true/false" value of the button. Check that value on every page load and assign its value back to the button's disabled property.
In your click handler, after "this.disabled = true", add:
localStorage.setItem("updateDisabled", true);
Then check for the value again on page load:
$(function () {
var disabled = localStorage.getItem("updateDisabled");
if (disabled) $('#update').attr('disabled', disabled);
});
You need to do one of two things: (1) pass the variable back to your server in some way, or (2) pass it through to the next page. You can do (1) with AJAX or a cookie, and you can do (2) with a URL parameter or a cookie. The web is "stateless," meaning (among other things) that each page doesn't know anything about what just happened on another page, unless you pass that information along somehow.
Ok this thing is driving me crazy. I have a simple project in which I use this mobile bootstrap theme and this text-to-speech library
Whenever there's an error in my function, the page just refreshes itself. In this way I can never read any output from the console.
Here's my code:
<script>
$(document).ready(function() {
$('#input-submit').click(function() {
var text = $('#input-box').val();
console.log(text);
for (var i = 0;i < text.length; i++){
alert('test');
meSpeak.speak(text.charAt(i));
}
});
});
</script>
I want my app to spell out loud whatever the user fills in. The function works correctly until the meSpeak.speak(text.charAt(i)); line. When I type in a 3 character word I get 3 alerts, and then the page just refreshes itself.
Why does it refresh when there's something not working? I want to read the output from the console without using alerts. Also, does anyone know why I can't use meSpeak.speak(text.charAt(i)); like this?
You're not preventing the submit button from "submitting" the page, and as you've most likely set no destination, it's submitting to the same location, causing a page refresh.
Preventing the click event can be done in jQuery by returning false at the end of the function
$('#input-submit').click(function () {
/* etc */
return false;
});
Demo to play with