How to make my ng-if stop showing after function success - javascript

I want my ng-if="AddEmp" to go false after my ng-click function has succeeded so the content in the ng-if doesn't show any longer, but I can't seem to make it happen.
I use the ng-if since I want the content in the form not to show the next time the form is visible. I always want it to be blank from the start.
How do I make the ng-if="AddEmp" disappear after this function has succeeded?
UserRegistration = function (Role, Id, Gender, Firstnamn, Lastnamn, DateOfBirth, phone, ClassId)
Here is my code:
Entire pages :
angular.module('App')
.controller('SchoolAdminController',
['$scope', '$http', '$location', 'getAllRolesFactory', 'checkUserRolesFactory', 'userRegistrationFactory', 'getAllClassesFactory',
function ($scope, $http, $location, getAllRolesFactory, checkUserRolesFactory, userRegistrationFactory, getAllClassesFactory)
{
var vm = this;
vm.allRoles;
vm.userWithRoles;
vm.userWithoutRoles;
vm.noUsersFound;
vm.allClasses;
getAllRolesFactory.get().then(function (response) {
vm.allRoles = JSON.parse('[' + response.data + ']');
});
vm.AddUser = function ()
{
$location.path('/Register');
}
vm.EditEmployee = function () {
$location.path('/SchoolAdmin/EditEmployee');
}
vm.UserWithoutRoles = function () {
checkUserRolesFactory.get(0).then(function (response) {
vm.userWithoutRoles = JSON.parse('[' + response.data + ']');
if (vm.userWithoutRoles.length < 1) {
vm.noUsersFound = 'Inga användare finns att hantera';
}
});
vm.GetAllClasses();
}
vm.UserWithRoles = function () {
checkUserRolesFactory.get(1).then(function (response) {
vm.userWithRoles = JSON.parse('[' + response.data + ']');
console.log(vm.userWithRoles);
});
}
vm.UserRegistration = function (Role, Id, Gender, Firstnamn, Lastnamn, DateOfBirth, phone, ClassId) {
vm.registerUserInfo = [];
vm.roleInfo = [];
vm.registerUserInfo.push({
Firstname: Firstnamn,
Lastname: Lastnamn,
DateOfBirth: DateOfBirth,
Gender: Gender,
UserId: Id,
ClassId: ClassId,
})
vm.roleInfo.push({
Role : Role,
})
console.log(vm.registerUserInfo);
userRegistrationFactory.register(vm.registerUserInfo, Role).then(function (response) {
$scope.AddEmp = false;
console.log(vm.AddEmp);
console.log("Hello my name is linsey lohan");
});
}
vm.GetAllClasses = function () {
getAllClassesFactory.get().then(function (response) {
console.log(vm.allClasses);
vm.allClasses = JSON.parse('[' + response.data + ']');
console.log(vm.allClasses);
})
}
}]);
#{
ViewBag.Title = "EditEmployee";
}
<div ng-controller="SchoolAdminController as SchoolAdmCtrl">
<div class="col-md-8 gradeSelect" ng-click="SchoolAdmCtrl.UserWithRoles(); editEmp = ! editEmp; AddEmp = false" id="editEmp">
<a><h1>Klicka här redigera Anställd:</h1></a>
</div>
<div class="col-md-8 gradeSelect" ng-if="editEmp">
<div>
#*TODO: Fixa, ta bort Gradeselect på hela formuläret.
En admin ska inte redigera sigsjälv på samma sätt som andra users i systemet.
*#
<form name="EditEmpForm">
<fieldset>
<legend>Välj anställd för hantering</legend>
<ol>
<li>
<label>
Välj roll att tilldela användare<br />
<select ng-model="SelectRole" name="SelectRole_field" ng-options="role as role for role in SchoolAdmCtrl.allRoles" required></select>
<span style="color:red" ng-show="EditEmpForm.SelectRole_field.$error.required">Välj roll</span>
</label>
</li>
<li>
<label>
Välj anställd
<select ng-model="selectUserWith" name="SelectUserWith_field"
ng-options=" user as user.Email for user in SchoolAdmCtrl.userWithRoles | filter : {Role : SelectRole}" required></select>
<span style="color:red" ng-show="EditEmpForm.SelectUserWith_field.$error.required">Välj användare</span>
</label>
</li>
<li>
<label>
Sök på person<br />
<input ng-model="Sokperson" type="text" />
</label>
</li>
</ol>
</fieldset>
<fieldset>
<legend>Redigera anställd</legend>
<ol>
<li>
<label>
Kön<br />
<select ng-model="Kon" name="Kon_field" required>
<option>Female</option>
<option>Male</option>
</select>
<span style="color:red" ng-show="EditEmpForm.Kon_field.$error.required">Välj kön</span>
</label>
</li>
<li>
<label>
Förnamn<br />
<input ng-model="Fornamn" name="Fornamn_field" type="text" required ng-minlength="2" ng-maxlength="20" ng-pattern="/^[a-z ,.'-]+$/i" />
<span style="color:red" ng-show="EditEmpForm.Fornamn_field.$error.minlength">För kort!</span>
<span style="color:red" ng-show="EditEmpForm.Fornamn_field.$error.maxlength">För långt!</span>
<span style="color:red" ng-show="EditEmpForm.Fornamn_field.$error.pattern"> A-Z -'!</span>
</label>
</li>
<li>
<label>
Efternamn<br />
<input ng-model="Efternamn" name="Efternamn_field" type="text" required ng-minlength="2" ng-maxlength="20" ng-pattern="/^[a-z ,.'-]+$/i" />
<span style="color:red" ng-show="EditEmpForm.Efternamn_field.$error.minlength">För kort!</span>
<span style="color:red" ng-show="EditEmpForm.Efternamn_field.$error.maxlength">För långt!</span>
<span style="color:red" ng-show="EditEmpForm.Efternamn_field.$error.pattern"> A-Z -'!</span>
</label>
</li>
<li>
<label>
Personnummer<br />
<input ng-model="Personnummer" name="Personnummer_field" type="text" placeholder="ÅÅÅÅ-MM-DD" ng-minlength="10" ng-maxlength="10" ng-pattern="/^((\d{4})-(\d{2})-(\d{2})|(\d{2})\/(\d{2})\/(\d{4}))$/" required />
<span style="color:red" ng-show="EditEmpForm.Personnummer_field.$error.pattern">Följ "ÅÅÅÅ-MM-DD".</span>
</label>
</li>
<li>
<label>
Telefonnummer<br />
<input ng-model="Telefon" name="Telefon_field" type="text" required ng-minlength="9" ng-maxlength="15" ng-pattern="/\(?([0-9]{3})\)?([ .-]?)([0-9]{3})\2([0-9]{4})/" />
<span style="color:red" ng-show="EditEmpForm.Telefon_field.$error.pattern">Felaktigt telefonformat.</span>
</label>
</li>
</ol>
</fieldset>
<fieldset ng-if="SelectRole=='Guardian'">
<legend>Redigera arbetsuppgifter</legend>
<ol>
<li>
<label>Välj Barn</label>
<select ng-model="selectedItem"></select>
</li> #* lägga till knapp för att kunna lägga till flera barn*#
<li>
<label>Sök barn</label>
<input type="text" requried />
</li>
</ol>
</fieldset>
<fieldset ng-if="SelectRole=='Student'">
<legend>Redigera arbetsuppgifter</legend>
<ol>
<li>
<label>Välj klass</label>
<select ng-model="selectedItem"></select>
</li>
<li>
<label>Sök på klassnamn</label>
<input type="text" required />
</li>
<li>
<label>
Förmyndare 1
<input type="text" required />
</label>
</li>
<li>
<label>
Förmyndare 2
<input type="text" required />
</label>
</li>
</ol>
</fieldset>
<fieldset ng-if="SelectRole=='Teacher'">
<legend>Redigera arbetsuppgifter</legend>
<ol>
<li>
<label>Välj klass</label>
<select ng-model="selectedItem"></select>
</li>
<li>
<label>Sök på klassnamn</label>
<input type="text" required />
</li>
<li>
<label>Aktuella klasser för anställd</label>
<ul>
<li>
<label>klass 1 test</label>
<input type="checkbox" />
</li>
<li>
<label>klass 2 test</label>
<input type="checkbox" />
</li>
</ul>
</li>
<li>
<label> Välj Kurs</label>
<select ng-model="selectedItem"></select>
</li>
<li>
<label>Sök på kursnamn</label>
<input type="text" required />
</li>
<li>
<label>Aktuella kurser för anställd</label>
<ul>
<li>
<label>kurs 1 test</label>
<input type="checkbox" />
</li>
<li>
<label>kurs 2 test</label>
<input type="checkbox" />
</li>
</ul>
</li>
<li>
</ol>
</fieldset>
<fieldset>
<button type=submit>Spara ändringar</button>
</fieldset>
</form>
</div>
</div>
<div class="col-md-8 gradeSelect" ng-click="SchoolAdmCtrl.UserWithoutRoles(); SchoolAdmCtrl.GetAllClasses(); AddEmp = ! AddEmp; editEmp = false" id="AddEmp">
<a><h1>Klicka här för att hantera anställda som ännu inte har roller i systemet</h1></a>
</div>
{{AddEmp}}
<div class="col-md-8 gradeSelect" ng-if="AddEmp">
<div>
<h1 style="color:red">{{SchoolAdmCtrl.noUsersFound}}</h1>
<form name="AddEmpForm" ng-if="SchoolAdmCtrl.noUsersFound !=''">
<fieldset>
<legend>Välj anställd för hantering</legend>
<ol>
<li>
<label>
Välj roll att tilldela användare<br />
<select ng-model="SelectRole2" name="SelectRole2_field" ng-options="role as role for role in SchoolAdmCtrl.allRoles" required></select>
<span style="color:red" ng-show="AddEmpForm.SelectRole2_field.$error.required">Välj roll</span>
</label>
</li>
<li>
<label>
Hantera anställda som ännu inte har roller i systemet<br />
<select ng-model="selectUserWithout2" name="SelectUserWithout2_field"
ng-options="user as user.Email for user in SchoolAdmCtrl.userWithoutRoles | filter : Sokperson2"
required></select>
<span style="color:red" ng-show="AddEmpForm.SelectUserWithout2_field.$error.required">Välj användare</span>
</label>
</li>
<li>
<label>
Sök på person<br />
<input ng-model="Sokperson2" type="text" />
</label>
</li>
</ol>
</fieldset>
<fieldset>
<legend>Redigera anställd</legend>
<ol>
<li>
<label>
Kön<br />
<select ng-model="Kon2" name="Kon2_field" required>
<option>Female</option>
<option>Male</option>
</select>
<span style="color:red" ng-show="AddEmpForm.Kon2_field.$error.required">Välj kön</span>
</label>
</li>
<li>
<label>
Förnamn<br />
<input ng-model="Fornamn2" name="Fornamn2_field" type="text" required ng-minlength="2" ng-maxlength="20" ng-pattern="/^[a-z ,.'-]+$/i" />
<span style="color:red" ng-show="AddEmpForm.Fornamn2_field.$error.minlength">För kort!</span>
<span style="color:red" ng-show="AddEmpForm.Fornamn2_field.$error.maxlength">För långt!</span>
<span style="color:red" ng-show="AddEmpForm.Fornamn2_field.$error.pattern"> A-Z -'!</span>
</label>
</li>
<li>
<label>
Efternamn<br />
<input ng-model="Efternamn2" name="Efternamn2_field" type="text" required ng-minlength="2" ng-maxlength="20" ng-pattern="/^[a-z ,.'-]+$/i" />
<span style="color:red" ng-show="AddEmpForm.Efternamn2_field.$error.minlength">För kort!</span>
<span style="color:red" ng-show="AddEmpForm.Efternamn2_field.$error.maxlength">För långt!</span>
<span style="color:red" ng-show="AddEmpForm.Efternamn2_field.$error.pattern"> A-Z -'!</span>
</label>
</li>
<li>
<label>
Personnummer<br />
<input ng-model="Personnummer2" name="Personnummer2_field" type="text" placeholder="ÅÅÅÅ-MM-DD" ng-minlength="10" ng-maxlength="10" ng-pattern="/^((\d{4})-(\d{2})-(\d{2})|(\d{2})\/(\d{2})\/(\d{4}))$/" required />
<span style="color:red" ng-show="AddEmpForm.Personnummer2_field.$error.pattern">Följ "ÅÅÅÅ-MM-DD".</span>
</label>
</li>
<li>
<label>
Telefonnummer<br />
<input ng-model="Telefon2" name="Telefon2_field" type="text" required ng-minlength="9" ng-maxlength="15" ng-pattern="/\(?([0-9]{3})\)?([ .-]?)([0-9]{3})\2([0-9]{4})/" />
<span style="color:red" ng-show="AddEmpForm.Telefon2_field.$error.pattern">Felaktigt telefonformat.</span>
</label>
</li>
</ol>
</fieldset>
<fieldset ng-if="SelectRole2=='Student'">
<ol>
<li>
<label>
Välj klass för elev<br />
<select ng-model="$parent.selectClass2" name="selectClass2_field" ng-options="klass as klass.Name for klass in SchoolAdmCtrl.allClasses" required></select>
<span style="color:red" ng-show="AddEmpForm.selectRole2_field.$error.required">Välj roll</span>
</label>
</li>
<li>
<label>
Sök på klass<br />
<input ng-model="Sokklass2" type="text" />
</label>
</li>
</ol>
</fieldset>
<button type="submit"
ng-disabled="
AddEmpForm.SelectRole2_field.$error.required ||
AddEmpForm.SelectUserWithout2_field.$error.required ||
AddEmpForm.Kon2_field.$error.required ||
AddEmpForm.Fornamn2_field.$error.minlength || AddEmpForm.Fornamn2_field.$error.maxlength || AddEmpForm.Fornamn2_field.$error.pattern || AddEmpForm.Fornamn2_field.$error.required ||
AddEmpForm.Efternamn2_field.$error.minlength || AddEmpForm.Efternamn2_field.$error.maxlength || AddEmpForm.Efternamn2_field.$error.pattern && AddEmpForm.Efternamn2_field.$error.required ||
AddEmpForm.Personnummer2_field.$error.pattern || AddEmpForm.Personnummer2_field.$error.required ||
AddEmpForm.Telefon2_field.$error.pattern || AddEmpForm.Telefon2_field.$error.required"
ng-click="SchoolAdmCtrl.UserRegistration(SelectRole2, selectUserWithout2.Id, Kon2, Fornamn2, Efternamn2, Personnummer2, Telefon2, selectClass2.Id)">
Spara ändringar
</button>
</form>
</div>
</div>
</div>

There are 2 things wrong that stand out.
You're making direct calls to class methods like so: SchoolAdmCtrl.UserWithRoles(). You should really be assigning those methods to your scope in your controller, like this:
$scope.UserWithRoles = function(){ ... }
Then you'll just need to call UserWithRoles(); like this:
ng-click="UserWithRoles();"
You're storing all of your data on that class. This might work just for this example, but like Guido Bouman said above, you should be storing it all on $scope. You're very likely to get undesired behavior if you have another instance of this controller I'd bet. Also, when you do this, you'll need to change all of your vm.blah references to just be blah since it'll be in your scope.

Related

How do I show a DIV id based on three inputs?

I am fairly new to javascript and wish to ask for some guidance.
I am trying to make a function that shows a Div id based on three inputs:
Diet type
Number of calories
Number of meals
Thanks.
<div class="dietSelector">
<div class="diet">
<div class="header">
<h2>Diet</h2>
</div>
<li class=nav-item>
<input type="radio" onclick="create()" id="anything">Anything
</li>
<li class=nav-item>
<input type="radio"id="keto">Keto
</li>
<li class=nav-item>
<input type="radio" id="vegetarian">Vegetarian
</li>
<form class="form" id="form-control">
<label>Calories:
</label>
<input type="number" id="calories" min="500" max="5000">
<br><br>
<label>
Meals:
</label>
<input type="number" placeholder="2" id="meals" min="1" max="5">
<button onClick="create" value="create">Create</button>
<br><br>
</form>
</div>
</div>
There were a few changes required in your code, kindly check the updated code in the below snippet.
I guess, this is your desired output. Let me know if you require further assistance.
function generateMeal(event) {
event.preventDefault();
debugger;
const calories = Number(document.getElementById("calories").value);
const meals = Number(document.getElementById("meals").value);
const anythingPlan3 = document.getElementById("anythingPlan3");
anythingPlan3.style.display = "none";
if (
document.getElementById("anything").checked &&
calories > 1500 &&
calories < 2000 &&
meals == 4
) {
anythingPlan3.style.display = "block";
} else {
anythingPlan3.style.display = "none";
}
}
<div class="dietSelector">
<div class="dietContainer">
<div class="header">
<h2>Please choose your diet</h2>
</div>
<li class="nav-item">
<input
type="radio"
name="diets"
id="anything"
/>Anything
<img src="images/meat.png" class="diets" />
</li>
<li class="nav-item">
<input type="radio" name="diets" id="keto" />Keto
<img src="images/keto.png" class="diets" />
</li>
<li class="nav-item">
<input type="radio" name="diets" id="vegetarian" />Vegetarian
<img src="images/vegetarian.png" class="diets" />
</li>
<form class="diet" onsubmit="generateMeal(event)" id="dietForm">
<label
>Please enter the number of calories you wish to eat in a day:
</label>
<input
type="number"
placeholder="1800"
id="calories"
min="1000"
max="2500"
/>
<br /><br />
<label> How many meals you would like to eat: </label>
<input type="number" placeholder="4" id="meals" min="3" max="4" />
<button type="submit" value="Generate">Generate</button>
</form>
</div>
</div>
<!-- Div container for Anything Plan, 3 meals. 1500-2500 Calories-->
<div id="anythingPlan3" style="display: none;">
<h2>
Your delicious, personalised 3-meal plan of 'Anything' in a 1500-2000
calorie range:
</h2>
<h3 class="headings">Breakfast</h3>
<img src="images/oatmeal.jpg" class="mealImage" />
<span class="calories"> 628 Calories </span>
<br />
<a
class="recipes"
href="https://www.runningtothekitchen.com/strawberry-oatmeal/"
>
Strawberry Oatmeal</a
>
<br />
<span class="serving">2 Bowls</span>
<h3 class="headings">Lunch</h3>
<img src="images/drumsticks.jpg" class="mealImage" />
<span class="calories"> 504 Calories </span>
<br />
<a
class="recipes"
href="https://www.taste.com.au/recipes/smoky-bbq-drumsticks-carrot-noodle-salad/RUmTZzJv?r=healthy/qnLBa1zE"
>
Smokey Bbq Drumsticks and Carrot Noodle Salad</a
>
<br />
<span class="serving">1 serving</span>
<h3 class="headings">Dinner</h3>
<img src="images/meatballs.jpg" class="mealImage" />
<span class="calories"> 628 Calories</span>
<br />
<a
class="recipes"
href="https://www.bbcgoodfood.com/recipes/chicken-meatballs-quinoa-curried-cauliflower"
>
Chicken Meatballs with Quinoa & Curried cauliflower></a
>
<br />
<span class="serving">1 serving</span>
</div>
You need to dynamically set conditions and render the divs. That's the cleanest way I can recommend.
const divArr = [
{
id: "anythingPlan2",
calorieLow: 1000,
calorieHigh: 2000
},
{
id: "anythingPlan3",
calorieLow: 2000,
calorieHigh: 3000
},
];
Fiddle: https://jsfiddle.net/h6es573m/

Javascript Object to filter json Array

I've got multiple checkboxes in an HTML form. When I click on a button, the checked values are put into an JavaScript object and a filter function is triggered.
this.filterChkbx.on('click', function() {
_this.checkedFilter.push({
filterEl: this.value
});
});
In the filter function I'm pulling a json file.
$.ajax("ajax/search-test-data.json")
.done(function (data){
...
Now I want to show the objects matching the values from the form. That´s what my json looks like:
{
"searchtest" : [
{
"id" : "001",
"section": "Hochschule",
"group": "Professoren",
"location": "Kaiserslautern",
"date": "HS 2015/11",
"description" : "Lorem ipsum dolor sit amet",
"details" : "VZ",
"deadline" : "27.12.2015",
"topic" : "Lorem"
},
{
"id" : "002",
And this is my form:
<form class="filterThisResults" action="ajax/search-test-data.json" method="GET">
<ul class="filter-list">
<button type="reset">Filter löschen</button>
<div class="search-filter-section">
<li>
<h2>Bereich</h2>
</li>
<li>
<input class="filterCheckbx" type="checkbox" name="section" value="Hochschule">
<label for="check1">Hochschule</label>
</li>
<li>
<input class="filterCheckbx" type="checkbox" name="section" value="Angewandte Ingenierwissenschaften">
<label for="check2">Angewandte Ingenierwissenschaften</label>
</li>
<li>
<input class="filterCheckbx" type="checkbox" name="section" value="Bauen & Gestalten">
<label for="check3">Bauen & Gestalten</label>
</li>
<li>
<input class="filterCheckbx" type="checkbox" name="section" value="BWL">
<label for="check4">BWL</label>
</li>
<li>
<input class="filterCheckbx" type="checkbox" name="section" value="Informatik">
<label for="check5">Informatik</label>
</li>
<li>
<input class="filterCheckbx" type="checkbox" name="section" value="Logistik">
<label for="check6">Logistik</label>
</li>
</div>
<div class="search-filter-group">
<li>
<h2>Gruppen</h2>
</li>
<li>
<input class="filterCheckbx" type="checkbox" name="group" value="Professoren">
<label for="check1">Professoren</label>
</li>
<li>
<input class="filterCheckbx" type="checkbox" name="group" value="Studenten">
<label for="check2">Studenten</label>
</li>
<li>
<input class="filterCheckbx" type="checkbox" name="group" value="Angestellte">
<label for="check3">Angestellte</label>
</li>
</div>
<div class="search-filter-location">
<li>
<h2>Standort</h2>
</li>
<li>
<input class="filterCheckbx" type="checkbox" name="location" value="Kaiserslautern">
<label for="check1">Kaiserslautern</label>
</li>
<li>
<input class="filterCheckbx" type="checkbox" name="location" value="Pirmasens">
<label for="check2">Pirmasens</label>
</li>
<li>
<input class="filterCheckbx" type="checkbox" name="location" value="Zweibrücken">
<label for="check3">Zweibrücken</label>
</li>
</div>
<div class="search-filter-topic">
<li>
<h2>Thema</h2>
</li>
<li>
<select class="filterCheckbx" id="topic" name="topic" size="3">
<option value="Lorem">Lorem</option>
<option value="Ipsum">Ipsum</option>
<option value="Dolor">Dolor</option>
</select>
</li>
</div>
<li>
<button class="submit-filter" type="submit">Ergebnisse anzeigen</button>
<li>
</ul>
</form>
What´s the way to go through the json and check which items are true. When more than one item in a form-section is selected, the results are enlarged.
Array.prototype.filter():
creates a new array with all elements that pass the test implemented by the provided function
Array.prototype.some():
tests whether some element in the array passes the test implemented by the provided function
.done(function(data) {
var elementsFoundInData = data.searchtest.filter(function(test) {
return checkedFilter.some(function(flt) {
return test.section === flt.filterEL;
});
});
// show found elements...
})
This is more like pseudo code as you probably would have to adjust the variables (checkFilter, data) a little bit depending on their scopes/types.
Instead push values in object, why should you not try with 'serialize' object property of jQuery.
Try this to store all form data in single string and then use filer and some method to match the values.
function showValues() {
var str = $( "form" ).serialize();
console.log(str);
}
$('[type=reset]').on("click",function(e){
showValues();
event.preventDefault();
})

possible to make ajax call for 2 links with one function

When I click fetch, I need the data to be fetched but not displayed in the form, but when I click feeling lucky, i want to display the list and fill up the form.
I got the logic working well for fetch link, Do I have to repeat the same for feeling lucky link? is there a optimized way to do it.
$post-item-# click event is inside success call data each loop, is that the right place to do it?
Here's a mirror of the snippet below: JSFiddle
Data
{
tag: "urlfoodchannel,chocolate,dessert",
searchedTags: "urlfoodchannel,chocolate,dessert|urlfoodchannel,chocolate,dessert|urlfoodchannel,chocolate,dessert",
tagPage: "/food/urlfoodchannel,chocolate,dessert-recipes/",
page: "2",
pages: "2",
total: "20",
posts: [{
postId: "21122896",
postUrl: "/article/2014/12/30/chocolate-oreo-ice-cream/21122896/",
postTitle: "Chocolate Oreo Ice Cream",
postExcerpt: "This creamy chocolate ice cream with chunks of Oreo cookie is perfect and surprisingly easy to make!",
postAuthor: "Marin Mama Cooks",
postPubdate: "2014-12-30T20:49:00",
postPubdateUnix: "1419990540",
postImage: "http://urlcdn.com/hss/storage/midas/201316424/chocolate-oreo-ice-cream-11.jpg"
} {
postId: "21122797",
postUrl: "/article/2014/12/30/sheet-pan-smores/21122797/",
postTitle: "Sheet Pan S'mores",
postExcerpt: "You've never had s'mores quite like this! Try this decadent and delicious recipe for sheet pan s'mores.",
postAuthor: "Oh, Bite It",
postPubdate: "2014-12-30T15:26:00",
postPubdateUnix: "1419971160",
postImage: "http://urlcdn.com/hss/storage/midas/201315673/spsbet.jpg"
}]
}
Script
$(document).ready(function () {
$("#fetch").on("click", function () {
tags = $("#tags").val();
count = $("#count").val() ? $("#count").val() : "10";
page = $("#page").val() ? $("#page").val() : "1";
apiurl = "http://urlblog.url.com/api/tags-v1/" + tags + "?pageSize=" + count + "&page=" + page;
$.ajax({
type: 'GET',
url: apiurl,
data: {
get_param: 'value'
},
success: function (data) {
$("#tag").text(data.tagPage);
$.each(data.posts, function (i) {
$("#posts").append('<li class="post-item-' + i + '"><p class="post-title">' + data.posts[i].postTitle + ' <img class="add-row" src="/portalcms/_tool/media/add.png">+</p><p class="post-thumb"><img src="' + data.posts[i].postImage + '" width="150px" class="post-image"/></p><p class="post-url">' + data.posts[i].postUrl + '</p></li>');
$(".post-item-" + i).bind("click", function () {
k = i + 1;
tval = $(this).find(".post-title").text();
ival = $(this).find(".post-image").attr("src");
uval = $(this).find(".post-url").text();
$("#input-link" + k + "\\.alt").val(tval);
$("#input-link" + k + "\\.href").val(uval);
$("#input-link" + k + "\\.credit").val(ival);
});
});
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<fieldset class="visible">Tags for tomorrow:
<input type="text" name="futuretags" id="future-tags" />
</fieldset>
<fieldset class="visible">Tags:
<input type="text" name="tags" id="tags" value="" />Count:
<input type="text" name="count" id="count" value="10" />Page:
<input type="text" name="page" id="page" value="1" /> Fetch
Feeling Lucky
<ul id="posts"></ul>
</fieldset>
<fieldset>
<legend>Link 1:</legend>
<ul class="inputs">
<li class="compact quickFormField-file ">
<label for="input-link1.src._action">Image:</label>
<br />
<select id="input-link1.src._action" name="link1.src._action">
<option value="no">No File</option>
<option value="upload">Upload a New File:</option>
<option value="url">Use File at Asset URL:</option>
</select> <span class="upload" style="display: none;"><input type="file" name="link1.src._upload" /></span>
<span class="url" style="display: none;"><input type="text" name="link1.src._url" value="" /> <small>(e.g. /path/to/file.jpg)</small></span>
</li>
<li class="">
<label for="input-link1.alt">Alt Text:</label>
<input id="input-link1.alt" type="text" name="link1.alt" value="" />
</li>
<li class="">
<label for="input-link1.credit">Credit:</label>
<input id="input-link1.credit" type="text" name="link1.credit" value="" />
</li>
<li class="">
<label for="input-link1.href">Href (URL):</label>
<input id="input-link1.href" type="text" name="link1.href" value="" />
</li>
</ul>
<div class="advancedgrp">
<div class="hdr">Show Advanced Options</div>
<fieldset class="cnt">
<legend>Advanced Options:</legend>
<ul class="inputs">
<li class="">
<label for="input-link1.target">Target:</label>
<select id="input-link1.target" name="link1.target">
<option value="">Same Window</option>
<option value="_blank">New Window</option>
</select>
</li>
<li class="">
<label for="input-link1.onclick">Onclick:</label>
<input id="input-link1.onclick" type="text" name="link1.onclick" value="" />
</li>
<li class="">
<label for="input-link1.otherAtts">Other Attributes:</label>
<input id="input-link1.otherAtts" type="text" name="link1.otherAtts" value="" />
</li>
<li class="">
<label for="input-link1.trackKey">Tracking Key:</label>
<select id="input-link1.trackKey" name="link1.trackKey">
<option value="icid" selected="selected">icid</option>
<option value="ncid">ncid</option>
</select>
</li>
<li class="">
<label for="input-link1.trackVal">Tracking Value:</label>
<input id="input-link1.trackVal" type="text" name="link1.trackVal" value="" />
</li>
</ul>
</fieldset>
</div>
<ul class="inputs"></ul>
</fieldset>
<fieldset>
<legend>Link 2:</legend>
<ul class="inputs">
<li class="compact quickFormField-file ">
<label for="input-link2.src._action">Image:</label>
<br />
<select id="input-link2.src._action" name="link2.src._action">
<option value="no">No File</option>
<option value="upload">Upload a New File:</option>
<option value="url">Use File at Asset URL:</option>
</select> <span class="upload" style="display: none;"><input type="file" name="link2.src._upload" /></span>
<span class="url" style="display: none;"><input type="text" name="link2.src._url" value="" /> <small>(e.g. /path/to/file.jpg)</small></span>
</li>
<li class="">
<label for="input-link2.alt">Alt Text:</label>
<input id="input-link2.alt" type="text" name="link2.alt" value="" />
</li>
<li class="">
<label for="input-link2.credit">Credit:</label>
<input id="input-link2.credit" type="text" name="link2.credit" value="" />
</li>
<li class="">
<label for="input-link2.href">Href (URL):</label>
<input id="input-link2.href" type="text" name="link2.href" value="" />
</li>
</ul>
<div class="advancedgrp">
<div class="hdr">Show Advanced Options</div>
<fieldset class="cnt">
<legend>Advanced Options:</legend>
<ul class="inputs">
<li class="">
<label for="input-link2.target">Target:</label>
<select id="input-link2.target" name="link2.target">
<option value="">Same Window</option>
<option value="_blank">New Window</option>
</select>
</li>
<li class="">
<label for="input-link2.onclick">Onclick:</label>
<input id="input-link2.onclick" type="text" name="link2.onclick" value="" />
</li>
<li class="">
<label for="input-link2.otherAtts">Other Attributes:</label>
<input id="input-link2.otherAtts" type="text" name="link2.otherAtts" value="" />
</li>
<li class="">
<label for="input-link2.trackKey">Tracking Key:</label>
<select id="input-link2.trackKey" name="link2.trackKey">
<option value="icid" selected="selected">icid</option>
<option value="ncid">ncid</option>
</select>
</li>
<li class="">
<label for="input-link2.trackVal">Tracking Value:</label>
<input id="input-link2.trackVal" type="text" name="link2.trackVal" value="" />
</li>
</ul>
</fieldset>
</div>
<ul class="inputs"></ul>
</fieldset>
<fieldset>
<legend>Link 3:</legend>
<ul class="inputs">
<li class="compact quickFormField-file ">
<label for="input-link3.src._action">Image:</label>
<br />
<select id="input-link3.src._action" name="link3.src._action">
<option value="no">No File</option>
<option value="upload">Upload a New File:</option>
<option value="url">Use File at Asset URL:</option>
</select> <span class="upload" style="display: none;"><input type="file" name="link3.src._upload" /></span>
<span class="url" style="display: none;"><input type="text" name="link3.src._url" value="" /> <small>(e.g. /path/to/file.jpg)</small></span>
</li>
<li class="">
<label for="input-link3.alt">Alt Text:</label>
<input id="input-link3.alt" type="text" name="link3.alt" value="" />
</li>
<li class="">
<label for="input-link3.credit">Credit:</label>
<input id="input-link3.credit" type="text" name="link3.credit" value="" />
</li>
<li class="">
<label for="input-link3.href">Href (URL):</label>
<input id="input-link3.href" type="text" name="link3.href" value="" />
</li>
</ul>
<div class="advancedgrp">
<div class="hdr">Show Advanced Options</div>
<fieldset class="cnt">
<legend>Advanced Options:</legend>
<ul class="inputs">
<li class="">
<label for="input-link3.target">Target:</label>
<select id="input-link3.target" name="link3.target">
<option value="">Same Window</option>
<option value="_blank">New Window</option>
</select>
</li>
<li class="">
<label for="input-link3.onclick">Onclick:</label>
<input id="input-link3.onclick" type="text" name="link3.onclick" value="" />
</li>
<li class="">
<label for="input-link3.otherAtts">Other Attributes:</label>
<input id="input-link3.otherAtts" type="text" name="link3.otherAtts" value="" />
</li>
<li class="">
<label for="input-link3.trackKey">Tracking Key:</label>
<select id="input-link3.trackKey" name="link3.trackKey">
<option value="icid" selected="selected">icid</option>
<option value="ncid">ncid</option>
</select>
</li>
<li class="">
<label for="input-link3.trackVal">Tracking Value:</label>
<input id="input-link3.trackVal" type="text" name="link3.trackVal" value="" />
</li>
</ul>
</fieldset>
</div>
<ul class="inputs"></ul>
</fieldset> <span id="tag"></span>
What you can do is just write the javascript function like this:
$(function(){
var searchmethods = {
fetched : false,
data : "",
fetch : function(callback) {
$.ajax({
success: function(data) {
fetched = false;
searchmethods.data = data;
if($.isFunction(showResults)) showResults();
}
});
},
lucky : function() {
if(searchmethods.fetched) {
searchmethods.showResults();
} else {
searchmethods.fetch(searchmethods.showResults);
}
},
showResults : function() {
// show results
}
};
$(".link").click(function(){
var action = $(this).data("action");
searchmethods[action].apply(this);
});
});
i like this way because you have all the code that you are going to need into an object
called searchmethods and it has the methods. Here is how does this work:
searchmethods.fetch() is called when you click on the fetch link, and retrieves the
data with the jQuery $.ajax() method.
searchmethods.lucky() is called when you click on the lucky link, checks if the data has been
retrieved, if not then it calls the searchmethods.fetch() method an it passes the function searchmethods.lucky() by parameter so it can be called after the $.ajax() retrieves the data
and the HTML like this:
<a data-action="fetch" class="link">fetch</a>
<a data-action="lucky" class="link">lucky</a>
but it is up to you, that's just an easy way
EDIT: answer it's already updated, sorry about my weird english

Jquery onclick not working or responsive

I would like to get the a user's details when a user's name is clicked through jquery, I have the following script:
$(document).ready(function(){
$('.employee_identification').keyup(function() {
var employee_identification = $('.employee_identification').val();
html = '';
$.ajax({
type: "GET",
url: "<?php echo base_url(); ?>admin_profile/get_employee_names/" + employee_identification,
dataType: "json",
success: function(response) {
employee_name_results = $('#employee_name_results').empty();
$.each(response, function(i, response) {
var f_name = response.f_name;
var s_name = response.s_name;
var other_name = response.other_name;
var identification_no = response.identification_no;
var str = f_name + s_name + other_name;
var employee_id = response.employee_id;
employee_name_results.append('<label class="form-label-top">Employee Name : </label> <a id="employee_name_searched" class="employee_name_searched btn btn-success" href="#add_user_window" value="' + str + '">' + str + '</a></br> <label class="form-label-top"> Identification Number: </label><span>' + identification_no + '</span><input type="hidden" value="' + employee_id + '" class="employee_searched_id" id="employee_searched_id"/></br>');
});
},
error: function(data) {
alert(data);
}
});
});
$('.employee_name_searched').click(function() {
alert('clicked');
var employee_id = $('.employee_searched_id').val();
$.ajax({
type: "GET",
url: "<?php echo base_url(); ?>admin_profile/get_employee_name_clicked/" + employee_id,
dataType: "json",
success: function(response) {
$.each(response, function(i, response) {
var f_name = response.f_name;
var s_name = response.s_name;
var other_name = response.other_name;
var is_active = response.is_active;
var employee_id = response.employee_id;
$('#add_f_name').val(f_name);
$('#add_s_name').val(s_name);
$('#add_other_name').val(other_name);
$('#add_is_active').val(is_active);
$('#add_employee_id').val(employee_id);
});
},
error: function(data) {
alert(data);
}
});
});
});
//HTML
<div> <a class="add_zone btn btn-success" id="add_user" href="#employee_search_window">
<i class="icon-plus-sign icon-white"></i>
Add User
</a> </div>
<!-- Employee User name search begins here -->
<div id="employee_search_window" class="employee_search_window" style="display: none !important;">
<form>
<div class="form-all">
<ul class="form-section">
<li id="cid_30" class="form-input-wide">
<label>Employee's Identification Number : <span class="form-required">*</span> </label>
</li>
<li>
<p class="red important">
Please provide employees Identification number :
</p>
<input type="text" class="employee_identification" id="employee_identification"/>
</li>
</ul>
</div>
<div id="employee_name_results" class="employee_name_results">
<label class="form-label-top">Employee Name : </label>
</div>
</form>
</div>
<!-- Add User Details Begins from here -->
<div id="add_user_window" style="display:none !important;">
<form class="add_user_form" id="add_user_form" method="post" >
<div class="form-all">
<ul class="form-section">
<li id="cid_30" class="form-input-wide">
<div class="form-header-group">
<h2 id="header_30" class="form-header">
User Information
</h2>
</div>
</li>
<li class="form-line" id="id_5">
<label class="form-label-top" id="label_5" for="user_name">
User Name<span class="form-required">*</span>
</label>
<div id="cid_5" class="form-input-wide">
<input type="text" class="form-number-input user_name form-textbox validate[required, Numeric]" id="user_name" name="add_user_name" style="width:204px" size="23" maxlength="8" data-type="input-number" />
</div>
</li>
<li class="form-line form-line-column" id="id_6">
<label class="form-label-top" id="label_6" for="f_name">
First Name<span class="form-required">*</span>
</label>
<div id="cid_6" class="form-input-wide">
<input type="text" class=" form-textbox f_name validate[required]" id="f_name" name="add_f_name" size="30" />
</div>
</li>
<li class="form-line form-line-column" id="id_6">
<label class="form-label-top" id="label_6" for="s_name">
Sur Name<span class="form-required">*</span>
</label>
<div id="cid_6" class="form-input-wide">
<input type="text" class=" form-textbox zone_rate validate[required]" id="s_name" name="add_s_name" size="30" />
</div>
</li>
<li class="form-line form-line-column" id="id_6">
<label class="form-label-top" id="label_6" for="other_name">
Other Name<span class="form-required">*</span>
</label>
<div id="cid_6" class="form-input-wide">
<input type="text" class=" form-textbox zone_rate validate[required]" id="other_name" name="add_other_name" size="30" />
</div>
</li>
<li class="form-line form-line-column" id="id_6">
<label class="form-label-top" id="label_6" for="employee_type">
Employee Type<span class="form-required">*</span>
</label>
<div id="cid_6" class="form-input-wide">
<select name="add_employee_type">
<?php ?>
<option>Select Employee Type</option>
<option value="Administrator">Administrator</option>
<option value="Director">Director</option>
<option value="Manager">Manager</option>
<option value="Accounts">Accounts</option>
</select>
</div>
</li>
<li class="form-line form-line-column" id="id_36">
<label class="form-label-top" id="label_36" for="is_active">
Is Active ?<span class="form-required">*</span>
</label>
<div id="cid_36" class="form-input-wide">
<select name="add_is_active">
<option value="Yes" >Yes</option>
<option value="No">No</option>
</select>
</div>
</li>
<li>
<input id="add_employee_id" class="add_employee_id" type="text"/>
</li>
<li class="form-line" id="id_27">
<div id="cid_27" class="form-input-wide">
<div style="text-align:left" class="form-buttons-wrapper">
<input type="submit" id="add_user_button" class="add_user_button" value="Add New User Details" />
</div>
</div>
</li>
</ul>
</div>
</form>
<p class="center">
</p>
<div class="clearfix"></div>
</div>
<!-- End of Add Employee Details -->
When the employee_name_searched is clicked, the second function which is a click should run to fetch the user's details but there's no response at all from the click. What have I done wrong? I keep getting the following error : TypeError: e._impala is undefined
You create the element after adding the event listener. Either you need to use .on() or you need to bind the event to each element upon its creation.
Move your click() function inside of your keyup() function after where you create your employee_name_searched element.
The reason you must do this is because you are binding your on click function to a non-existent element on page load because you have it inside of your on ready function. You have not yet made a key movement so your element has yet to be created.
Try this:
$('.employee_identification').keyup(function() {
// ajax request and append your new element
// bind your on click function to the element
$('.employee_name_searched').click(function() {
});
});

Order forms field calculation

I am building a order form for buying Bitcoins via JotForm.Maybe someone could give me a head start here. My order form has a a few fields I have a field with current Bitcoin price which is retrieved with PHP via JSON. What I would like to do is when a user enters a amount of bitcoins he would like to order the field of TOTAL SUM would refresh automatically based on amount he entered like "2xcurent price". Any help is like really appreciated!
This is how it looks visually:
http://oi60.tinypic.com/2k4fgw.jpg
Part of my form code is here:
<h2 id="header_13" class="form-header">
Order form
</h2>
</div>
</li>
<li class="form-line" id="id_15">
<div id="cid_15" class="form-input-wide">
<div id="text_15" class="form-html">
<p>
<strong>
Bitcoin price USD:<?php echo $usd; ?>
</strong>
</p>
</div>
</div>
</li>
<li class="form-line" id="id_18">
<div id="cid_18" class="form-input-wide">
<div id="text_18" class="form-html">
<p>
<strong>
Total Sum :
</strong>
</p>
</div>
</div>
</li>
<li class="form-line" id="id_3">
<label class="form-label-top" id="label_3" for="input_3"> Email: </label>
<div id="cid_3" class="form-input-wide">
<input type="email" class=" form-textbox validate[Email]" id="input_3" name="q3_elPastas" size="25" value="" maxlength="38" />
</div>
</li>
<li class="form-line" id="id_9">
<label class="form-label-top" id="label_9" for="input_9"> Bitcoin amount: </label>
<div id="cid_9" class="form-input-wide">
<input type="text" class=" form-textbox validate[Numeric]" data-type="input-textbox" id="input_9" name="q9_pasirinktosValiutos9" size="25" value="" />
</div>
</li>
<li class="form-line" id="id_10">
<label class="form-label-top" id="label_10" for="input_10"> Bitcoin address: </label>
<div id="cid_10" class="form-input-wide">
<input type="text" class=" form-textbox validate[AlphaNumeric]" data-type="input-textbox" id="input_10" name="q10_bitcoinAdresas10" size="25" value="" maxlength="37" />
</div>
</li>
<li class="form-line" id="id_14">
<label class="form-label-top" id="label_14" for="input_14"> </label>
<div id="cid_14" class="form-input-wide">
<div class="form-single-column"><span class="form-checkbox-item" style="clear:left;"><input type="checkbox" class="form-checkbox" id="input_14_0" name="q14_input14[]" value="I Agree to receive newsletter" />
<label for="input_14_0">I Agree to receive news letter </label></span><span class="clearfix"></span>
</div>
</div>
</li>
<li class="form-line" id="id_12">
<div id="cid_12" class="form-input-wide">
<div style="width:100%; text-align:Left;">
<script id="jcf_custom_field" type="text/javascript" src="http://js.jotform.com/WidgetsServer.min.js"></script>
<iframe onload="widgetFrameLoaded(12)" frameborder="0" scrolling="no" class="custom-field-frame" id="customFieldFrame_12" src="" style="border:none;width:400px; height: 45px">
</iframe>
<div>
<input id="input_12" class="form-hidden widget-required form-widget" type="hidden" name="q12_clickTo" value="">
</div>
</div>
</div>
</li>
<li class="form-line" id="id_2">
<div id="cid_2" class="form-input-wide">
<div style="text-align:center" class="form-buttons-wrapper">
<button id="input_2" type="submit" class="form-submit-button">
ORDER!
</button>
</div>
</div>
</li>
<li style="display:none">
Should be Empty:
<input type="text" name="website" value="" />
</li>
</ul>
I solved this by simply using an array of objects. So for example, I am accepting registrations. So to get the total price I go about it like this:
var registrants = [];
registrants.push({ price: 30 });
registrants.push({ price: 10 });
registrants.push({ price: 20 });
var totalPrice = 0;
for(var x = 0; x < registrants.length; x++){
totalPrice += registrants[x]["price"];
}
and you would just update the price property of the corresponding registrant when appropriate.

Categories