Select Image and pass data to database - javascript

I am working on a mobile app and I have a scenario where the user upon selecting an image (For example: the mode of payment- credit card will have an image, money will have an image) thorough on-click function the color of the image should change and the data should be retrieved from database.
I am able to fix the on-click color change option but unable to access data from database. Please help me with this.
This is the code below:
<div class="container">
<table style="width:60%;text-align:center; ">
<thead>
<tr>
<td colspan="4" style="border-right:1px solid;">Mode of transport:(click to select)
</td>
<td colspan="2" >Mode of payment:(click to select)
</td>
</tr>
<thead>
<tr>
<td><img id="p2" src="./images/car_blue 120.png" style="width:60px;height:60px;" onclick="" />
</td>
<td>
<img id="p2" src="./images/Bus_blue 120.png" style="width:60px;height:60px; " onclick="" />
</td>
<td>
<img id="p2" src="./images/plane_blue 120.png" style="width:60px;height:60px; " onclick="" />
</td>
<td>
<img id="p2" src="./images/cash_blue 120.png" style="width:60px;height:60px; padding:5px;" onclick="" />
</td>
<td>
<img id="p2" src="./images/credit_card_blue 120.png" style="width:60px;height:60px; padding:5px;" onclick="" />
</td>
</tr>
</table>
</div>

Here You are talking about 2 different activity, It is not imp. that you are using Image/Button/or anything else. It only act as trigger to access database . It perform Some action after on click Event. " In your scenario action is "Retrieving Data"
If you provide clear info about Database type you are using , then it is easier to explain soln.

Your are in client side and you have to communicate with the server to access the data you need. if you want to communicate with remote server you will have to call web services in your app using javascript.
You have to invoke a function with onclick event which performs required action,for this you can use Ajax. Refer the discussion
connecting to an external databse with phonegap-android app
Use AJAX to populate Cordova database

Related

how to force the user to write correctly in HTML input

I have this HTML code in my JSP
<table>
<tr>
<td width="50%" > type your article :
</td>
<td width="50%">
<input type="text" name="article" size="50"/>
</td>
</tr>
</table>
I have in MYSQL database a table 'article' in which i have a column 'designation' , I want to propose a choice of 'designation' to the user according to what is being written.
note: i can not use a dropdownlist because i have more than 1000 designations
Thanks in Advance.
I think you can solve the problem using JQuery Lookup.

Autosearch http forms

I'm building a robot using an AI platform to help people access government information (in the public domain). Is there a way of populating a html form of an external website using the information the user has provided and submitting and retrieving the information using javascript.
E.g. say the search form is on https://www.governmentportal.com/court-location , take the user's information obtained previously, autofilling the form, using a program to press search and returning the results? An example of such a form is:
<table width="100%" cellpadding="0" cellspacing="0">
<tbody><tr>
<td class="FormLabel">Rental postcode</td>
<td align="left">
<input name="txtPostCode" type="text" maxlength="8" id="txtPostCode"class="txt">
</td>
</tr>
<tr>
<td class="FormLabel">Tenant's Surname</td>
<td align="left">
<input name="txtSurname" type="text" maxlength="50" id="txtSurname" class="txt">
</td>
</tr>
<tr>
<td class="FormLabel">Month Deposit Paid</td>
<td align="left">
<select name="ddlDepositDateMonth" id="ddlDepositDateMonth" class="ddl"> <option value="mm">mm</option>
</select><select name="ddlDepositDateYear" id="ddlDepositDateYear" class="ddl">
<option value="yyyy">yyyy</option>
</select>
</td>
</tr>
<tr>
<td></td>
<td align="left">
<a id="lnkSearch" class="SearchButton" href="javascript:__doPostBack('lnkSearch','')">Search ></a>
</td>
</tr>
</tbody></table>
Thank you.
It depends what goal you have and what possibilities those pages give you.
If those websites offer an API, you can easily use jQuery.ajax or axios for data fetching, passing the user input on.
If they don't offer an API you could send POST requests with curl (I think PHP supports that out of the box?) or if those sites need Javascript support you can use something like PhantomJS.
What you can't do is to kind of automatically fill out forms in front of the users eye. This needs to happen on the server side (unless we are not talking about viewing your page in a browser).

How to parse HTTP GET method object in JS

I have variable "parse" in which is saved GET like this:
<div class="List_modal" data-target-input-id="Product" data-target-input-hidden="Product_Hidden">
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Code</th>
<th>Base</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a title="Wsome talking " href="#" class="List_Item">
123.123.123.123
<input type="hidden" class="Code" value="123.123.123.123" />
<input type="hidden" class="Base" value="I NEED THIS TEXT" />
</a>
</td>
<td>
<a title="ere random text too" href="#" class="List_Item">
randomtextrandomtext
<input type="hidden" class="Code" value="123.123.123.123" />
<input type="hidden" class="Base" value="I NEEED THIS TEXT" />
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
What i need is to get only string from input class "Base" and "Code". I tried RegEx but i am not JS developer and i cant make Functions and using jQuery becasue this script is used in Data Integration Framework. Have any idea how to get this to values? And it should be universal because every time i scrap some site i have different values i code and base class.
What you need to do is web scraping, it's a whole art form in itself. There are commercial places like scraperwiki who will do it for you, or look at https://en.wikipedia.org/wiki/Web_scraping
As you have the html in a file (presumably) you don't have to use javascript, you can use a toolset that you are more familiar with

Jsp : Checkbox and Hyperlink dependency

I am using JSP and Struts2.
If the user selects the checkbox without clicking on hyperlink, user should get the error msg above the checkbox line.
I think on click of hyperlink I should call one function which sets the global var to true. onclick of checkbox, I should call a function which checks the var val and if this is false error should display.
In case of checkbox uncheck error should not be visible.
Its like a terms and we want that user should click on hyperlink to see terms.
<tr>
<td colspan="2" style="padding-left: 3%;">
<s:text name="Text1" />
<s:text name="Text2" />
<s:text name="Text3" />
</td>
</tr>
<tr>
<td colspan="2" style="padding-left: 3%;"><s:checkbox name="isT" id="isT" label="isT" value="%{isT}" tabindex="12" /> <s:text name="isTer" />
</td>
</tr>
Why dont you enable checkbox on click of hyperlink. Till that time disabled the checkbox.

jQuery load() replacing whole page instead of loading content into div

I am trying to load in thumbnail of an inputted webpage when the user clicks a button. The thumbnail is generated properly on the page by itself, but when I attempt to load it into the div element, it replaces the whole page. Currently, this is just a proof of concept. I will switch to user inputted url if I can get this working.
Here is my click event code:
$('#check_url').click(function() {
$('#thumb_loader').load('load_thumb.html');
});
thumb_loader is just a div. I have also tried it like this:
$('#check_url').click(function() {
$('#thumb_loader').html($('<div>').load('load_thumb.html'));
});
Here is load_thumb.html:
<div>
<script type="text/javascript">
wsr_snapshot('http://google.com', 'xxxxxxxxxxxxxx', 'Small');
</script>
</div>
wsr_snashot is WebSnapr. The image is generated on their server and appears where this code is.
First off, can I even load javascript like this? I have used load to drop in content that contains javascript before, so I doubt that is the case.
Anyone see any problems here?
EDIT:
Here is the table where the div I wish to load into is and the button that the user would click to trigger the AJAX.
<table>
<tr>
<td colspan="2">
<div id="thumb_loader"></div>
</td>
</tr>
<tr>
<td>
<label>Link Title:</label>
</td>
<td>
<label>Link Description:</label>
</td>
</tr>
<tr>
<td>
<input type="text" name="link_title" />
</td>
<td rowspan="3">
<textarea name="link_description"></textarea>
</td>
</tr>
<tr>
<td>
<label>Link URL:</label>
</td>
<td>
</td>
</tr>
<tr>
<td>
<input type="text" name="link_url" />
</td>
<td>
</td>
</tr>
<tr>
<td>
<input id="check_url" type="button" value="Check URL" />
</td>
<td align="right">
<input type="button" value="Cancel" /><input disabled="disabled" type="submit" value="Add Link" />
</td>
</tr>
</table>
I don't see anything else that could be relevant in the code. Hope this is enough.
Put JS code out of load_thumb file and keep in a new js file like image.js and use $.getScript to dynamically add it in your principal page:
$.getScript('path/image.js', function(){
// file loaded
});
You should put above code in your main file where you want to run your thumb image.
More:
http://api.jquery.com/jQuery.getScript/
jQuery#load(): When calling .load() using a URL without a suffixed selector expression, the content is passed to .html() prior to scripts being removed. This executes the script blocks before they are discarded. If .load() is called with a selector expression appended to the URL, however, the scripts are stripped out prior to the DOM being updated, and thus are not executed.
if wsr_snapshot('http://google.com', 'xxxxxxxxxxxxxx', 'Small'); contains any document.write calls, you're entire document is overwritten. Make sure you know what that function does.
Update:
according to the question's comments, this really is the issue. You need to figure out how wsr_snapshot() can be used in an asynchronous fashion. What API is that from anyways?

Categories