I want to grab some elements of a page using jQuery and ajax...no problem. However, the elements do not appear until a user clicks a button in the form, so essentially I cannot pull anything off the page unless that is executed. Anyone know how this can be achieved? I will post samples and what I am trying to accomplish.
I want to pull data from all orders 12 months previous (value=12). This is the form that is given on the page:
<form action="" method="post" name="form2">
<table>
<tbody><tr>
<td align="center"><span><b>Order History</b></span></td>
</tr>
<tr>
<td>
<table>
<tbody><tr>
<td width="235">
<select name="date">
<option selected="" value="1">Orders placed in the past 1 month</option>
<option value="3">Orders placed in the past 3 months</option>
<option value="6">Orders placed in the past 6 months</option>
<option value="12">Orders placed in the past 12 months</option>
<option value="2011"> Orders placed in 2011</option>
<option value="2010"> Orders placed in 2010</option>
<option value="2009"> Orders placed in 2009</option>
</select>
</td>
<td width="43">
<input type="image" border="0" src="v/vspfiles/templates/4/images/Template/btn_go.gif" name="imageField">
</td>
</tr>
</tbody></table>
<br>
</form>
Once the data is displayed, the url does not change so it is still '/orders.asp', but I want to then grab that data using ajax. Is this possible?
Right now one has to go to their My Account page, then they have to click a link which takes them to their Orders page where this form is located. I want to automatically display thier most recent orders on their My Account page.
I'm not clear where you're stuck.
One can wire some JavaScript that will execute when the user selects any of the options (eg.12)
The Javascript can initiate an Ajax call - this retrieves some data
The ajax call hits a service on the server that gathers some data , which should be just data, not HTML
When the Ajax call completes some more javascript can look at the response, and manipulate the DOM in the browser to present the data.
From your question I can't figure out where you need the help.
Related
I need to get a value from the select component of my page and set its value as a parameter in the href.
<td class="body-item mbr-fonts-style display-7"><a th:href="#{/export(exportEntity='Person',semester='javascript:document.getElementById(\'semester\').value')}">Download</a></td>
Semeter variable has the value at my server side:
semester = javascript:document.getElementById('semester').value
and not the dropdown value.
Unfortunately, this code is not picking the value from the select component. Any guess what I have done wrong here.
Thymeleaf runs on the server, while JavaScript runs on the browser. You can't mix it like that.
It's difficult to say what to do, because your question is lacking context, specifically: What is the element with the id semester?
If it's a select element (or another form element), then it would be possible to use neither Thymeleaf nor JavaScript, but a simple form:
<form method="get" action="/export">
<input type="hidden" name="exportEntity" value="Person">
<select name="semester">
<option value="A">Semester A</option>
<option value="B">Semester B</option>
</select>
<input type="submit" value="Download">
</form>
Clicking on the button will have the browser generate an URL such as /export?exportEntity=Person&semester=A and go to it.
here is the xpath I am using
//tr[#id = 'inputSavePaymentAccounts']/descendant::input[#type = 'checkbox' and #name = 'payAck' and #tabindex = '10'
here is how I can get it to check the checkbox
jQuery('.payAck').prop('checked', true)
here is the checking account html that is inside an iframe
<tr id="inputSavePaymentAccounts" class="savePaymentAccounts" style="display: table-row;">
<td class="addCCLabel" style="padding-top: 15px;">Save this Payment Method</td>
<td style="padding-top: 15px;">
<input class="payAck" type="checkbox" onchange="friendlyNameShow()" name="payAck" tabindex="10">
</td>
</tr>
here is the credit card html that is inside the same iframe
<tr id="inputSavePaymentAccounts" class="savePaymentAccounts" style="display: table-row;">
<td class="addCCLabel" style="padding-top: 15px;">Save this Payment Method</td>
<td style="padding-top: 15px;">
<input class="payAck" type="checkbox" onchange="friendlyNameShow()" name="payAck" tabindex="25">
</td>
</tr>
The main issue is that when i use:
jQuery('.payAck').prop('checked', true)
it checkmarks the checkbox however, at the time the checkbox is checked I am suppose to see a text box display, which is not happening with the above jquery. I was hoping the execution of xpath would solve this
see these for a more clearer picture
image of checkbox http://prnt.sc/c12b1p
image of checkbox when it is checked with text box displaying (need this to happen) http://prnt.sc/c12b7q
First of all, I would recommend you remove the inline javascript. Your primary selector in this case is a class and the class is assigned to 2 elements (at least from what I see in your example). When you check the checkbox using jQuery with the class selector, it is going to trigger all the elements that belong to that class and I don't think that is what you intend to do. Also, using click() will work, but that will cause friendlyNameShow() to be called twice and you will need to check the state of the checkbox since you are not explicitly checking/un-checking it. Try using and Id instead.
I am working on a django web app, and successfully implemented the fantastic jQuery datatables to present my data with server-side processing. I don't have access to the original files (this is a project for my workplace, they don't have internet access and I'm home now), but it looks something like this:
template:
<script type="text/javascript">
$(document).ready(function() {
$('#example').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "/user_table/"
} );
} );
</script>
<table id='example'>
<thead>
<th>name</th>
<th>state</th>
<th>email</th>
</thead>
<tbody>
<td colspan="3" class="dataTables_empty">Loading data from server</td>
</tbody>
</table>
server_side:
def main_view(request):
return render_to_response('index.html')
def datatables_view(request):
start = request.GET['iDisplayStart']
length = request.GET['iDisplayLength']
query = myUser.objects.all()
if request.GET.has_key('sSearch'):
# filtering...
query = query[start:start+length]
response = ["aaData": [(q.name, q.state, q.email) for q in query]]
# return serialized data
again, like I mentioned, I'm not having any trouble with this. The integration works fine. Even better than fine, really. I love it.
What I really need though, is little more complex filter than the default one that datatables comes with. There are very specific types of search relevent for my work that will be very useful. So I have a form that appears vertically above the table. Let's say it looks something like this:
<form>
<label for='name'>name:</label>
<input type='text' name='name'></input>
<label for'costumer'>costumer?</label>
<input type='checkbox' name='costumer'></input>
<select multiple="multiple">
<option id='regular'>regular</option>
<option id='new'>new</option>
</select>
<input type='submit' value='filter!'> </input>
</form>
I want that when a user clicks on the submit button it would send the form data and re-initialize the datatable with my costumized filtering. Then I want another button that would refresh and reload the datatable and cancel out any initial data it was sending (as if you refreshed the page, without actually).
I'm not very experienced with javascript, so simple solutions are the best, but any help would be very much appreciated.
I solved it! Finally...
I used the jquery-datatables-column-filter plugin. It's decent and simple to use, and they have an example on their site how to use an external form. It's true that I'm not actually filtering on specific columns, but since I'm using server-side it doesn't really matter.
I am using Spring MVC. I have a view that dynamically populates 2 dropdown lists based on queries called from the controller. I want to dynamically run a query based on the first dropdown selection to change the second dropdown, which means access the controller again (I think). Can I access the controller multiple times from the same view without changing the view? So for example, say starting out the first dropdown was a list of US States and the second started out as a list of all US cities, if I selected NC from the first list I would want to change the second list to include only NC cities.
Here is an example of the first dropdown:
<select name = "states" onChange = "populateCityList(this.options[this.selectedIndex].value)">
<option value ="*">All States</option>
<c:forEach items="${states}" var ="state">
<option value ="${state}">${state}</option>
Pretty straightforward, but I don't really know where to go from there. I have it calling a Javascript function within the current view right now, but I don't know if that is correct or what to even do within that function.
The magic word is AJAX.
Your JavaScript function needs to make an AJAX request to your controller, which should ideally return a JSON data structure containing the values for the second drop down. Your JS function should then have a callback that catches the JSON from your controller and populates the drop down HTML by manipulating the DOM. JQuery is the way to go. There are lots of examples on the web, just search for it.
Hi #user2033734 you can do something like this:
JQuery code
$(document).ready(function() {
$("#id1").change(function () {
position = $(this).attr("name");
val = $(this).val()
if((position == 'id1') && (val == 0)) {
$("#id2").html('<option value="0" selected="selected">Select...</option>')
} else {
$("#id2").html('<option selected="selected" value="0">Loading...</option>')
var id = $("#id1").find(':selected').val()
$("#id2").load('controllerMethod?yourVariable=' + id, function(response, status, xhr) {
if(status == "error") {
alert("No can getting Data. \nPlease, Try to late");
}
})
}
})
})
And JSP within
<table style="width: 100%;">
<tr>
<td width="40%"><form:label path="">Data 1: </form:label></td>
<td width="60%">
<form:select path="" cssClass="" id="id1">
<form:option value="" label="Select..." />
<form:options items="${yourList1FromController}" itemValue="id1" itemLabel="nameLabel1" />
</form:select>
</td>
</tr>
<tr>
<td width="40%"><form:label path="">Data 2: </form:label></td>
<td width="60%">
<form:select path="" cssClass="" id="id2">
<form:option value="" label="Select..." />
<form:options items="${yourList2FromController}" itemValue="id2" itemLabel="nameLabel2" />
</form:select>
</td>
</tr>
</table>
I hope help you :)
One solution would be to move some of the data gathering out into a service, so your main controller could use the service to gather the data before sending to the view.
Although I'm getting correct options for an ajax-generated drop-down (based on the selection of another), I'm not seeing the value post to the PHP script. However, I see all the values from the normal HTML elements (not generated by ajax). What am I missing?
1. HTML produced by my scr_ajax.php script. - OK
$options is produced by the SQL query and the resulting selections are accurate. This is nearly identical to drop_down_1.).
<td>Drop Down 2</td>
<td></td>
<td>
<select name="drop_down_2" id="drop_down_2" value="" style="width:100%">
<option></option>
'.$options.'
</select>
</td>';
2. Where the ajax-generated HTML data goes.. - OK
Properly receives AJAX-generated form element above for the 2nd drop-down.):
...
<tr id="ajaxContent">
</tr>
...
3. Regular 'ol submit button.. - Not OK
drop_down_1 can be captured in $_POST data, but drop_down_2 cannot. I know I'm missing something here..)
<input type="submit" value="Submit Request" />
better start using jquery for everyday tasks.
http://api.jquery.com/jQuery.ajax/
[UPDATE: 11-25-2012]
I'm now able to combine the HTML and AJAX-generated post results by using the jQuery submit listener and populating the hidden field. However, this seems like more of a special technique/workaround as opposed to a more direct approach.
1st, I added the hidden input element:
<input type="hidden" name="drop_down_2" id="drop_down_2" value="" />
2nd, I added the jQuery submit listener:
<script type="text/javascript">
$(document).ready(function(){
$("#form_name").submit(function() {
var field = "drop_down_2";
var param = document.getElementById(field).options[document.getElementById(field).selectedIndex].value;
document.forms[0].elements[field].value = param;
});
});
</script>
[UPDATE: 12-01-2012]
It sounds like the proper solution involves mastery of the serialize function. I will post an update upon verification.