Hello every one I am working in laravel but today I am stuck
please some one help me , iwant to get response from ajax inside select>option in html.
my modal is working perfectly. and other data like input fields text, date, file are perfectly shows but in select>option there is an error!
<script>
function editJobs(id){
$.get('/jobsEditRoute/'+id, function(response){
$("#id").val(response.id);
$("#job_titleE").val(response.job_title);
$("#apply_start_dateE").val(response.apply_start_date);
$("#last_dateE").val(response.last_date);
$("#a").attr("src","images/"+response.job_adv_image);
$("#job_descriptionE").val(response.job_description);
**$("#job_for_districtE").val(response.job_for_district);**
document.getElementById("job_for_districtE").innerHTML = "response.job_for_district";
$("#editing_product").modal('toggle');
// alert(response.job_descriptionE);
});
}
</script>
Current District
<option value="hlelo" **id="job_for_districtE"**></option>
</select>
</div>
</div>
Related
On click I'm sending the id as data and then using query showing the name of user from WordPress database. I'm getting the response back from server but It is not adding when try to use .html(response).May be this is something to do with permission ?Like only admin can use the response?
If that's the case what I can do.
This is the ajax function:
function get_user_id() {
let get_current_user_id =jQuery(this).attr('id');
cur_user = '<?php echo get_current_user_id() ;?>';
var postdata_name = {action: "incoming_user_name_ajax_call",
param_user_to_chat: get_current_user_id,};
jQuery.post(ajaxurl, postdata_name, function (response) {
jQuery("#name-incoming-user").html(response);});
}
This is the function in functions.php
add_action("wp_ajax_incoming_user_name_ajax_call", "incoming_user_name_ajax_call_fn");
add_action("wp_ajax_nopriv_incoming_user_name_ajax_call", "incoming_user_name_ajax_call_fn");
function incoming_user_name_ajax_call_fn() {
global $wpdb;
$param_user_to_chat=isset($_REQUEST['param_user_to_chat'])?trim($_REQUEST['param_user_to_chat']):"";
if (!empty($param_user_to_chat)) {
$posts = $wpdb->get_results("SELECT distinct(display_name) FROM wp_users where
ID=$param_user_to_chat");
echo $posts[0]->display_name;
}
wp_die();}
Posting the HTML as well for everyone who want to know what jQuery(this).attr('id'); is doing. It is getting id "4" or "2" depending on click.
<div id="target">
<div class="user-list-hide" id="user-hide" style="display: block;">
<div id="4"><span>Jason Bradley</span>/div>
<div id="2"><span>John Saddington</span></div>
</div>
</div>
There was issue in your jquery code i.e : the way you were calling your get_user_id() function here you have use wrong selector to get your inner divs . So, to make it work change :
jQuery("#target").on("click", "div", get_user_id);
to
jQuery("#user-hide").on("click", "div", get_user_id);
I have a form containing two submit buttons, i want it to update the current page as soon as i submit the form without refreshing the whole page, but the code keeps reloading the page and the page is not even updated.
HTML form
<form id="paymentForm" style="margin-left: 15%;margin-bottom: 15px;margin-top:15px;font-size: 18px;" action="#">
<input class="paymentButton" type="submit" name="COD" value="Cash on Delivery(COD)" style="background-color:#F80;color:white;height: 60px;border-radius: 5px ">
<input class="paymentButton" type="submit" name="POD" value="Paytm on Delivery(POD)" style="margin-left: 25px;background-color: #F80;color:white;height: 60px;border-radius: 5px">
Jquery and AJAX code
$(document).ready(function(){
$("#paymentForm").submit(function(e){
e.preventDefault();
var buttonpressed;
var paymentValue;
$("#paymentbutton").click(function() {
paymentValue = $(this).attr('value') ;
});
$.ajax({
url:"payment.php",
type:'POST',
data:"{
buttonValue:paymentValue;
}",
success:function(data){
getElementById('panel13').innerHTML=data;
}
});
return false;
});
});
PHP script payment.php where data is being sent
<?php
$paymentMode=""
if(isset($_POST["buttonValue"]==POD))
$paymentMode="Paytm On Delivery";
else
$paymentMode="Cash on Delivery";
echo "Your Order is placed succesfully with payment mode as" .$paymentMode;
?>
You have an syntax error in php code
$paymentMode="";
Youre mising semicolon... Next time, each time you send an ajax request. Turn on chrome dev tool -> network -> XHR to see what really haapen with your request. If request has failse. Click on request(i have red color) to see. back end error.. Hope this helpfull...
You are using getElementById, use document.getElementById instead. Hope it helps.
Hi I am printing the ajax html response to div element and giving radio input option to select the file. after selecting the specific file the another div should show the message. but the ajax html response is not working
Jquery script:
$(document).ready(function()
{
$('#upload').ajaxForm({
beforeSubmit: function() {
$('#Analysis').show();
$('#Content_column').hide();
$('#file_list').show();
$('#trait').show();
$('#trait').html('Submitting...');
},
success: function(data) {
var $out = $('#file_list');
$out.html('       File list:');
$out.append('<div id="list">');
$('#list').html(data);
$out.append('</div>');
}
});
});
The output of this script is
<ul class="php-file-tree"><li class="pft-directory">Genotypic<ul><input id="Penotypic" type="radio" name="uploads/Genotypic/" value="uploads/Genotypic/jquery.txt" />jquery.txt<br><input id="Penotypic" type="radio" name="uploads/Genotypic/" value="uploads/Genotypic/marker.csv" />marker.csv<br></ul></li><li class="pft-directory">Other</li><li class="pft-directory">Penotypic<ul><input id="Penotypic" type="radio" name="uploads/Penotypic/" value="uploads/Penotypic/namPheno.csv" />namPheno.csv<br><input id="Penotypic" type="radio" name="uploads/Penotypic/" value="uploads/Penotypic/perl.pl" />perl.pl<br></ul></li></ul>
Jquery script:
$('#Penotypic').click(function() {
var $out1 = $('#trait');
$('#trait').show();
$out1.append('Submitted...');
});
this is not showing anything in the div trait. may be the html response is loading as a tesxt so the #Penotypic is not recognised. please help me to fix this.
Thanku
You have many inputs of id="Penotypic". Make every id unique or use classes as function trigger.
I wouldn't use "/" in the name attribute. See: http://www.w3.org/TR/html401/types.html#type-name
Then try if your ajax script does work. If it doesn't work, try if it works from static page (don't use your first jQuery script, but it's output as a static form). You probably need to bind your event trigger. Use jQuery's on().
Please help me out here.
I have a file index.php, relevant portion (Jquery is loaded earlier):
<div id="test"></div>
<script type="text/javascript">
$('#test').load("table.php");
</script>
And a file table.php. If no variables are given, an unfiltered table is shown. When table.php loads, it also loads a select field, like:
<select name="testfield" id="testfield" onchange="javascript:setactionfilter();">
<option value="1">Test</option>
<option value="2">Test2</option>
</select>
After that, a script to reload table.php in that testdiv with filtered results:
<script type="text/javascript">
function setactionfilter(){
$('#test').load("table.php?action=".document.getElementById('testfield').selectedvalue);
}
</script>
The problem is that my browser tells me that the getElementById is null, in other words, it can't find my select field in the page.
Any idea what I am doing wrong?
Change the . to +
Concatenation is done with + in javascript e.g string3 = string1 + " " + string2
$('#test').load("table.php?action="+document.getElementById('testfield').value);
The .load function is asynchronous, so performing operations that requires the data immediately will fail. Instead, use the callback functionality of the load function:
$('#test').load('table.php', function() {
// Do your stuff here!
});
Putting your code in the callback function ensures that table.php is loaded and ready when the code is run.
MVC/Razor/Javascript newbie question:
I have a MVC3/Razor form where the use can select a single product from a drop down list.
<div class="editor-label">
Product
</div>
<div class="editor-field">
#Html.DropDownList("ProductID", (IEnumerable<SelectListItem>)ViewBag.Products, "--Select One--")
#Html.ValidationMessageFor(model => model.ProductID)
</div>
What I then want is to display the price of the selected product on a label just below the drop down list (model property name is Amount).
This should be pretty easy, but I am pretty new at Razor, and know almost nothing about Javascript, so I would appreciate any verbose explanations of how do do it, and how it all hangs together.
Add a div/span under the Dropdown .
#Html.DropDownList("ProductID", (IEnumerable<SelectListItem>)ViewBag.Products, "--Select One--")
<div id="itemPrice"></div>
and in your Script, make an ajax call to one of your controller action where you return the price.
$(function(){
$("#ProductId").change(function(){
var val=$(this).val();
$("#itemPrice").load("#Url.Action("GetPrice","Product")", { itemId : val });
});
});
and have a controller action like this in your Product controller
public string GetPrice(int itemId)
{
decimal itemPrice=0.0M;
//using the Id, get the price of the product from your data layer and set that to itemPrice variable.
return itemPrice.ToString();
}
That is it ! Make sure you have jQuery loaded in your page and this will work fine.
EDIT : Include this line in your page to load jQuery library ( If it is not already loaded),
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
The Amount isn't available to your view when the user selects a product (remember the page is rendered on the server, but actually executes on the client; your model isn't available in the page on the client-side). So you would either have to render in a JavaScript array that contains a lookup of the amount based on the product which gets passed down to the client (so it's available via client-side JavaScript), or you would have to make a callback to the server to retrieve this information.
I would use jQuery to do this.
Here's a simple example of what the jQuery/Javascript code might look like if you used an array.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
// This code can easily be built up server side as a string, then
// embedded here using #Html.Raw(Model.NameOfPropertyWithString)
var list = new Array();
list[0] = "";
list[1] = "$1.00";
list[2] = "$1.25";
$("#ProductID").change(displayAmount).keypress(displayAmount);
function displayAmount() {
var amount = list[($(this).prop('selectedIndex'))];
$("#amount").html(amount);
}
});
</script>
<select id="ProductID" name="ProductID">
<option value="" selected>-- Select --</option>
<option value="1">First</option>
<option value="2">Second</option>
</select>
<div id="amount"></div>
You'll want to spend some time looking at the docs for jQuery. You'll end up using it quite a bit. The code basically "selects" the dropdown and attaches handlers to the change and keypress events. When they fire, it calls the displayAmount function. displayAmount() retrieves the selected index, then grabs the value out of the list. Finally it sets the HTML to the amount retrieved.
Instead of the local array, you could call your controller. You would create an action (method) on your controller that returned the value as a JsonResult. You would do a callback using jquery.ajax(). Do some searching here and the jQuery site, I'm sure you'll find a ton of examples on how to do this.