I have very easy problem with jQuery draggable UI. I typed a function its name is inid_drag and when i after ajax call its working good. but when type before ajax call it's not working.
Follow codes for draggable:
function init_drag(){
$("#lessonTeacher li").draggable({
helper: 'clone'
});
}
Follow codes are working correctly:
$("#classID").change(function(){
var classID = $(this).val();
$.ajax({
async: false,
type: "POST",
dataType: "json",
data:"classID=" + classID,
url: "views/timeTablesAjax.php",
success:function(data){
$("#lessonTeacher").html("");
$("#timeTable").hide();
$("#timeTable").show("slow");
$("#timeTable td").not(".notDrop").html("");
$.each(data,function(i,persons){
$("#lessonTeacher").append("<b>" + persons[0].code + "</b><br/>");
for(var i = 0; i < persons.length; i++){
$("#lessonTeacher").append("<li class='token-input-token-facebook' style='list-style-type: none;'>" +
"<p style='padding-left: 10%;' data-id=" + persons[i].ID + ">" + persons[i].staff + "</p>" +
"<span class='infoBox' style='background-color: #808080;'><img src='BT/upload/info.ico' width=10 height=10></span></li><br/><br/>");
}
});
// in this function has got draggable codes.
init_drag();
}
});
});
Follow codes are not working:
$("#classID").change(function(){
var classID = $(this).val();
// in this function has got draggable codes.
init_drag();
$.ajax({
async: false,
type: "POST",
dataType: "json",
data:"classID=" + classID,
url: "views/timeTablesAjax.php",
success:function(data){
$("#lessonTeacher").html("");
$("#timeTable").hide();
$("#timeTable").show("slow");
$("#timeTable td").not(".notDrop").html("");
$.each(data,function(i,persons){
$("#lessonTeacher").append("<b>" + persons[0].code + "</b><br/>");
for(var i = 0; i < persons.length; i++){
$("#lessonTeacher").append("<li class='token-input-token-facebook' style='list-style-type: none;'>" +
"<p style='padding-left: 10%;' data-id=" + persons[i].ID + ">" + persons[i].staff + "</p>" +
"<span class='infoBox' style='background-color: #808080;'><img src='BT/upload/info.ico' width=10 height=10></span></li><br/><br/>");
}
});
}
});
});
when you call $("#classID").change(function(){}
it execute
init_drag();
and ajax method
same time but in responce ajax take more time then your init_drag() method
so when you got reply with ajax the html or dragging function overlapping ur html because you append html.
Related
My first ajax call works fine - preventing the default behavior of the link. This gets json data and creates some new links with dynamically generated class names.
My second ajax call is for a click event on the dynamically created links. I can't prevent the default behavior on this one. It just redirects to the url with the json data. In the code below, it never hits the debugger.
I'm pretty sure this is happening because the newly created links aren't part of the DOM.
Can anyone help me figure out what's going on?
$(function(){
$("#load_projects").on("click", function(e){
$.ajax({
method: "GET",
url: this.href
}).done(function(response){
let $userProjects = $("#user_projects")
$userProjects.html("")
response.forEach(function(item){
let project = new Project(item);
let materials = project.materials
let url = `/users/${project.user_id}/projects/${project.id}`
$userProjects.append(`<div id=${project.id}>` + "<li>" + project.formatIntro() + "<br>" + "<a href="+url+" class='full_project'>See Full Project</a>" + "<br>" + "Materials Required:" + "<br>" + `<ul class=${project.id}></ul>` + "</li>" + "</div>")
materials.forEach(function(mat){
$(`.${project.id}`).append("<li>" + mat.material_name + "</li>")
});
});
});
e.preventDefault();
});
});
$(function(){
$(".full_project").on("click", function(e){
$.ajax({
method: "GET",
url: this.href
}).done(function(response){
response.forEach(function(item){
debugger
})
});
e.preventDefault();
});
});
I figured it out. The click event was being called on elements in the DOM that didn't exist. I needed to bind it to the body.
$(function(){
$("body").on("click", ".full_project", function(e){
e.preventDefault();
$.ajax({
method: "GET",
url: this.href
}).done(function(response){
let project = new Project(response);
let $projectDiv = $(`#${project.id}`)
$projectDiv.html("")
});
});
});
jeasyui: how to get queryparams in another page by clientside
page 1(root.html):
$.ajax({
type: "get",
async: true,
url: "/ashx/product/root.ashx",
dataType: 'json',
success: function (res) {
var o = $('#tb');
for (i = 0; i < res.length; i++) {
o.tabs('add', {
title: res[i].Name + '-' + res[i].PkId,
href: '/html/usr/node.html', queryParams: { 'id': res[i].id }
});
o.tabs('select', 0);
}
}
});
page 2(node.html):
<script>
// how to get queryParams from page root.html here in javascript.
alert();
</script>
Use JSONP
JQUERY
$.ajax({
url:"node.html.html",
dataType: 'jsonp',
success:function(json){
alert("Success");
},
error:function(){
alert("Error Message");
}
});
node.html ( note im using php )
<?php
$arr = array("param1",
"param2",
array("param3","param4"));
$arr['name'] = "response";
echo json_encode($arr);
?>
Hi I'm using jQuery UI Autocomplete and want do something like this: I want to get the list with AJAX when length=3 and this work great it populate the drop-down. Next I want when the length is >3 to use the returned list from the AJAX and filter it. But it give the same list not filtered.
$( ".selector" ).autocomplete({
source:function(request, response) {
var str_req = request.term;
if(str_req.length==3) {
$.ajax({
url: "/?search=1",
type: "GET",
dataType: "json",
data: {term: request.term},
success: function (data) {
auto_data=data;
response(data);
}
});
} else{
return response(auto_data);
}
},
minLength: 3,
select: function( event, ui ) {
console.log( "Selected: " + ui.item.value + " aka " + ui.item.id );
}
});
I would simply set the min to 1 and do a comparison in the source.
$(".selector").autocomplete({
source:function(request, response) {
var str_req = request.term;
if(str_req.length < 3) {
// Send your list back, if it was stored in 'myData'
response(myData);
} elseif(str_req.length==3) {
$.ajax({
url: "/?search=1",
type: "GET",
dataType: "json",
data: {term: str_req},
success: function (data) {
auto_data=data;
response(data);
}
});
} else{
response(auto_data);
}
}
},
minLength: 1,
select: function(event, ui) {
console.log( "Selected: " + ui.item.value + " aka " + ui.item.id );
}
});
You could also do this as a Switch statement:
var str_req = request.term;
switch(true){
case str_req.length < 3:
// Send your list
break;
case str_req.length == 3:
// Perform AJAX & return results
break;
default:
// All other options
response(auto_data);
}
Refer to https://select2.github.io/examples.html, text "Searching" is shown when the remote data is loading. However, I don't know why "undefined" is shown in my case.
This is the css file.
<div class="col-sm-9">
<select class="js-data-example-ajax form-control" style="width:100%;">
<option value="select2/select2" selected="selected">select2/select2</option>
</select>
</div>
And the setting of ajax call
$(".js-data-example-ajax").select2({
ajax: {
url: "/search/products",
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term,
page: params.page
};
},
processResults: function (data, page) {
return {
results: data.items
};
},
cache: true
},
minimumInputLength: 1,
templateResult: formatProduct,
templateSelection: formatProductSelection
});
Result:
function formatRepo (repo) {
if (repo.loading) return repo.text;
var markup = '<div class="clearfix">' +
'<div class="col-sm-1">' +
'<img src="' + repo.owner.avatar_url + '" style="max-width: 100%" />' +
'</div>' +
'<div clas="col-sm-10">' +
'<div class="clearfix">' +
'<div class="col-sm-6">' + repo.full_name + '</div>' +
'<div class="col-sm-3"><i class="fa fa-code-fork"></i> ' + repo.forks_count + '</div>' +
'<div class="col-sm-2"><i class="fa fa-star"></i> ' + repo.stargazers_count + '</div>' +
'</div>';
if (repo.description) {
markup += '<div>' + repo.description + '</div>';
}
markup += '</div></div>';
return markup;
}
function formatRepoSelection (repo) {
return repo.full_name || repo.text;
}
$ajax.select2({
ajax: {
url: "https://api.github.com/search/repositories",
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term, // search term
page: params.page
};
},
processResults: function (data, params) {
// parse the results into the format expected by Select2
// since we are using custom formatting functions we do not need to
// alter the remote JSON data, except to indicate that infinite
// scrolling can be used
params.page = params.page || 1;
return {
results: data.items,
pagination: {
more: (params.page * 30) < data.total_count
}
};
},
cache: true
},
escapeMarkup: function (markup) { return markup; },
minimumInputLength: 1,
templateResult: formatRepo,
templateSelection: formatRepoSelection
});
complete code which loads repositories in select 2 you can alter this code according to your requirements
my select box with multiple select
<select id="to_users" name="to_users" class="form-control js-data-example-ajax" multiple="multiple">
</select>
you can format results
processResults: function(data, page) {
// parse the results into the format expected by Select2.
// since we are using custom formatting functions we do not need to
// alter the remote JSON data
return {
results: $.map(data, function(obj) {
return { id: obj.user_id, text: obj.name };
})
//results: data
};
},
if you are formatting results to select2 behaviour then disable code
/* escapeMarkup: function(markup) {
return markup;
}, // let our custom formatter work
templateResult: formatRepo, // omitted for brevity, see the source of this page
templateSelection: formatRepoSelection // omitted for brevity, see the source of this page*/
Please try
function formatRepo(repo) {
if (repo.value == undefined) {
repo.value = 'Loading...'
}
var markup = '<div class="clearfix">' + repo.value + '</div>'
return markup;
}
There is a possible workaround for the above issue. Feel free to make comments.
Here is the code I've written before, let say the return JSON is {"items":[{"id":1,"name":"Product1"},{"id":2,"name":"Product2"}]}
var formatProduct = function(data){
return '<div>'+(data.name)+'</div>';
}
I've modified the code as follow and the 'Searching...' text shows again:
var formatProduct = function(data){
return '<div>'+(data.name || data.text)+'</div>';
}
In select2.js, line 798, when the data is remotely loading
this.template(data, option);
this.template directs to select2.js line 1058
Results.prototype.template = function (result, container) {
var template = this.options.get('templateResult');
container.innerHTML = template(result);
};
// result is an object indicating whether the data is loading.
// {disabled: true, loading: true, text: "Searching…"}
the template here takes the custom parameter 'templateResult' and generate the text, therefore, the custom function must contain data.text, otherwise it returns underfined.
In my case it was the formatProduct function (it has a different name in my code, but it's the same thing).
Let's say you call formatProduct for templateResult:
templateResult: formatProduct
In this case you have to check what formatProduct returns, like:
function formatProduct(product) {
return product.name || product.text;
}
In my case I was returning always product.name and the "Searching" text was under product.text, so I had to check to display it when no product was being found yet.
I have a page that will make an external call on a button click, and then update the button to reflect success. The ajax calls work properly, however I am having difficulty trying to manipulate the text of the button when there are many on the page.
It is easy enough to match using $(".sabPauRes.ui-btn-text").text("Updated"); when it's the only item on the page, but I am not sure how to point to it using $(this) when I am using the each function. I read a bit about 'closest', but it doesn't seem to accomplish what I want (or I'm just doing it wrong).
Code sample below!
$(document).ready(function(){
$('.sabPauRes').each(function() {
$(this).click(function(event) {
event.preventDefault();
$.ajax({
type: "GET",
url: this.href,
cache: false,
dataType: "text",
success: onSuccess
})
})
$("#resultLog").ajaxError(function(event, request, settings, exception) {
$("#resultLog").html("Error Calling: " + settings.url + "<br />HTTP Code: " + request.status);
})
function onSuccess(data)
{
// validate the result of the ajax call, update text, change button methods as needed
if (data == "Success") {
// PROBLEM -- how do I use $this to match a class that is nested within it?
$(this).closest(".ui-btn-text").text("Updated");
} else {
alert("Failed: " + data);
}
$("#resultLog").html("Result: " + data);
}
})
})
html
<body>
<div data-role="page">
<div data-role="content">
<div data-role="collapsible">
<h3>This is an item</h3>
<p>
Resume Download
<div id="resultLog"></div>
</p>
</div>
</div>
</body>
Found the answer within Change button text jquery mobile
If you assign $(this) to a variable, then you can reference it in the .text() function as shown below:
$(document).ready(function(){
$('.sabPauRes').each(function() {
$this = $(this);
$(this).click(function(event) {
event.preventDefault();
$.ajax({
type: "GET",
url: this.href,
cache: false,
dataType: "text",
success: onSuccess
})
})
$("#resultLog").ajaxError(function(event, request, settings, exception) {
$("#resultLog").html("Error Calling: " + settings.url + "<br />HTTP Code: " + request.status);
})
function onSuccess(data)
{
// validate the result of the ajax call, update text, change button methods as needed
if (data == "Success") {
alert(data);
$(".ui-btn-text",$this).text("Updated");
} else {
alert("Failed: " + data);
}
$("#resultLog").html("Result: " + data);
}
})
})
First things first. Please stop using jquery ready handler when working with jQuery Mobile. Give your page an id and use pageinit() event instead.
pageinit = DOM ready
One of the first things people learn in jQuery is to use the
$(document).ready() function for executing DOM-specific code as soon
as the DOM is ready (which often occurs long before the onload event).
However, in jQuery Mobile site and apps, pages are requested and
injected into the same DOM as the user navigates, so the DOM ready
event is not as useful, as it only executes for the first page. To
execute code whenever a new page is loaded and created in jQuery
Mobile, you can bind to the pageinit event.
You can save a ref to the clicked button and use it in success and error handlers like this:
$(document).on("pageinit", "#page1", function(){
$(document).on("click", "a.sabPauRes", function(event){
event.preventDefault();
//Save a ref to the clicked button
$this = $(this);
$.ajax({
type: "GET",
url: this.href,
cache: false,
dataType: "text",
success: function (data){
// validate the result of the ajax call, update text, change button methods as needed
if (data == "Success") {
$this.find(".ui-btn-text").text("Updated");
} else {
$this.find(".ui-btn-text").text("Failed");
}
$("#resultLog").html("Result: " + data);
},
error: function(jqXHR, textStatus, errorThrown) {
$this.find(".ui-btn-text").text("Error");
$("#resultLog").html("Error Calling: " + $this.attr("href") + "<br />HTTP Code: " + jqXHR.status + " " + jqXHR.statusText);
}
})
});
});
Here is jsFiddle