jquery javascript problem - javascript

Could you please take a look and tell why this isnt working i cant figure it out. the problem is with
$("#item_name").val(item_name);
$("#amount").val(course_price);
This should be adding info to 2 hidden inputs (
<input type="hidden" name="item_name" id="item_name"value="">
<input type="hidden" name="amount" id="amount" value="">
)
but they are coming up as blank
also the value from course_name.php?courseID=1 is Course Name,500
Full Javascript
<script>
$(document).ready(function() {
url = "date_range.php?courseID="+$('#course_name').val();
$("#dates").load(url)
url = "course_name.php?courseID="+$('#course_name').val();
var course_details;
$.get(url, function(data){
course_details= data;
});
split_course_details = course_details.split(',');
course_name=split_course_details[0];
course_price=split_course_details[1];
course_date=$("#date_range").val();
item_name=course_name+' - '+course_date;
$("#item_name").val(item_name);
$("#amount").val(course_price);
});
$('#course_name').change(function() {
url = "date_range.php?courseID="+$('#course_name').val();
$("#dates").load(url)
url = "course_name.php?courseID="+$('#course_name').val();
var course_details;
$.get(url, function(data){
course_details= data;
});
split_course_details = course_details.split(',');
course_name=split_course_details[0];
course_price=split_course_details[1];
course_date=$("#date_range").val();
item_name=course_name+' - '+course_date;
$("#item_name").val(item_name);
$("#amount").val(course_price);
});
</script>

Place your calculation inside the callback function of $.get(), like this:-
$(document).ready(function() {
url = "date_range.php?courseID=" + $('#course_name').val();
$("#dates").load(url)
url = "course_name.php?courseID=" + $('#course_name').val();
var course_details;
$.get(url, function(data) {
course_details = data;
split_course_details = course_details.split(',');
course_name = split_course_details[0];
course_price = split_course_details[1];
course_date = $("#date_range").val();
item_name = course_name + ' - ' + course_date;
$("#item_name").val(item_name);
$("#amount").val(course_price);
});
});
$('#course_name').change(function() {
url = "date_range.php?courseID=" + $('#course_name').val();
$("#dates").load(url)
url = "course_name.php?courseID=" + $('#course_name').val();
var course_details;
$.get(url, function(data) {
course_details = data;
split_course_details = course_details.split(',');
course_name = split_course_details[0];
course_price = split_course_details[1];
course_date = $("#date_range").val();
item_name = course_name + ' - ' + course_date;
$("#item_name").val(item_name);
$("#amount").val(course_price);
});
});

Try this:
$(function() {
var cname = $('#course_name'),
dates = $('#dates'),
iname = $('#item_name'),
amount = $('#amount'),
drange = $('#date_range');
cname.change(function() {
dates.load( 'date_range.php?courseID=' + this.value );
$.get('course_name.php?courseID=' + this.value, function(data) {
data = data.split(',');
iname.val( data[0] + ' - ' + drange.val() );
amount.val( data[1] );
});
}).change();
});

it seems like you're using url variable twice for different data...
try using additional variable..

Related

How to fix error GET http:... 404(not found)

I want to get value of dropdownlist and show textbox but my code dont working
This is my code:
Controller:
public function socaucuachuong($id)
{
$units = CauHoi::groupBy('chuong')->select('chuong', CauHoi::raw('count(id) as Total'))->where('idmonthi','=', $id)->get()->toArray();
return view('DeThi::dethi',compact('units'));
}
View: dethi.blade.php
$('select').select();
function get_units() {
var id = $('#id_select').val();
var list = $('#dschuong');
list.empty();
var url = "{{ route('dthi.socaucuachuong') }}"+'/'+id;
var success = function (result) {
if (result.length <= 0) {
var item = '<div class="input-field"><input type="text" disabled value="Môn này hiện chưa có câu hỏi nào"></div>';
list.append(item);
} else {
for (i = 0; i < result.length; i++) {
var item = '<div class="input-field"><label for="unit-' + result[i].chuong+ '">Nhập số câu hỏi chương ' + result[i].chuong+ ' (có ' + result[i].Total + ' câu) <span class="failed">(*)</span></label><input type="number" max="' + result[i].Total + '" class="unit_input" onchange="set_sum(' + result[i].Total + ')" name="unit-' + result[i].chuong+ '" id="unit-' + result[i].chuong+ '" required></div>';
list.append(item);
}
}
};
$.get(url, success);
}
Route:
Route::get('dethi/socau', 'App\Modules\DeThi\Controllers\DeThiController#socaucuachuong')->name('dethi.socaucuachuong');
Route::resource('dethi', DeThiController::class);
And my error when I select dropdownlist:
How can I fix this?
You are missing a route parameter for the ID you're passing along.
https://laravel.com/docs/8.x/routing#required-parameters
Basically, your route needs to be updated to
Route::get('dethi/socau/{id}', 'App\Modules\DeThi\Controllers\DeThiController#socaucuachuong')->name('dethi.socaucuachuong');
Route
Route::get('dethi/socau/{id}', 'App\Modules\DeThi\Controllers\DeThiController#socaucuachuong')->name('dethi.socaucuachuong');
Javascript (blade)
var url = '{{ "dthi.socaucuachuong", ":id") }}';
url = url.replace(':id', id);

Adding a parameter to URL with checkbox (jQuery)

I'm adding ?show={COUNTRY CODE} to URL as a parameter. I managed to add it with the code below but can't remove it when you unselect the checkbox.
$.urlParam = function(name) {
var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
if (results) {
return results[1];
} else {
return 0;
}
}
$('#uc').click(function() {
var country = $(this).val();
var site_url = $('body').data('site-url');
var url = $('body').data('url');
window.location.href = site_url + url + '?show=' + country;
});
if ($.urlParam('show') == $('#uc').val()) {
$('#uc').attr('checked', true);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="uc" id="uc" value="UK"> <label for="uc">Only UK</label>
Use the condition to check the checkbox is clicked or not.
if ($(this).is(':checked')) {
console.log(site_url + url + '?show=' + country)
} else {
console.log(site_url + url)
}
Use change() not click() then check with .is(':checked')
$.urlParam = function(name) {
var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
if (results) {
return results[1];
} else {
return 0;
}
}
$('#uc').change(function() {
var country = $(this).val();
var site_url = $('body').data('site-url');
var url = $('body').data('url');
var site_url = 'google.com' // temp remove later
var url = '/sd/' // temp remove later
if ($(this).is(':checked')) {
console.log(site_url + url + '?show=' + country)
//window.location.href = site_url + url + '?show=' + country; // uncomment later
} else {
console.log(site_url)
//window.location.href = site_url; // uncomment later
}
});
if ($.urlParam('show') == $('#uc').val()) {
$('#uc').attr('checked', true);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="uc" id="uc" value="UK"> <label for="uc">Only UK</label>

get message without re open div

Im working in a chat system very simple. But i have a problem. I can only get the other user messages if i close and re open the chat conversation div, then the message appears.
How can I solve this? The problem should be in this piece of code. As I am not very comfortable with ajax I ask for your help.
JS:
$(document).ready(function(){
var snd = new Audio("images/new_msg.wav");
var open=Array();
$("#jd-chat .jd-online_user").click(function(){
var user_name = $.trim($(this).text());
var id = $.trim($(this).attr("id"));
if($.inArray(id,open) !== -1 )
return
open.push(id);
$("#jd-chat").prepend('<div class="jd-user">\
<div class="jd-header" id="' + id + '">' + user_name + '<span class="close-this"> X </span></div>\
<div class="jd-body"></div>\
<div class="jd-footer"><input id="textareabox" placeholder="escrever..."></div>\
</div>');
$.ajax({
url:'chat.class.php',
type:'POST',
data:'get_all_msg=true&user=' + id ,
success:function(data){
$("#jd-chat").find(".jd-user:first .jd-body").append("<span style='display:block' class='me'> " + data + "</span>");
}
});
});
$("#jd-chat").delegate(".close-this","click",function(){
removeItem = $(this).parents(".jd-header").attr("id");
$(this).parents(".jd-user").remove();
open = $.grep(open, function(value) {
return value != removeItem;
});
});
$("#jd-chat").delegate(".jd-header","click",function(){
var box=$(this).parents(".jd-user,.jd-online");
$(box).find(".jd-body,.jd-footer").slideToggle();
});
$("#search_chat").keyup(function(){
var val = $.trim($(this).val());
$(".jd-online .jd-body").find("span").each(function(){
if ($(this).text().search(new RegExp(val, "i")) < 0 )
{
$(this).fadeOut();
}
else
{
$(this).show();
}
});
});
$("#jd-chat").delegate(".jd-user input","keyup",function(e){
if(e.keyCode == 13 )
{
var $cont = $('.jd-body');
var box=$(this).parents(".jd-user");
var msg=$(box).find("input").val();
var to = $.trim($(box).find(".jd-header").attr("id"));
$.ajax({
url:'chat.class.php',
type:'POST',
data:'send=true&to=' + to + '&msg=' + msg,
success:function(data){
$('#textareabox').val('');
$(box).find(".jd-body").append("<span style='display:block' class='me'> " + msg + "</span>");
$cont[0].scrollTop = $cont[0].scrollHeight;
$cont.append('<span>' + $(this).val() + '</span>');
$cont[0].scrollTop = $cont[0].scrollHeight;
$(this).val('');
}
});
}
});
function message_cycle()
{
$.ajax({
url:'chat.class.php',
type:'POST',
data:'unread=true',
dataType:'JSON',
success:function(data){
$.each(data , function( index, obj ) {
var user = index;
var box = $("#jd-chat").find("div#2").parents(".jd-user");
$(".jd-online").find(".light").hide();
$.each(obj, function( key, value ) {
if($.inArray(user,open) !== -1 )
$(box).find(".jd-body").append("<span style='display:block' class='other'> " + value + "</span>");
else
snd.play();
$(".jd-online").find("span#" + user + " .light").show();
});
});
}
});
}
setInterval(message_cycle,1000);
});
How messages are displayed when you first open the chat conv div ?
I'm assuming message_cycle() is supposed to display new messages in your div every second, i suppose your problem is here...
I'm not really confortable with this :
var box = $("#jd-chat").find("div#2").parents(".jd-user");
A div can't have an id starting with a number, you need <div id="chat2"> instead of <div id="2">.
After your line add a console.log('Box found : '+box.length) ; just to make sure your box is correctly found in message_cycle.

YouTube ajax, .replace() not working

I Am using the jquery below and witht he addition of .replace(",", " ") to the var video_tags=data.tags doesn't return a value. how can i replace the commas with spaces.
http://jsfiddle.net/hJGe4/1/
$(document).ready(function () {
$(".search_input").focus();
$(".search_input").keyup(function () {
$("#video").html('');
var search_input = $(this).val();
var keyword = encodeURIComponent(search_input);
var yt_url = 'http://gdata.youtube.com/feeds/api/videos?q=' + keyword + '&format=5&max-results=6&v=2&alt=jsonc';
$.ajax({
type : "GET",
url : yt_url,
dataType : "jsonp",
success : function (response) {
if (response.data.items) {
$.each(response.data.items, function (i, data) {
var video_title = data.title;
var video_tags = data.tags.replace(",", " ");
var final = video_title + '<br/>' + video_tags + '<br/><br/><br/>';
$("#video").append(final);
});
} else {
$("#video").html("<div id='no'>No Video</div>");
}
}
});
});
});
var video_tags=data.tags.replace(",", " ");
should be
var video_tags=data.tags.join(" ");
DEMO

How to get the URL parameters after redirecting using javascript?

After replacign the location with new parameters, the page after loaded doesn't get the paramaters value, despite there are values in the parameters
the used code is :
function getURLParameter(name) {
return
decodeURI((RegExp(name + '=' + '(.+?)(&|$)').exec(location.search) || [, null])[1]);
}
$(document).ready(function () {
$(".sub").slideUp();
var div = getURLParameter("div");
var ddl = getURLParameter("ddl");
alert(div);
// alert("ManageTrainingNeeds.aspx?div=" + div + "&ddl=" + ddl);
// $("#" + div).slideDown();
// $("#ddlObjectiveGroup").val("'" + ddl + "'");
});
$(".btnAddSub").live("click", function () {
var diva = $(this).parent().parent().parent().parent().parent().parent().attr("id");
var ddl = $("#ddlObjectiveGroup option:selected").val();
window.location.replace("ManageTrainingNeeds.aspx?div=" + diva + "&ddl=" + ddl);
});
this alert(div); return undefined.. despite the div vairable in click event has a value
Try encoding the parameters and also canceling the default action in the click event:
function getURLParameter(name) {
return decodeURIComponent((RegExp(name + '=' + '(.+?)(&|$)').exec(location.search) || [, null])[1]);
}
$(document).ready(function () {
var div = getURLParameter('div');
var ddl = getURLParameter('ddl');
alert(div + ' ' + ddl);
});
$('.btnAddSub').live('click', function () {
var diva = encodeURIComponent($(this).parent().parent().parent().parent().parent().parent().attr('id'));
var ddl = encodeURIComponent($('#ddlObjectiveGroup').val());
window.location.replace('/ManageTrainingNeeds.aspx?div=' + diva + '&ddl=' + ddl);
return false;
});
Instead of fiddling with the URLs yourself, you could use a library for the job - such as URI.js. (sorry for the self-promo)
$(document).ready(function () {
var search = URI().search(true);
alert(search.div + ' ' + search.ddl);
});
$('.btnAddSub').live('click', function (e) {
var uri = URI('/ManageTrainingNeeds.aspx');
uri.search({
diva: $(this).parent().parent().parent().parent().parent().parent().attr('id'),
ddl: $('#ddlObjectiveGroup').val()
});
window.location.href = uri.toString();
e.preventDefault();
});

Categories