I have tried different combinations of input type but how am I able to input a message without messing up the image? The purpose was to update the table without refreshing the page. To be more specific, when I clicked the image it should update the table on the side of the page. For many of the tutorial out there I saw people only use for onclick to call the ajax functions. Is there a good example for what I can do for the image button instead of the plain button?
For example:
<form name="bakery" action="TestMartController" method="post" >
<input type="hidden" name="action" value="dairy">
<input type="image" src="<%=request.getContextPath()%>/css/categories/dairy.jpg" onclick="loadXMLDoc">
The table I want to update is
<div id="refresh">
<table class="rightTable" border="1" width="70%">
<tr>
<th>Photo</th>
<th>Product and Description</th>
<th>Price</th>
<th>Orders</th>
<th>Quantity</th>
<th>Edit Quantity</th>
<th>Add Item </th>
</tr>
<c:forEach var="b" items="${bakery}">
...
</c:forEach>
</table>
</div>
Javascript file
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 ) {
if(xmlhttp.status == 200){
document.getElementById("refresh").innerHTML = xmlhttp.responseText;
}
else if(xmlhttp.status == 400) {
alert('There was an error 400');
}
else {
alert('something else other than 200 was returned');
}
}
};
xmlhttp.open("POST", "bakery.jsp", true);
xmlhttp.send();
}
First of all you want a ajax call which makes post to a service and get datas and update your table.
I suggest to you learn how to use jquery and ajax call.
1- In your html define call method. Don't use form!
<img src="yourImage.jpg" onclick="getSomeData()">
2- Make post or get call to your service with jquery. And get Data.
function getSomeData(){
var url = "http://url";
$.post(url,{data:data})
.done(function(data){
//this data is your call result.
//do something
updateTable(data);
})
.fail(function(){
console.log('fail');
});
}
3- Create your gui function to change table.
function updateTable(){
//update your htmls
}
Related
I have a script thats using papa parse to check for an entry in a CSV file, then redirecting based on if its there or not. It works perfectly fine in chrome on my desktop, has a few issues on firefox on my desktop, and completly doesnt work on my chrome browser on my android.
<body>
<form id="usrform">
<td><label>Unique ID</label></td>
<tr>
<td colspan="2"><input class="textBox" id="uniqueID" type="text" maxlength="30" required/></td>
</tr>
</form>
<button onclick="processClick()">Proceed</button>
</body>
<!-- Jquery import -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<!-- Papa Parse CSV -->
<script src="http://localhost/client/js/papaparse.min.js"></script>
<div id="loading" style="background:url(/images/loading.gif) no-repeat center center;width:20px;height:20px; visibility:hidden">
<img src="/images/loading.gif">
</div>
<script>
// hide loading icon
document.getElementById("loading").style.visibility = "hidden";
function processClick()
{
document.getElementById("loading").style.visibility = "visible";
if (document.getElementById("uniqueID").value == '' )
{
alert("Please fill in the uniqueID field");
document.getElementById("loading").style.visibility = "hidden";
}
else
{
parseData(**client site**/csv/csv.csv", searchArray);
}
}
function parseData(url, callBack) {
Papa.parse(url, {
download: true,
dynamicTyping: true,
complete: function(results) {
alert("parsed ready to callback");
//callBack(results.data);
}
});
}
function searchArray(data) {
//Data is usable here
console.log(" searching array");
for (a = 0; a < data.length; a++)
{
if (data[a][1] == document.getElementById('uniqueID').value)
{
// redirect
var target = "**clientsite**" + document.getElementById('uniqueID').value + ".html";
window.location.assign(target);
break;
}
else
{
console.log(" redirecting on fail");
// redirect to failure page
}
}
}
</script>
I used alerts to see where it stopped working on mobile, and it appears that the function parseData(url, callBack) { is not returning a value(whether its processing or not i cannot tell).
This works perfectly on chrome/desktop, which is the confusing part!
I imagine im missing something stupid here.
There was my error i didnt catch when uploading from testing on my local server. It was working as it could see my localhost file, but it wouldnt for anyone else!
I have this practice project that I am working on, but I cant get my UI Boostratp modal working. Using example from the site https://github.com/angular-ui/bootstrap/tree/master/src/modal I have been trying to implement this feature but without success.
I believe that this is because of that I do not have the knowledge to integrate demo code to my MVC style project (I have separate app.js, controller, and service files), and this one file example is rather confusing to me.
My folder/file structure:
Now, I have tried various things, including making a separate controller, and separate view for modal content (that's why I have bookDetailes.html and bookDetailesConreoller.js files but they are currently out of order - not connected in app.js's stat provider and their code is under comment). This is where I am:
A have a list of basic book details retrieved from data base and printed out in book.html view via data-ng-repeat. In every repeat I have an Action button that is supposed to open modal for editing or deleting that entry.
Here is my book.html file where I have nested the demo markup code from UI Bootsratp site:
<h4 class="text-center"><strong>Book Collection</strong></h4>
<br>
<table class="table table-hover">
<thead>
<tr>
<th>ID</th>
<th>Image</th>
<th>Title</th>
<th>Author</th>
<th>Year</th>
<th>Publisher</th>
<th>City of Publishing</th>
<th>Genre</th>
<th>Action
<th>
</tr>
</thead>
<tbody data-ng-init="init()">
<tr data-ng-repeat="book in books">
<td>{{book.id}}</td>
<td>{{book.image}}</td>
<td>{{book.title}}</td>
<td>{{book.author}}</td>
<td>{{book.yearOfPublishing}}</td>
<td>{{book.publisher}}</td>
<td>{{book.cityOfPublishing}}</td>
<td>{{book.genre}}</td>
<td><a class="btn btn-default" data-toggle="modal" data-ng-click="open()">Action</a></td>
</tr>
</tbody>
</table>
<div>
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
<ul>
<li ng-repeat="item in items">
<a ng-click="selected.item = item">{{ item }}</a>
</li>
</ul>
Selected: <b>{{ selected.item }}</b>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</script>
</div>
As you can see, this last part after table tag is supposed to be modal markup taht is called when Action button is pressed and command "open()" i passed to bookController.js via data-ng-click.
My bookControler.js:
collectionsApp.controller('bookController', function($scope, bookService,
$state) {
var books = [];
$scope.save = function() {
bookService.save($scope.book, onSaveDelete);
}
$scope._delete = function(id) {
for (book in books) {
if (book.id === id) {
bookService._delete(book, onSaveDelete);
}
}
}
$scope.edit = function(id) {
for (book in books) {
if (book.id === id) {
$scope.book;
}
}
}
$scope.init = function() {
bookService.list(onInit);
}
// <-- Beginning of the modal controller code I inserted (and adopted) from the example:
$scope.items = [ 'item1', 'item2', 'item3' ];
$scope.open = function(size) {
modalInstance = $modal.open({
templateUrl : 'myModalContent.html',
controller : ModalInstanceCtrl,
size : size,
resolve : {
items : function() {
return $scope.items;
}
}
});
modalInstance.result.then(function(selectedItem) {
$scope.selected = selectedItem;
}, function() {
$log.info('Modal dismissed at: ' + new Date());
});
};
var ModalInstanceCtrl = function($scope, $modalInstance, items) {
$scope.items = items;
$scope.selected = {
item : $scope.items[0]
};
$scope.ok = function() {
$modalInstance.close($scope.selected.item);
};
$scope.cancel = function() {
$modalInstance.dismiss('cancel');
};
};
// <-- Ending of the modal code I have inserted from the example.
onSaveDelete = function(response) {
if (response.data.status === 'success') {
$scope.init();
} else {
alert("DEBUG ALERT: SAVE/DELETE FAIL");
}
};
onInit = function(response) {
$scope.books = response.data;
books = response.data;
};
});
Now, like this, code is working in the seance that data-ng-repeat is working and I get list of database entries on page load. But when I click on the Action button i get this error message in the console:
But when I add $modal to may code like this:
collectionsApp.controller('bookController', function($scope, bookService,
$state, $modal) {
var books = [];
...
I get this error on page load:
Can someone help me understand and implement modals to my project? Thanks in advance... ;)
Add this,
angular.module('Urapp', ['ui.bootstrap']);
I have a link that user can click on that to see a searchBox in a lightbox. Once click on the link a lightbox will be shown that includes a search box. User need to enter the search query and clicked on search button to see the search results in the same lightbox.
The problem is that, when the request is sent and response is received the value sent by JavaScript will be replaced by the parameters of the url address.
address is : www.example.com/search?id=12
Once the server sends the response the address will be changed to the following
new address is : www.example.com/search?query=Alex
Notice in the new address id=12 is gone, it cause a java.lang.NullPointerException as server requires id parameter to load the page.
Form
Search
<form action="" onsubmit="return search(this.query.value)">
<input name="query" id="query"/>
<input type="submit" value="Search"/>
</form>
<div id="results">
</div>
JavaScript
function search(request){
if(window.XMLHttpRequest)
{
xmlhttp = new XMLHttpRequest();
}
else
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
document.getElementById("results").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("get","/search?value="+request,false);
xmlhttp.send();
return false;
}
I have a form which has 2 buttons: 'Submit' and 'Save'. Upon the submission of the form two kind of separate function run, depending on the button pressed. What I want to do is to call a function to check for empty fields when submit button is pressed.
Part of my code:
function valuecheck(){
var msg="";
if($F('entrepreneur_name')==""){
msg+="You need to fill the product name field!\n";
document.getElementById("entrepreneur_name").focus();
}
if($F('address')==""){
msg+="You need to fill in address!\n";
}
if (msg)
{alert(msg);
return false;
}
}
<?php
$chkbutton=$_POST['submit'];
switch ($chkbutton)
{
case "Submit":
// how to call the JavaScript function here..
...//rest of the code
?>
the form:
<input type="submit" style="width:10%" name="submit" value="Save" >
<input type="submit" style="width:10%" name="submit" value="Submit" >
how to call the javascript function inside the case "Submit":
Thanks in advance.
<input type="submit" style="width:10%" name="submit" value="Submit" onclick="Validate()" >
and
<script>
function Validate()
{
// your validation
}
</script>
You can do this on the form level prior submission:
<form name='myform' method='post' onSubmit="myFunction()">
And in your js function:
function myFunction()
{
if( !...)
return false; //don't submit the form
}
There are many ways to call JavaScript function from php function..
echo '<script type="text/javascript">'
, 'yourJSFunction();'
, '</script>';
Or you can do this way...
<?php
// some php stuff
?>
<script type="text/javascript">
yourJSFunction();
</script>
Hope it helps...
An alternative to sskoko's answer:
var submitButton = document.getElementById('submit-button');
submitButton.addEventListener('click', function(event) {
valuecheck();
}, false);
Though I have a sneaking suspicion that you will need to use event.preventDefault() to keep the form from submitting, when your values are invalid.
The method may have to be called either in the anonymous function passed to addEventListener(), or event may need to be passed into valuecheck() and then preventDefault() could be called down there. Play around with it and see.
Can anyone guide me how can i call a jsp/html page using ajax in play framework?
I want to open a lightbox on click of a button and want to load that with a page containing data from database.
Currently i have just displayed the message using ajax. Below is the method inApplication.java
public static Result index()
{
return ok(index.render("Your new application is ready."));
}
My index.scala.html is:
#(products: List[Products])
#import helper._
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<h1>#products.size() product(s)</h1>
<table border=1>
<tr>
<td>Product Name</td>
<td>Quantity</td>
<td>Price</td>
</tr>
#for(product <- products) {
<tr>
<td>
#product.productname
</td>
<td>
#product.quantity
</td>
<td>
#product.price
</td>
<td id="items">
<input type="button" value="Add Product" name="#routes.Application.user(product.product_id)" id="but"/>
</td>
</tr>
}
</table>
<div class="result1" style="border: 1px solid black; padding: 5px;">not sent yet...</div>
<script type="text/javascript">
jQuery("#items a").click(
function () {
$.get(jQuery(this).attr("href"), function (data) {
$('.result').html(data);
});
return false;
}
)
</script>
You are on the good way.
Create a new action which will return only the html you need in your div (and not the complete html page).
public static Result detail(Integer productId)
{
Product product = .... (productId);
return ok(productDetail.render(product));
}
// with the route of course
productDetail.scala.html
#(product: Product)
My product #product.product_id is beautiful !
....
You must also add a jquery plugin to display your lightbox (there are a thousand...)
Your JsCode will be something like that:
$("#items a").click(function () {
$("#result").load($(this).attr("href"), function() {
displayPopup(); // code this
});
});
(Or maybe a totally different code if the plugin natively handle ajax...)
In resume, there is a lot of work to do, and many ways to do it.
Just try !