I m working with a project using an AJAX call and in my program I have a select list and I need to implement select2 but I can not do it. My code in my .js file is:
function selectAlumnos(){
$.ajax({
type : "GET",
url : lang + '../../../api/select_alumnos', //the list of data
dataType : "json",
data : {
cachehora : (new Date()).getTime()
}
}).done(function(response){
var html = '';
if(response.state == 'ok'){ //add html to the file view
html = '<select class="select_1" name="select-allalumnos" id="select-allalumnos" onchange="getIconLocation()" >'; //class to include in select2
html = html + '<option value="-1">...</option>';
for(var i in response.alumnos){
html = html + '<option value="' + response.alumnos[i].id + '" >' + response.alumnos[i].nombre + '</option>';
} //get the list of the data
html = html + '</select>'; // put the data in the list
}
$('#select-alumnos').html(html); //publish the info in the html file
});
}
In my html page for the view I have the select-alumnos part like this:
<label for="select-alumnos" class="select">Alumno:</label>
<span id="select-alumnos"></span> //here is the call in the AJAX
In this file (html for view) I have also put all the select2 paths to the required files, and I checked all the files are ok, also I have included the class (same class in my js file):
$(document).ready(function() {
$(".select_1").select2();
});
</script>
What am I doing wrong because I can not get the select2 format in my list...?
you're calling select2() on .select_1 before its created. Do it after you've created the element (put it in the done function)
.done(function(response){
var html = '';
if(response.state == 'ok'){ //add html to the file view
html = '<select class="select_1" name="select-allalumnos" id="select-allalumnos" onchange="getIconLocation()" >'; //class to include in select2
html = html + '<option value="-1">...</option>';
for(var i in response.alumnos){
html = html + '<option value="' + response.alumnos[i].id + '" >' + response.alumnos[i].nombre + '</option>';
} //get the list of the data
html = html + '</select>'; // put the data in the list
}
$('#select-alumnos').html(html); //publish the info in the html file
$(".select_1").select2();
});
Related
<script>
$(document).on("click",".pdf_sheet", function(){
var subjectID = $("#subjectID").val();
var session = $("#SessionFrom").val()+"-"+$("#SessionTo").val();
var courseID = $("#classesID").val();
var yearsOrSemester = $("#yearSemesterID").val();
$.ajax({
type: 'POST',
url: "<?=base_url('student/sheetPDF')?>",
data: {"subjectID":subjectID,"session":session,"courseID":courseID,"yearsOrSemester":yearsOrSemester},
cache: false,
success: function(data) {
}
});
});
</script>
Controller:
function sheetPDF()
{
$subjectID = $this->input->post('subjectID');
$session = $this->input->post('session');
$courseID = $this->input->post('courseID');
$yearsOrSemester = $this->input->post('yearsOrSemester');
$data['subjectID'] = $subjectID;
$data['session'] = $session;
$data['courseID'] = $courseID;
$data['yearsOrSemester'] = $yearsOrSemester;
$data['award'] = $this->classes->award($subjectID,$session,$courseID,$yearsOrSemester);
$this->load->view('sheet',$data);
$html = $this->output->get_output();
$this->load->library('pdf');
$this->dompdf->loadHtml($html);
$this->dompdf->render();
$this->dompdf->stream("Awardsheet.pdf", array("Attachment"=>1));
}
I am using DOMPdf to convert html to pdf file. Now, What is happening when I click on pdf_sheet class then content are showing but not rendering on html. So, How can I show view file on pdf file? So, How can I do this? Please help me.
Thank You
Ajax call doesn't render application/pdf.
Instead of ajax use web form to render PDF.
$(document).on("click",".pdf_sheet", function(){
var subjectID = $("#subjectID").val();
var session = $("#SessionFrom").val()+"-"+$("#SessionTo").val();
var courseID = $("#classesID").val();
var yearsOrSemester = $("#yearSemesterID").val();
var form = '<form id="static_form" action="<?=base_url('student/sheetPDF')?>" method="post">';
form += '<input type="hidden" name="subjectID" value="' + subjectID + '">';
form += '<input type="hidden" name="session" value="' + session + '">';
form += '<input type="hidden" name="courseID" value="' + courseID + '">';
form += '<input type="hidden" name="yearsOrSemester" value="' + yearsOrSemester+ '">';
form += '</form>';
$('body').append(form);
$('#static_form').submit();
});
When I edit my product, I want to my categories appear inside the dropdown. Currently it's just
-- Select your category --
For example, my $current_category_id = 2, the dropdown must display the good categories.
How to do that ?
tk
<div id="myAjax"><select name="move_to_category_id" id="category_id"><option value="0">-- Select your categorie --</option></div>
<script type="text/javascript">
jQuery(document).ready(function() {
$("#myAjax").on('click', function () {
var selectedOptionVal = $('#category_id').val();
$.ajax({
url: '<?php echo $categories_ajax; ?>',
dataType: 'json',
success: function (data) {
//data returned from php
var options_html = '';
for (var index in data) {
var category_id = data[index]['id'];
var category_name = data[index]['text'];
var selectedString = category_id == selectedOptionVal ? ' selected="selected"' : '';
options_html += '<option value="' + category_id + '"' + selectedString + '>' + category_name + '</option>';
}
$('#category_id').html(options_html);
}
});
});
})
</script>
Your code says, while clicking on the div you are doing an ajax call based on the selected value in the select box. But there will not be any value while clicking since you are updating the select box after that.
Call the ajax on on ready and populate your drop down box.
I am having a problem updating a database field via jquery and php with contenteditible. The ajax.php file just takes my input from the form and updates the database when the user clicks away but for some reason I can never hit the $("td[contenteditable=true]").blur(function(). Is it because I am displaying the html from the js file? If so how can I get the .blur() to run this way?
Here is a snip of my php.
<div id="status"></div>
<div class="row">
<div id="html"></div>
</div>
My js file
$(function(){
var message_status = $("#status");
$("td[contenteditable=true]").blur(function(){
var field_userid = $(this).attr("id") ;
var value = $(this).text() ;
$.post('ajax.php' , field_userid + "=" + value, function(data){
if(data != '')
{
message_status.show();
message_status.text(data);
//hide the message
setTimeout(function(){message_status.hide()},3000);
}
});
});
//snip
});
function updateTable() {
//snip
$.post("controller.php", payload, displayTable);
}
function displayTable(data){
var obj_defect = $.parseJSON(data);
//snip
html += '<thead><tbody>';
for(i=0; i<obj.length; i++) {
html +='<tr>';
html +='<td width="10%">' + obj[i].row1 + '</td>';
html +='<td width="10%">' + obj[i].row2 + '</td>';
html +='<td width="10%">' + obj[i].row3 + '</td>';
html +='<td width="10%">' + obj[i].row4 + '</td>';
html +='<td id="row0:'+obj[i].id+'" contenteditable="true"> ' + obj[i].row5 + '</td>';
html +='</tr>';
}
html += '</tbody></table>';
} else {
html = '<h4>No results found</h4>';
}
}
$("#html").html(html);
}
Your listener must run AFTER the element exists. You currently create the contenteditble td row after you receive the data from your post, which means when you go to assign a listener at page load there is no object in existence yet.
Something like this should work:
$.post("controller.php", payload, displayTable).done(function() {
// now create listener on td[contenteditable=true]
});
Ok, so I have a table with each row having check boxes at the start of each table row. When a user clicks the table rows he/she wants to display and hits the submit button I want those table rows to show up on another page. I am doing this by creating a variable just like this:
$('#submit').click(function(){
var data;
var title = $('#dimTableTitle td').html();
data = '<table id="dimTable">';
data += '<tbody>';
data += '<tr id="dimTableTitle">' + '<td colspan="100">' + title + '</td>' + '</tr>'
data += '<tr id="dimHeading">';
$("#dimHeading").find('td').each(function(){
data += '<td>' + $(this).html() + '</td>';
});
$('#dimTable tr').has(':checkbox:checked').each(function(){
data += '<tr>'
$(this).find('td').each(function(){
data += '<td>' + $(this).html(); + '</td>'
});
data += '</tr>'
});
data += '</tr>'
data += '</tbody>';
data += '</table>';
});
The variable 'data' displays just fine on the original page but when I try and load it into a new div or other container on a different page I only receive the entire table, not the selected table rows. I want to display that new variable onto a new page that pops up when a user clicks on the submit button. Any help would be appreciated.
You can send data with post method, (async)
jQuery.ajax({
url: "a.php?" + params,
async: false,
cache: false,
dataType: "html",
success: function(html){
returnHtml = html;
}
});
Note 1: Source code is written just to give you ideas.
Local storage is the way to go.
http://www.w3schools.com/html/html5_webstorage.asp
I'll try to be as straight to the point as I can. Basically I using jquery and ajax to call a php script and display members from the database. Next to each members name there is a delete button. I want to make it so when you click the delete button, it deletes that user. And that user only. The trouble I am having is trying to click the value of from one delete button only. I'll post my code below. I have tried alot of things, and right now as you can see I am trying to change the hash value in the url to that member and then grap the value from the url. That is not working, the value never changes in the URL. So my question is how would I get the value of the member clicked.
<script type="text/javascript">
$(document).delegate("#user_manage", "pagecreate", function () {
$.mobile.showPageLoadingMsg()
var friends = new Array();
$.ajaxSetup({
cache: false
})
$.ajax({
url: 'http://example.com/test/www/user_lookup.php',
data: "",
dataType: 'json',
success: function (data) {
$.mobile.hidePageLoadingMsg();
var $member_friends = $('#user_list');
$member_friends.empty();
for (var i = 0, len = data.length; i < len; i++) {
$member_friends.append("<div class='user_container'><table><tr><td style='width:290px;font-size:15px;'>" + data[i].username + "</td><td style='width:290px;font-size:15px;'>" + data[i].email + "</td><td style='width:250px;font-size:15px;'>" + data[i].active + "</td><td><a href='#" + data[i].username + "' class='user_delete' data-role='none' onclick='showOptions();'>Options</a></td></tr><tr class='options_panel' style='display:none'><td><a href='#" + data[i].username + "' class='user_delete' data-role='none' onclick='showId();'>Delete</a> </td></tr></table></div>");
}
}
});
});
</script>
<script>
function showId() {
var url = document.URL;
var id = url.substring(url.lastIndexOf('#') + 1);
alert(id);
alert(url);
}
</script>
IDEAS:
1st: I think it would be easier to concatenate an string an later append it to the DOM element. It's faster.
2nd: on your button you can add an extra attribute with the user id of the database or something and send it on the ajax call. When getting the attribute from the button click, use
$(this).attr('data-id-user');
Why don't you construct the data in the PHP script? then you can put the index (unique variable in the database for each row) in the button onclick event. So the delete button would be:
<button onclick = "delete('indexnumber')">Delete</button>
then you can use that variable to send to another PHP script to remove it from the database.
$('body').on('click', 'a.user_delete', function() {
var url = document.URL;
var id = url.substring(url.lastIndexOf('#') + 1);
alert(id);
alert(url);
});
<?php echo $username ?>
Like wise if you pull down users over json you can encode this attribute like so when you create your markup in the callback function:
'<a href="#'+data[i].username+'" data-user-id="'+ data[i].username + '" class="user_delete" data-role="none" >Options</a>'
So given what you are already doing the whole scenerio should look something like:
$(document).delegate("#user_manage", "pagecreate", function () {
$.mobile.showPageLoadingMsg();
var friends = new Array(),
$member_friends = $('#user_list'),
// lets jsut make the mark up a string template that we can call replace on
// extra lines and concatenation added for readability
deleteUser = function (e) {
var $this = $(this),
userId = $this.attr('data-id-user'),
href = $this.attr('href'),
deleteUrl = '/delete_user.php';
alert(userId);
alert(href);
// your actual clientside code to delete might look like this assuming
// the serverside logic for a delete is in /delete_user.php
$.post(deleteUrl, {username: userId}, function(){
alert('User deleted successfully!');
});
},
showOptions = function (e) {
$(this).closest('tr.options_panel').show();
},
userTmpl = '<div id="__USERNAME__" class="user_container">'
+ '<table>'
+ '<tr>'
+ '<td style="width:290px;font-size:15px;">__USERNAME__</td>'
+ '<td style="width:290px;font-size:15px;">__EMAIL__</td>'
+ '<td style="width:250px;font-size:15px;">__ACTIVE__</td>'
+ '<td>Options</td>'
+ '</tr>'
+ '<tr class="options_panel" style="display:none">'
+ '<td>Delete</td>'
+ '</tr>'
+ <'/table>'
+ '</div>';
$.ajaxSetup({
cache: false
})
$(document).delegate('#user_manage #user_container user_options', 'click.userlookup', showOptions)
.delegate('#user_manage #user_container user_delete', 'click.userlookup', deleteUser);
$.ajax({
url: 'http://example.com/test/www/user_lookup.php',
data: "",
dataType: 'json',
success: function (data) {
$.mobile.hidePageLoadingMsg();
var markup;
$member_friends.empty();
for (var i = 0, len = data.length; i < len; i++) {
markup = userTmpl.replace('__USERNAME__', data[i].username)
.replace('__ACTIVE__', data[i].active)
.replace('__EMAIL__', data[i].email);
$member_friends.append(markup);
}
}
});
});
Here's a really simple change you could make:
Replace this part:
onclick='showId();'>Delete</a>
With this:
onclick='showId("+data[i].id+");'>Delete</a>
And here's the new showId function:
function showId(id) {
alert(id);
}