I have a situation here. I have used angularJS for my application and also using $resource for service call. Now i want to implement a new functionality in this. In this i need to show a checkbox for which i have a code in index.html and i need to load the services conditionally. but i am not specifying ng-app in this. I want my application to behave as angular from the second page which i am redirecting from index. Is it possible to do? If yes can anyone help me please?
Here is the sample code which i have tried but am stuck:
Index.html
<body>
<div>
<table style="margin-left:40%">
<td style="width:62%">
<label id="sampleEnv" style="margin-top:10%">First Login</label>
</td>
<td>
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch">
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</td>
</tr>
</table>
<input type="button" value="submit" onclick="checkVal()">
</div>
<script>
function onclick(){
alert(document.getElementById("myonoffswitch").checked);
location.href="views/login.html";
}
</script>
</body>
Login.html
<html ng-app="sampleApp">
<head>
</head>
<body ng-controller="sampleController">
<form name="sampleForm" ng-submit="authenticate()" novalidate>
<div>
<table align="center">
<tr>
<td>ID</td>
<td> <input name="sampleId" type="text" maxlength="9" ng-model="sampleIdModel" integer/></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="password" ng-model="password" passwordmin /></td>
</tr>
</table>
</div>
</form>
</div>
</body>
</html>
App.js
var app = angular.module("sampleApp", ["sampleService"]);
After clicking on the submit button on index page, login page comes but fully distorted. After debugging in chrome, i found that login.html doesn't have any support from any other controller or js which was loaded in index.html .
Any help will be very useful.
Thanks in advance.
Related
i've got a problem I can't figure out.
I have a page (index.php) that open a form, includes another page with PHP (indexsearch.php) and close the form.
This included page is working with a script that display some datas from my website, the data are requested on the page with an AJAX function that is linked to search.php, that is working with a table and checkboxes so we can choose which data to work with.
See this schema :
Everything is working fine but the checkboxes are not send even when they are checked. I did added the name and the value in search.php
<td> <input type="checkbox" name="ajout[]" value="<?php echo $result['id']; ?>"/> </td>
I also did not opened another form.
So I guess the problem may come from the fact the AJAX datas work as an independant form that is not included in my page.
Please see the html code :
<body>
<div class="division">
<table id="text-p">
<tr>
<td>
<form action="" method="get" enctype="multipart/form-data">
<textarea id="text-p1" name="text-p1" maxlength="300" placeholder="Text1"></textarea>
</td>
<td>
<textarea id="text-p2" name="text-p2" maxlength="300" placeholder="Text2"></textarea>
</td>
</tr>
<tr>
<td>
<input type="hidden" name="MAX_FILE_SIZE" value="1000000">
Logo : <input name="logo-p1" type="file" accept="image/*">
</td>
<td>
<input type="hidden" name="MAX_FILE_SIZE" value="1000000">
Logo : <input name="logo-p2" type="file" accept="image/*">
</td>
</tr>
</table>
</div>
<div class="division">
<div width="100%" style="height: 50px;">
<input type="text" name="recherche" id="recherche" style="width: 75%; float:left; display: inline-block;" placeholder="Rechercher...">
<div style="float:right;">
<input type="radio" name="onglet" value="val1" id="act" checked="">Activité
<input type="radio" name="onglet" value="val2" id="sect">Secteur
<input type="radio" name="onglet" value="val3" id="ecr">Ecrans
</div>
</div>
<div width="100%" id="resultats">
<input id="ok" type="button" class="pageselector" name="pageselector" value="1" checked=""><table id="resultat1" width="100%" style="text-align: center;" class="resultatshow">
<tbody><tr>
<td>Cat</td>
<td>Text-1</td>
<td>Text-2</td>
<td>Sélec</td>
</tr>
<tr>
<td>Cat1</td>
<td>NULL</td>
<td>NULL</td>
<td> <input type="checkbox" name="ajout[]" value="1"> </td>
</tr>
<tr>
<td>CAT2</td>
<td>EMPTY</td>
<td>EMPTY</td>
<td> <input type="checkbox" name="ajout[]" value="2"> </td>
</tr>
</table></div>
<input type="submit" value="UPDATE">
</div>
</body>
How can I fix that ?
I am not sure but I guess it can be caused by square brackets in the name attribute of your checkboxes. If you have reason to do it, you have to work with it properly. For example, here is the HTML form field:
<input type='checkbox' name='checkbox[myOption]'>
You have to remember that POST is an array of options. So doing like above you have to access it in the right way on the server side:
$_POST['checkbox']['myOption'];
I don't know if that solves your problem but I hope it helps a little bit
I have looked everywhere and I didn't found really good answer.
I am generating local html page with python and I want to read data from form over there, use this as input for python script and display return from there properly.
f = open('testapi.html','w')
message = """
<html>
<head>
<title></title>
<link rel="stylesheet" href="Bootstrap/bootstrap-3.3.5-dist/css/bootstrap.css" type="text/css"/>
<script>
</script>
</head>
<body>
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-3">
<p>Search for best deals</p>
<form name="deals" action="">
<table>
<thead></thead>
<tbody>
<tr> <th>Title </th> <th><input type="text" id="Title" value=""><br></th> </tr>
<tr> <th>Lowest price</th> <th><input type="text" id="LowerPrice" value=""><br></th> </tr>
<tr> <th>Highest price</th> <th><input type="text" id="UpperPrice" value=""><br></th> </tr>
<tr> <th>Sale only</th> <th><input type="checkbox" id="OnSale" value=""></br></th> </tr>
</tbody>
</table>
<p>Sort by:</p>
<input type="radio" name="sort" id="DealRating" value="a">Deal rating<br>
<input type="radio" name="sort" id="Title" value="b">Title<br>
<input type="radio" name="sort" id="Price" value="c">Price<br>
<input type="radio" name="sort" id="Release" value="d">Release<br>
<input type="button" name="Sumbit" value="Submit" onClick="">
</form>
<p> Note: all fields are optional, fill only what you are intrested in.</p>
</div>
<div class="col-md-2">
<p> OR </p>
</div>
<div class="col-md-3">
<p>Search for your favourite games<p>
<form name="games" action="">
<table>
<thead></thead>
<tbody>
<tr><th>Title</th> <th><input type="text" id="GameTitle" value=""></br></th></tr>
</tbody>
</table>
<input type="button" name="Sumbit" value="Submit" onClick="">
</form>
<p> Note: all fields are optional, fill only what you are intrested in.</p>
</div>
<div class="col-md-2">
</div>
</div>
</body>
</html>
"""
f.write(message)
f.close()
my question now is: how I can use that form input to process it in api search and then return result back on this page?
OR
eventually: how to runnpython script from my page and just display results?
Note: I have to use python for this. This is requirement for my project.
It looks like you're looking for something like a CGI script in python. Python has some support for this in the standard library.
There are a lot of tutorials that explain that in detail how to do that exactly.
You could also use mod_python, which is an extension for the Apache web server to run and parse python scripts.
I have a MySQL database and table in it. I take data from it using Node JS. My HTML code contains input search and a table that has data from search results. I use AngularJS for searching.
The problem is that search doesn't work. I have the whole table instead of some results.
Part of HTML code:
<div class="search">
<form action="" method="post" class="searchform" >
<input type="search" name="" placeholder="Поиск" class="inputsearchform" ng-model="search"/>
<input type="submit" name="" value="" class="submitsearchform" />
</form>
</div>
<div class="songlist" ng-app='test_table' ng-controller='main_control'>
<table id="songlistTableR">
<tr><th>Name</th><th>Link</th></tr>
<tr ng-repeat="data in loaded | filter:search">
<td><i class="fa fa-plus"></i>{{data.song_name}}</td>
<td><a href="{{data.link}}" target='_blank'>Youtube</a></td>
</tr>
</table>
</div>
JS script:
var app = angular.module('test_table', []);
app.controller('main_control',function($scope, $http){
load();
function load(){
$http.get("http://localhost:7001/load").success(function(data){
$scope.loaded=data;
});
}
});
All your angular html code need to be nested in the ng-app attribute, so your <div class="search"> is never parsed by Angular, including your ng-model definition. You should edit your code into something like:
<div class="songlist" ng-app='test_table' ng-controller='main_control'>
<div class="search">
<form action="" method="post" class="searchform" >
<input type="search" name="" placeholder="Поиск" class="inputsearchform" ng-model="search"/>
<input type="submit" name="" value="" class="submitsearchform" />
</form>
</div>
<table id="songlistTableR">
<tr><th>Name</th><th>Link</th></tr>
<tr ng-repeat="data in loaded | filter:search">
<td><i class="fa fa-plus"></i>{{data.song_name}}</td>
<td><a href="{{data.link}}" target='_blank'>Youtube</a></td>
</tr>
</table>
</div>
Below is JSP page
<div id="tabs-7" style="width: 100%;">
<form:form id="deviceForm" name="" modelAttribute="" enctype="multipart/form-data">
<div class="inputWidgetContainer">
<div class="inputWidget">
<table>
<tr height="6"></tr>
<tr>
<td class="rightalign">
<input type="radio" id="radio_SampleInput"
name="xyzRadio" value="sampleInputRadio" checked="checked"
onclick="loadXyz()"/>
</td>
<td class="leftAlign inputLabel">Sample Input</td>
<td class="rightalign">
<input type="radio" id="radio_abc"
name="sampDtlsRadio" value="abcRadio"
onclick="loadabc()">
</td>
</tr>
</table>
</div>
</div>
<div id="xyz">
<jsp:include page='xyz.jsp' />
</div>
<div id="abc" class="hide">
<jsp:include page='abc.jsp' />
</div>
</form:form>
</div>
In JS file I am hiding div based on user's selection.
Both page have some functionality which changes page's default look, Like row can be added or deleted, Now if user select other radio button and came back to page, default look should be displayed. I don't want to get into undo what user has done, util there is cleaner way to do it.
Currently I am reloading parent page.
Is there any way using ajax call I can request for xyz.jsp page again, so that I don't have to refresh parent page. Or any better solution.
First of all it's better to use onchange rather then onclick. Second, combine you radio buttons with the same name (to make it acting like radio buttons rather then as a checkboxes). Third, bind your handlers in js code rather then in html. And finally, of course you can load parts via Ajax.
$('[type="radio"]').on('change', function(){
if($('[type="radio"]:checked').val() === 'sampleInputRadio') {
$('#xyz').load('http://your.serv.er/xyz.jsp');
loadXyz();
} else {
$('#abc').load('http://your.serv.er/abc.jsp');
loadabc();
}
});
<div id="tabs-7" style="width: 100%;">
<form:form id="deviceForm" name="" modelAttribute="" enctype="multipart/form-data">
<div class="inputWidgetContainer">
<div class="inputWidget">
<table>
<tr height="6"></tr>
<tr>
<td class="rightalign">
<input type="radio" id="radio_SampleInput"
name="SampleInput" value="sampleInputRadio" checked="checked"/>
</td>
<td class="leftAlign inputLabel">Sample Input</td>
<td class="rightalign">
<input type="radio" id="radio_abc"
name="SampleInput" value="abcRadio">
</td>
</tr>
</table>
</div>
</div>
<div id="xyz">
<jsp:include page='xyz.jsp' />
</div>
<div id="abc" class="hide">
<jsp:include page='abc.jsp' />
</div>
</form:form>
</div>
P.S. Since I don't know what your original handler do, I just call its after load .jsp requests but maybe it is unnecessary.
I'm using PHP, Smarty , jQuery, Colorbox - a jQuery lightbox plugin, etc. for my website. Now I'm displaying some output in a popup which is generated by using " Colorbox - a jQuery lightbox plugin". Now I want to disable all the text fields present in this popup when the form loads but if I go to the HTML source of page the disabled="disabled" attribute from the <input> tag gets removed and the text boxes are not getting disabled. Can you tell me why this is happening? For your reference I'm putting below the code which will display the data in a Colorbox pop up.
{if $subject_topic_questions}
{foreach from=$subject_topic_questions item=subject_topic_data}
<div class="hidden">
<div id="topics_{$subject_topic_data.subject_id}" class="c-popup">
<h2 class="c-popup-header">Select Topics</h2>
<div class="c-content">
<input type="hidden" name="subject_names[{$subject_topic_data.subject_id}]" id="subject_names" value="{$subject_topic_data.subject_name}">
<h2 class=""> {$subject_topic_data.subject_name}</h2>
<div class="c-tbl-wrap">
<table width="100%" cellspacing="0" cellpadding="0" border="0" class="c-tbl">
<tbody>
<tr>
<td>
<p class="custom-form">
<input class="custom-check" type="checkbox" name="" id="">
<label class="blue">Select All</label>
</p>
</td>
{foreach from=$difficulty_levels item=diff_levels key=dkey}
<input type="hidden" name="diff_levels[{$dkey}]" value="{$diff_levels}">
<td width="22%" align="center"><strong>{$diff_levels}</strong></td>
{/foreach}
</tr>
{foreach from=$subject_topic_data.topics item=topic_diff_level_data}
<input type="hidden" name="subject_{$subject_topic_data.subject_id}_topics[]" value="{$topic_diff_level_data.topic_id}">
<tr>
<td valign="middle">
<p class="custom-form">
<input type="checkbox" class="custom-check" name="{$sheet_type}_topics_{$subject_topic_data.subject_id}[]" id="{$sheet_type}_{$subject_topic_data.subject_id}_{$topic_diff_level_data.topic_id}" value="{$topic_diff_level_data.topic_id}" onChange="enable_topic_ques('{$sheet_type}', '{$subject_topic_data.subject_id}', '{$topic_diff_level_data.topic_id}'); return false;">
<label>{$topic_diff_level_data.topic_name}</label>
<!-- <input type="hidden" name="topic_names[{$topic_diff_level_data.topic_id}]" value="{$topic_diff_level_data.topic_name}"> -->
</p>
</td>
{foreach from=$topic_diff_level_data.difficulty_level item=diff_level key=key_diff_lvl}
<td valign="middle">
{if $site_id=='ENTPRM'}<em>Total {$diff_level.question_count}</em>{/if}
<input type="text" name="{$sheet_type}_{$subject_topic_data.subject_id}_{$topic_diff_level_data.topic_id}_{$key_diff_lvl}" id="{$sheet_type}_{$subject_topic_data.subject_id}_{$topic_diff_level_data.topic_id}_{$key_diff_lvl}" maxlength="3" class="mini" value="{$diff_level.added_no_questions}" disabled="disabled">
<input type="hidden" name="{$sheet_type}_available_questions_{$subject_topic_data.subject_id}_{$topic_diff_level_data.topic_id}_{$key_diff_lvl}" value="{$diff_level.question_count}">
</td>
{/foreach}
</tr>
{/foreach}
</tbody>
</table>
</div>
<p class="center">Done Cancel</p>
</div>
</div>
</div>
{/foreach}
{/if}
The main code you need to consider is as below from the above code:
<input type="text" name="{$sheet_type}_{$subject_topic_data.subject_id}_{$topic_diff_level_data.topic_id}_{$key_diff_lvl}" id="{$sheet_type}_{$subject_topic_data.subject_id}_{$topic_diff_level_data.topic_id}_{$key_diff_lvl}" maxlength="3" class="mini" value="{$diff_level.added_no_questions}" disabled="disabled">
Can you tell me how the disabled="disabled" attribute gets vanishes after page load and if there is any way to apply to it, please tell me. Thanks in advance.
$('.mini').prop("disabled", true);
$('.mini').prop("disabled", false);
try this