I wanna send values to a Registration form via links. I want it to send different values depending on what link is used to access the page...
For example;
If a link called Add User is clicked I want a value like "User" sent as a parameter
If a link called Add Admin is clicked I want a value like "Admin" sent as a parameter
I also want the Parameter to be not seen on the url....
You can't have a link that includes parameters without the parameters being visible.
If it's just a question of aesthetics, you can always have the link point to the form and then have the form save that value in some sort of internal storage (sessions? a database? a cookie? whatever's appropriate in your situation) and then redirect to a URL that doesn't include the parameter.
Your other option is to use JavaScript and AJAX to have the link submit a form "behind the scenes", and then reload the page yourself using the results of that AJAX request.
Use simple jQuery ajax for pass the values. Add jquery library in header,
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
url : "servletURL",
data : { field1: "admin", field2 : "user"}
type : "POST",
success: function (response) {
//your success code
},
error: function () {
//your error code
}
});
});
</script>
Related
I have a html form that calls a perl script as an action in which I saved data in the DB.
I would like a wait screen to appear while this script is being called. How could I do?
// jQuery
$.ajaxSetup({
beforeSend:function(){
// show image here
$("#busy").show();
},
complete:function(){
// hide image here
$("#busy").hide();
}
});
I have an array of divs which can be selected (change background colour on click to signify that to the user).
I want a way to submit the ids of all of these divs to my app, though can't see a 'nice' way of doing this; at the moment the only thing I can see to do is have a button that onclick triggers a javascript function that gets the id's and sends them back to my server in a POST.
Is there a way of creating a multiple select input on a form which uses divs instead of checkboxes or a multi-select list, or a better way of doing what I'm attempting?
Assuming you add the class selected when a user 'selects' the div:
var data = {};
$(".classOfDivs.selected").each(function(){
data[$(this).prop('id')] = 'true';
}
$.ajax({
url : 'ajaxPage.php',
type : 'POST',
dataType : 'text',
cache: false,
data: data,
success : function(text){alert('Saved: '+text);},
error: function(){alert('Did not reach server');}
});
Use the success function to process the returned text as needed. dataType can be changed to html, JSON, etc. See the .ajax() documentation.
Have a hidden input for each div, all with the same name but with a different id. When a div is clicked update the corresponding hidden input with the id. Then when you submit through a standard form POST all of those values will be available through the name you specified.
Since this is an app, what you could do is store everything in HTML5 localstorage using the JQuery javascript library.
Here's how to do it step by step:
Create a jquery array
on click, get div id and store it in the array with a key/value pair
if clicked again, remove it from the array
have some event listener like a "submit" button to store the value of your array to localstorage
Here is a jsfiddle I had that has exactly what you are talking about: http://jsfiddle.net/CR47/bqfXN/1/
It goes into a little more depth but the jquery should be exactly what you need.
The reason this is better than submitting with POST or using ajax is because since you say this is an app, you will be able to use this method offline, where as post or ajax would require a connection to a server running php.
var skinCare=[]; //the array
$('.skinCare').click(function(){ //onclick
var value = event.target.className.split(" ")[0]; //get classname, you would get id
var index = skinCare.indexOf(value); //gets where the location in
//the array this code is
if($(this).hasClass('selected')){ //when a div is clicked it gets
//$('.skinCare').removeClass('selected'); //the class "selected" and adds
skinCare.splice(index, 1); //to array, then another click
} else if($.inArray(value, skinCare) == -1){ //removes it from array
skinCare.push(value);
}
});
$('.submitbutton').click(function(){
localStorage.setItem('Skin Care', JSON.stringify(skinCare));
});
Using CodeIgniter, I have a set of tabs with titles taken from a table on my DB.
When I click a certain tab, it loads a content which is also
from another table on my DB.
I know the second part will need something like ajax. But I'm really confused on how to do this in an MVC way.
I tried creating a controller which would fetch the title of the tabs from my model, then load a view passing the data fetch from my model as params. Now, I created the tab, but dynamically changing the content when clicked is where I'm stuck.
Anyone can at least tell me the basic idea on how to achieve this?
Thank you so much!
lets look at this example may be it will help you
Tab 1
Tab 2
Tab 3
Tab 4
// where $id is value on which you have to execute query anfdfetech data from DB
// here is JS function with ajax call
<script type="text/javascript">
function fetchdata(id){
$.ajax({
type:"POST", url:"<?php echo base_url()?>controllername/functionname,
data:"&id=" + id,
complete:function (data) {
alert(data.responseText);
//or here what you want to do with ajax response, like put content in any html tag
$('#htmlidoftag').html(data.responseText);//like this
}
});
}
</script>
// here is the php function within controller
function functionname()
{
// First, delete old captchas
$id= $_REQUEST['id']
$response = $this->model->model_function($id);
// in model function run your query to fetch data
echo $response ;
}
So I currently have a table that's generated by ajax and json file.
The table has 3 segments, a name, an ID and the third column is a link for more details of each result.
Example of how my table looks
PATO:0001243 light blue Details
PATO:0001246 light brown Details
PATO:0001247 light cyan Details
the current code I have to generate the table is:
$.each(data.matches, function(i, item){
var this_row_id = 'result_row_' + next_row_num++;
$('<tr/>', {"id":this_row_id}).appendTo('tbody');
$('<td/>', {"text":item.label}).appendTo('#'+this_row_id);
$('<td/>', {"text":item.value}).appendTo('#'+this_row_id);
$(''+ 'Details' +'').appendTo('#'+this_row_id);
});
Ideally, I would like to be able to click on the "Details" and it would pass the ID value to another ajax call and then create a dialog/modal to display the results of that ajax call.
EXAMPLE
From the list above, clicking on "Details" from the first entry will pass the values "PATO:0001234" to my "test.cgi" script which will use that value to process and spit back out a JSON for me to display in a dialog.
I'm not asking for someone to write my code for me, just some direction about how to approach this.
I think I'm probably wrong to link directly to my cgi script from the <a href>. But I don't know how to link that to an ajax call from a text link.
Update
Left the page loaded too long; #floatless has posted a cleaner approach with chaining, didn't think of that.
You could change the last few lines to something like what's below. The idea is to attach a handler to each link when it's created which will call the loadDetail function with the appropriate item label. In loadDetail, it's then a simple matter of making an ajax request with the label as the parameter.
Note that you don't need to use ./test.cgi - test.cgi will suffice.
...
$(''+ 'Details' +'').appendTo('#'+this_row_id);
$('#detail_' + this_row_id).click(loadDetail(item.label));
}
function loadDetail(label){
$.get('test.cgi', {label: label}, function(data){
//create your dialog to display the response data
});
}
You could append click event handler while generating table:
$(''+ 'Details' +'').appendTo('#'+this_row_id).click(function()
{
$.getJSON("./test.cgi", {label: item.label}, function(data)
{
//Do something with received data
});
return false;
});
I am trying to change the table data in JSP on change of ListBox.
When user select Organisation Name then, the table will be only display list of users belonged to that organisation.
I feel like the action class isn't being called from javascripts.
<script type="text/javascript">
function getOrganisationUsersList(value){
var submitUrl = "listUserByOrganisation.action?organisationId="+value;
$.ajax({
url:submiturl,
type: 'get',
beforeSend: function(){
$("#loading").show();
alert("parsed");
},
success: function(result){
if(result!=''){
$('.myTableWrapper').html(result);
} else {
alert(result);
}
}
});
}
</script>
Below is select tag which calls the javascript.
<s:select listKey="%{organisationId}" list="organisationList" listValue="%{organisationName}"onchange="getOrganisationUsersList(this.value)"/>
I populate all users at the start of the page.
so, to only display selected user for particular organisation, do I need to create another action class? I am now trying to use the same action. Help needed !!!
Thanks.