I made this form using jQuery.
The jQuery code which I wrote to add this is as follows :
formView:function(){
var htmlStr = '<form><input class = "name"/><input class = "imageUrl"/><input class = "counter"/></form><button class="cancel">Cancel</button>'
$('#form').html(htmlStr);
// octopus.changeFlag();
}
and the code to collapse this form, I used jQuery as event delegation as below :
$('#form').on('click','cancel',function(e){
console.log("Hello world");
$('#form').html('');
// e.preventDefault();
});
My HTML code is as below:
<body>
<ul class = "list">
</ul>
<img class="image" src="images/Vaibhav.jpg">
<div id="count"></div>
<div id="admin">
<button class="admin">Admin</button>
<div id = "form"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
Whenever I click on cancel, it should collapse the form, but its not happening. Thanks in advance.
p.s. I am a beginner to jQuery.
You need to add . to your selector for class cancel
$('#form').on('click','.cancel',function(e){
console.log("Hello world");
$('#form').remove();
// e.preventDefault();
});
Related
I am developing an website with AngularJS and
mobile angular UI.
I have a menu bar which will show on clicking a button and should be closed when I click the options in it. But it isn't working as expected.
My files:
index.html
<div id="menuBar" ng-show="showMenu">
<div class="row">
page1
</div>
</div>
js for hiding menu
app.controller('mainController', function ($rootScope, $scope) {
$rootScope.showMenu = false;
$rootScope.$on("$routeChangeStart", function () {
$rootScope.showMenu = false;
});
});
So while switching to some other file the menu should hide ideally. But it didn't happen so.
The problem is how you show your menu. With this code:
<div ng-click="showMenu=!showMenu" class="btn btn-navbar"><i class="fa fa-bars"></i></div>
you change showMenu property of the child scope. This showMenu is not the same as $rootScope.showMenu. For this reason when you change $rootScope.showMenu in $routeChangeStart it doesn't effect child scope property. Instead you should do something like this:
<div ng-click="toggleMenuBar()" class="btn btn-navbar"><i class="fa fa-bars"></i></div>
and in controller:
$scope.toggleMenuBar = function() {
$rootScope.showMenu = !$rootScope.showMenu;
};
I apologize if I worded the question incorrectly, I am attempting to build a survey builder and I am running into a problem. Here is the link to an example plunker:
Updated:
plunker
JS:
(function() {
var app = angular.module('FormBuilder');
var stageController = function($scope, componentBuilder) {
//var test = "<div>test<button>Im a Button</button></div>";
$scope.components = [];
$scope.components2 = [];
$scope.selectedComponentIndex = -1;
//$scope.list = [{html:test}];
//$scope.componentSettings = "";
$scope.showComponentSettings = function(componentName, index) {
$scope.componentSettings = componentName;
$('#navTab a[href="#componentSettingsPage"]').tab('show');
};
$scope.addMultipleChoice = function() {
var component = componentBuilder.createMultipleChoice();
$scope.components2.push(component);
$scope.components.push(component.name);
};
$scope.addTextEntry = function() {
var component = componentBuilder.createTextEntry();
$scope.components.push(component);
};
$scope.addReadOnlyTextEntry = function() {
var component = componentBuilder.createReadOnlyTextEntry();
$scope.components.push(component);
};
$scope.delete = function(index) {
$scope.components.splice(index, 1);
};
};
app.controller("stageController", stageController);
}());
HTML:
<body>
<div ng-controller="stageController">
<!-- div>
<div ui-sortable="" ng-model="list">
<div ng:repeat="item in list" class="item">
{{item}}
</div>
</div>
</div-->
<div>
Value of scope.inner = {{components}}
</div>
<div style="display: table-row">
<div ng-include="" src="'nav.html'" style="width: 300px; display: table-cell;"></div>
<div ng-include="" src="'stage.html'" style="display: table-cell;"></div>
</div>
</div>
<script type="text/ng-template" id="multipleChoice">
<div class="multipleChoice"></div>
</script>
<script type="text/ng-template" id="textEntry">
<div class="textEntry"></div>
</script>
<script type="text/ng-template" id="readOnlyTextEntry">
<div class="readOnlyTextEntry"></div>
</script>
UPDATED question and example:
Please see my current plunker for the problem I am having. The plunker shows an example form builder that allows a user to added various components to build a form, this example allows multiple choice, text entry, and read only text entry components.
The left nav contains two tabs, one for the components and another for custom settings such as changing the question label or adding more choices to a component. My current problem is that I don't know the best method/practice to bind elements on the item settings to a specific form component in the collection.
So if a user adds a multiple choice component, clicks on it, it will show the item settings, and then be able to modifying the component settings for that specific component.
I hope this is more clear, any help is appreciated, thank you in advance.
I want to create function (in angularjs controller) which add particular class to the parent div of the empty input when clicking on the button. And remove that class when i type something in the input.
I have a working example here: http://jsfiddle.net/fUdLv/
HTML:
<div ng-app="authorization">
<div ng-controller="authCtrl as auth">
<div ng-class="{'error':auth.needEmail}">
<input type="text" ng-model="auth.email" ng-keypress="auth.clearEmail()">
</div>
<div ng-class="{'error':auth.needPassword}">
<input type="password" ng-model="auth.password" ng-keypress="auth.clearPassword()">
</div>
<div>
<button ng-click="auth.signin()">Sign in</button>
</div>
</div>
</div>
Javascript:
angular.module('authorization', [])
.controller('authCtrl', function() {
this.needEmail = false;
this.needPassword = false;
this.signin = function pay() {
if (!this.email){
this.needEmail = true;
}
if (!this.password){
this.needPassword = true;
}
};
this.clearEmail = function(){
this.needEmail = false;
}
this.clearPassword = function(){
this.needPassword = false;
}
});
But i'm sure it is very bad code, because i have a particular function for working with particular input. How can i generalize this function for working on every input (for example, if i would have three or four inputs it is not very smart solution to create function for each of them)
How about use <form> and FormController to control state?
You probably need to read this guide from official site.
after spending last days trying to find out a solution , now I'm asking help for understanding which is/are the error/s of my code. Starting from the following external Json file listviewJsonData.json
var itemList = [{"title":"Title_1","description":"Blah blah1"},{"title":"Title_2","description":"Blah blah2"}];
I'm updating a listview trough the following code:
<div id="dataList">
<ul data-role="listview" data-inset="true">
<script type="text/javascript">
var serviceURL = "https://.../.../listviewJsonData.json";
var outputitem = '';
$.getJSON(serviceURL,function(data) {
$.each(data, function(index,item) {
outputitem += '<li><h4>'+ item[index].title +'</h4></li>';
$('#dataList').append(outputitem);
}
$('#dataList').listview('refresh');
});
</script>
</ul>
</div>
This code doesn't get me any update and the listview remains empty,
I've also checked this post but I was not able to find out a solution to my issue.
Can anyone give me any help?
thnks a lot
Your script is in-line and may fire before jQuery Mobile loads or enhances your markup. Try invoking your script by firing it as part of your pageinit event.
http://jquerymobile.com/demos/1.2.0/docs/api/events.html
$( '#aboutPage' ).live( 'pageinit',function(event){
enhanceMyDataList();
});
Also, you are appending <li> items to a container <div>, not your <ul>. Move/combine your id attribute.
<ul id="dataList" data-role="listview" data-inset="true">
Try this:
<div>
<ul id="dataList" data-role="listview" data-inset="true">
</ul>
<script type="text/javascript">
var serviceURL = "https://.../.../listviewJsonData.json";
$.getJSON(serviceURL,function(data) {
$.each(data, function(index,item) {
$('#dataList').append('<li><h4>'+ item.title +'</h4></li>');
});
$('#dataList').listview('refresh');
});
</script>
</div>
EDIT: I changed the div id to ul and a syntax error on script.
I have a PHP file that serves up a JSON array populated from a MySQL database and is loaded into the DOM. This data is loaded via jQuery getJSON() method into the #navContent divide of the HTML document. This functions as planed.
At the very-bottom of the HTML doc, I have a click function that targets the #navItem div that was dynamically loaded into the DOM but this does not fire. I am assuming the <li ID = 'navItem'... isnt kept when the data is dynamically populated..??
What do I have wrong? For now, I just want all the divides that were dynamically created into the #navContent div to click thru to a URL.
<html>
. . .
<head>
. . .
<script type="text/javascript">
var ajaxLoader = '';
var container = "navItem";
var appendE = "navContent";
var dns = 'http://192.168.1.34';
var navContent = '/andaero/php/regulatory_list.php';
var bodyContent = '/wiki/index.php/Airworthiness_Directive #content';
<!-- ================ When Ready Do This ============================ -->
<!-- **************************************************************** -->
$(document).ready(function(){
loadNav(dns + navContent, container, appendE);//<- This gets loaded into the navContent<div
loadPage(dns + bodyContent, "bodyContent");
});
. . .
</script>
<body>
. . .
<div id="navScrollContainer" class="navContentPosition">
<div id="navContent" >
<li id="navItem" style="display: none;">
<h1 class="navH1"></h1>
<h2 class="navH2"></h2>
<p class="navP"></p>
<hr class="navHR" />
</li>
</div>
</div>
. . .
</body>
<!-- ================ Functions ===================================== -->
<!-- **************************************************************** -->
<script type="text/javascript">
/* --------------- Handle Pg Loading ----------------- */
function loadPage(url, pageName) {
$("#" + pageName).load(url, function(response){
// transition("#" + pageName, "fade", false);
});
};
function loadNav(url, container, appendE) {
$.getJSON(url, function(data){
$.each(data.items, function(){
var newItem = $('#' + container).clone();
// Now fill in the fields with the data
newItem.find("h1").text(this.label);
newItem.find("h2").text(this.title);
newItem.find("p").text(this.description);
// And add the new list item to the page
newItem.children().appendTo('#' + appendE)
});
$('#navHeaderTitle').text(data.key);
//transition("#" + pageName, "show");
});
$('#navItem').click(function(e){ //<-- THIS IS BROKE!! HELP!!
e.preventDefault();
$('#bodyContent').load('www.google.com');
});
};
</scrip>
</html>
============ EDIT ================
I tried everything that was sugested with no prevail. I ended up using the code Shyju answered with but one modification to get it to work: As per the docs,
.on( events [, selector] [, data], handler(eventObject) ), I changed [,data] from the tag ID to just the tag type. ie: a. This function now since I wrapped the whole with the tag. See bellow:
Changed HTML to:
<div id="navScrollContainer" class="navContentPosition">
<div id="navContent" >
<li id="navItem" style="display: none;">
<a> //<-- ADDED THIS TAG WRAPPER!!
<h1 class="navH1"></h1>
<h2 class="navH2"></h2>
<p class="navP"></p>
<hr class="navHR" />
</a>
</li>
</div>
</div
Changed the Function to (Note that .on() allows a click event on any TAG element--even new ones--since the event is handled by the ever-present previous element after it bubbles to there.:
$('#navContent').on('click', 'a', function(e){//<--CHANGED DATA TO 'a'
e.preventDefault();
$('#bodyContent').load('http://www.google.com');
});
for dynamic content, you should use jquery on.
http://api.jquery.com/on/
So your code should look like this
$("#navScrollContainer").on("click","#navItem").click(function(e){
e.preventDefault();
$('#bodyContent').load('www.google.com');
});
But i guess you should not use the id selector for click event, because ids will (And should) be unique for an element. So when you load new content, the id will be different i believe. Probably you can use class name which is common for all those elements to be clicked.
on method is availabe from jQuery 1.7 version only. If you are using a previous version, you should use live as Niyaz mentioned.
http://api.jquery.com/live/
Instead of:
$('#navItem').click(function(){});
try using:
$('#navItem').live('click', function(){}); // jQuery older than 1.7
or
$('#navItem').on('click', function(){}); // jQuery 1.7 or newer
It would appear so that all your nav elements are created with the same ID. This
$('#navItem').click(function(e){ //<-- THIS IS BROKE!! HELP!!
will apply to only one of them I suppose. Try adding some sort of counter to the ID when you are cloning:
var newItem = $('#' + container).clone();
newItem.attr("id","something_unique_in_here");