Click event on task list, when edit button clicked modal box appears and populate data from ajax call.
First time I click edit button it show first option, but when 2nd click it show the corrected one even when I click on other row. Staff show just right, the problem is on phase.
This is my final solution:
$('#task_table').on('click', '.edit_task', function() {
var task_id = $(this).attr('data');
$('#modal-task-edit').modal('show');
$.ajax({
type: 'ajax',
method: 'get',
url: '<?php echo base_url() . 'Task/get_task' ?>',
data: {
task_id: task_id
},
async: false,
dataType: 'json',
success: function(data) {
$('input[name=start_date]').val(data.start_date);
$('input[name=project_id]').val(data.project_id);
$('input[name=task_id]').val(data.task_id);
$('input[name=end_date]').val(data.end_date);
$('input[name=task_name]').val(data.task_name);
$("textarea#task_description").val(data.task_description);
let phases = data.phases.split(",");
all_phase(result => {
let arr_all = [];
let all = Object.keys(result).map((key) => [result[key]]);
for (let i of all) {
arr_all[i[0]['phase_id']] = i[0]['phase_name']
}
for (let i = 0; i < phases.length; i++) {
$('#phase').append('<option value=' + phases[i] + '>' + arr_all[phases[i]] + '</option>');
}
});
$('#phase').val(data.phase_id).trigger('change');
$('#pic').val(data.staff_id).trigger('change');
}
});
});
Hours of debugging doesn't work
Related
I have two dropdownlist and when I change the value of the first one with refreshes the value of the second one with the following code:
function FillBooks(val) {
$("#ddl_dep").attr("class", "form-group");
$("#Help1").css("visibility", "hidden");
var CategoryId = val;
//console.log(CategoryId);
console.log(CategoryId)
$("#DDL_TIPO").empty();
$.ajax({
url: '#Url.Action("UpdateTipo", "Tickets")',
type: "POST",
dataType: "JSON",
data: { value: CategoryId },
success: function (data) {
var markup = "<option value='0'>Selecione um Tipo</option>";
for (var x = 0; x < data.length; x++) {
markup += "<option value=" + data[x].value + ">" + data[x].Text + "</option>";
}
$("#DDL_TIPO").html(markup).show();
}
});
}
P.S - The data comes from the controller which is not relevant for the exemple that I am showing.
After this when I try to get the value of the Second dropdownlist it comes as undefined.
I tested before this jquery code and it gives me the value of the dropdownlist, it just doesn't give when I get this function to work on it.
Try this:
<script>
function FillBooks(val)
{
$("#ddl_dep").attr("class", "form-group");
$("#Help1").css("visibility", "hidden");
var CategoryId = val;
//console.log(CategoryId);
console.log(CategoryId)
$.ajax
({
url: '#Url.Action("UpdateTipo", "Tickets")',
type: 'POST',
datatype: 'application/json',
contentType: 'application/json',
data: { value: CategoryId },
success: function(result)
{
$("#DDL_TIPO").html("");
$.each($.parseJSON(result), function(i, tipo)
{
$("#DDL_TIPO").append($('<option</option>').val(tipo.Value).html(tipo.Text))
})
},
error: function()
{
alert("Whooaaa! Something went wrong..")
},
});
}
</script>
I have a project that I am trying to implement with jquery. I have an add button, so everytime it is clicked, it will create a new record on in my database. I am trying to figure out how to get my ajax call to recognize the new data and display it on the screen, without me having to manually refresh the screen, I was hoping to just use fadeIn or something similar to only show my new div.
This is for a checklist system,so someone can edit a checklist by adding steps on the fly and reorder existing steps
I wrote a loadData function to loop through my records and append the appropriate data, but not sure how to auto refresh my div when someone adds a new step. I don't want to reload the entire page, only the newly created div.
$(function() {
loadData();
});
// drag and drop steps and update the database
$('#steps').sortable({
update: function(event, ui) {
var data = $(this).sortable('serialize');
data = data + '&id=' + json.IDchecklist + '&ver=' + json.Version;
$.ajax({
data: data,
type: 'POST',
url: '../Processes/Reorder.php',
success: (function() {})
});
}
});
//load data
function loadData() {
$.ajax({
url: '../json/test.php',
type: 'GET',
dataType: 'json',
success: function(data) {
json = data
$('#details').find('h2').html(data.IDchecklist);
$('#details').find('h4').html(data.Status);
$.each(data, function(k, v) {
if (k == "Steps") {
count = 1;
$.each(v, function(key, value) {
$('#steps').append('<span>' + count + '</span><div id=step' + value.IDstep + '>' + value.StepText + '</div>');
count++;
text[count] = value.StepText;
})
}
})
}
})
}
//add new step
$('#add').click(function() {
console.log(count);
div = $('#step-' + count);
$.ajax({
type: 'POST',
data: {
id: json.IDchecklist,
ver: json.Version,
step: count
},
url: '../processes/addStep.php',
success: (function() {
div.fadeIn('fast')
})
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<div class="jumbotron"></div>
<div id="details">
<h2></h2>
<h4></h4>
</div>
<div id="steps">
</div>
<button id=add value="Add">Add</button>
When the user hovers over an image an information box comes up about that image, the information them changes inside the box as I move over another image but when I am over no images the information box stays. I can't close the information box (i.e. tooltips).
JS :
var id;
$(document).ready(function () {
$('a').mouseenter(function () {
//var id = $(this).parent().attr('myval');
id = $(this).data('myval');
$.ajax({//create an ajax request to foliobase.php
type: "GET",
//link to the foliobase.php file "?subj" here is the connector
url: "foliobase.php?subj=" + id,
dataType: "html",
success: function (response) {
$("#fillFolio").html(response);
}
});
});
$('a').onmouseleave(function () {
id = $(this).data.display = 'none';
}
});
How can I get the information box to disappear on mouse out?
I have tried multiple tests but the box doesn't even appear with them, the last one I tried is in the code above.
$('a').onmouseleave(function () {
id = $(this).data.display = 'none';
}
I am only starting out with javascript, jquery etc. in the last year.
Thank you in advance!!
Here is the php.
<div class="thumbnails">
<?php
$query = mysqli_query($connection, "select * from portfolio");
print "<ul>";
while ($row = mysqli_fetch_assoc($query)) {print "<li><img onClick=preview.src=" . $row['image'] . "name=" . $row['folio_id'] . "src={$row['image']}></td></li>";
}
print "</ul>";
?>
</div>
<!--Folio Information-->
<div id="fillFolio">Project Information</div>
I'm not sure, but try to use :
$('a').onmouseleave(function () {
$("#fillFolio").empty();
}
Hope this helps.
$("a").hover(function(){
id = $(this).data('myval');
$.ajax({//create an ajax request to foliobase.php
type: "GET",
//link to the foliobase.php file "?subj" here is the connector
url: "foliobase.php?subj=" + id,
dataType: "html",
success: function (response) {
$("#fillFolio").html(response);
}
});
}, function(){
//im not sure u want to hide or want to just clear your question not clear
$("#fillFolio").empty();
$("#fillFolio").hide();
});
Why not use jQuery hover = (mouseenter + mouseleave)
<script type="text/javascript">
var id;
$(document).ready(function () {
$('a').hover(function () {
//var id = $(this).parent().attr('myval');
id = $(this).data('myval');
$.ajax({//create an ajax request to foliobase.php
type: "GET",
//link to the foliobase.php file "?subj" here is the connector
url: "foliobase.php?subj=" + id,
dataType: "html",
success: function (response) {
$("#fillFolio").html(response);
}
});
,function () {
id = $(this).empty();
});
</script>
I'm kinda new to javascript and ajax.
The page that I'm building will ask user to select from a list. Upon selection, a dropdown will be populated from database, and a default value of that dropdown will be automatically selected.
So far I've been able to populate the dropdown OR automatically select a value. But I can't do them both in succession.
Here's the Javascript snippet that gets called upon selection of an item from a a list:
function onSelectProduct(data, index) {
//part 1: auto populate dropdown
$.ajax({
type: "POST",
async: true,
url: "http://localhost:8007/Webservice.asmx/GetUnitsByProductID",
data: "{productID: " + data.ID + "}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (result) {
$("#Details_" + index + "_ConversionID").empty();
$.each(result.d, function (key, val) {
var option = document.createElement('option');
option.text = val.Name;
option.value = val.ID;
$("#Details_" + index + "_ConversionID").append(option);
});
}
});
//part 2: select one of the values
var ddl = document.getElementById("Details_" + index + "_ConversionID");
var opts = ddl.options.length;
for (var i = 0; i < opts; i++) {
if (ddl.options[i].value == data.StockUnitID){
ddl.options[i].selected = true;
break;
}
}
}
I used
$("#Details_" + index + "_ConversionID").empty(); because I started with all possible options in the dropdown.
If I started with an empty dropdown, ddl.options.length will return 0 for some reason.
From my understanding, the ajax script that I wrote doesn't really change the properties of the dropdown box (ddl.options.length returns either 0 or the full list with or without the ajax operation). If that's true, then what's the right way to populate that dropdown?
Btw I'm using cshtml and .net.
Thanks!
Well you can try using $.when and .done as below:
It will execute your code once the options have been set
$.ajax({
type: "POST",
async: true,
url: "http://localhost:8007/Webservice.asmx/GetUnitsByProductID",
data: "{productID: " + data.ID + "}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (result) {
$("#Details_" + index + "_ConversionID").empty();
$.when(
$.each(result.d, function (key, val) {
var option = document.createElement('option');
option.text = val.Name;
option.value = val.ID;
$("#Details_" + index + "_ConversionID").append(option);
})).done(function(){
//part 2: select one of the values
var ddl = document.getElementById("Details_" + index +"_ConversionID");
var opts = ddl.options.length;
for (var i = 0; i < opts; i++) {
if (ddl.options[i].value == data.StockUnitID){
ddl.options[i].selected = true;
break;
}
}
});
}
});
I would also like to suggest one thing! Please do not use complete url as your ajax url since when you host the site this will change and http://localhost:8007/ will no longer be available!
You can write following code in Ajax Success :
$("#Details_"+index +"_ConversionID").val('value you want to select');
Thanks
The function occurs before anything is clicked...
such as
When i click the name ^ fdsa, for exampmle, i need the id to pop up, but it automatically happens when the page is loaded for some reason
HTML
<ul data-role="listview" id="ccontent" data-inset="true">
</ul>
JS
function getClubs() {
$.ajax({
url: 'some url',
crossDomain: true,
type: 'post',
data: '',
success: function (data) {
$('#ccontent').empty();
var json = jQuery.parseJSON(data);
for (var i = 0; i < json.length; i++)
$('#ccontent').append('<li>' + json[i].name + '</li>');
$('#ccontent').listview('refresh');
},
});
}
function getData(id) {
$('#clubcontent').append ('<li>'+id+'</li>');
$('#clubcontent').listview('refresh');
};
I think this is what you're looking for:
$(document).on('click', '#ccontent li a', function () {
getData($(this).data('club-id'));
});
function getClubs() {
$.ajax({
url: 'some url',
crossDomain: true,
type: 'post',
data: '',
success: function (data) {
$('#ccontent').empty();
var json = jQuery.parseJSON(data);
for (var i = 0; i < json.length; i++)
$('#ccontent').append('<li>' + json[i].name + '</li>');
$('#ccontent').listview('refresh');
}
});
}
.on() is used instead of an inline onclick event. club-id is used to store the id which is used in the getData() function.