Develop Reference

Javascript image timout

Good day, i'm having a problem with my code, can't get to show the loading image for few seconds, while POST code is getting in database and gives backinformation to show.
$("#poll_vote").click(function(){
var answer = $("input.panswer:checked").val();
var p_id = $("#p_id").val();
$("#poll_load").html("<tr><td align='center'><img src='/images/ajax/ajax4.gif'/></td></tr>");
$.ajax({
type: "POST",
data: "action=poll_vote&p_id="+p_id+"&answer="+answer+"&module="+module+"",
dataType: 'html',
url: "/ajax.php",
success: function(data)
{
$("#poll_content").html(data);
}
});
});
I would hope on your fast help, i'm begginer in java, so can't dicide it myself.

If what you want is to create a delay so the loading animation shows (I believe that is... mmm different, I'm going with that...)
what you need is to set a timeout like so:
setTimeout(function(){ alert("Hello"); }, 3000);
now in your code the function could contain the ajax call:
$("#poll_vote").click(function(){
var answer = $("input.panswer:checked").val();
var p_id = $("#p_id").val();
$("#poll_load").html("<tr><td align='center'><img src='/images/ajax/ajax4.gif'/></td></tr>");
setTimeout(function(){
$.ajax({
type: "POST",
data: "action=poll_vote&p_id="+p_id+"&answer="+answer+"&module="+module+"",
dataType: 'html',
url: "/ajax.php",
success: function(data)
{
$("#poll_content").html(data);
}
});
}, 3000);
});
or be inside the success function, which I believe is better:
$("#poll_vote").click(function(){
var answer = $("input.panswer:checked").val();
var p_id = $("#p_id").val();
$("#poll_load").html("<tr><td align='center'><img src='/images/ajax/ajax4.gif'/></td></tr>");
$.ajax({
type: "POST",
data: "action=poll_vote&p_id="+p_id+"&answer="+answer+"&module="+module+"",
dataType: 'html',
url: "/ajax.php",
success: function(data)
{
setTimeout(function(){$("#poll_content").html(data);}, 3000, data);
}
});
});
I didn't test it, so check if in the second case data can be seen inside the callback function (it should I think...)
Hope it helps.

jQuery load element not working for ajax

I need to preload ajax data before attaching it to a div and for that I have this code:
$.ajax({
url: 'ajax.php',
data: { modelID:id },
type: 'post',
success: function(result){
$(result).load(function(){
$('.view_'+id).html(result)
$('.view_'+id).find('.brandModelGallery').bxSlider({})
$('.view_'+id).addClass('loaded')
})
}
})
And this doesn't return anything. If write it as $('.view_'+id).load(result) then I can see all the contents of result in console as a syntax error so it fetches them alright, but not this way. Why is that?

I've create an example on jsfiddle
Html:
<div id="d1"></div>
<div id="d2"></div>
js:
$.ajax({
url: './',
data: { modelID: '1' },
type: 'post',
success: function(result){
console.log(result);
$('#d1').html(JSON.stringify(result));
// A fake object as your result.
var bxSlider = $('<ul class="bxslider"><li><img src="https://i.imgur.com/KsV6jS5.png" /></li><li><img src="https://i.imgur.com/bqcK47I.png" /></li></ul>');
// Do thing only when all img loaded.
var unLoadimges = bxSlider.find("img").length;
bxSlider.find('img').load(function() {
--unLoadimges;
console.log("loaded, left: " + unLoadimges);
if (unLoadimges === 0) {
bxSlider.appendTo($("#d2")).bxSlider();
}
});
}
})
When you append img element to your page, it doesn't mean its loaded. Listen to its load event.
Edit: Just make the bxSlider works on my example now.
Not sure if there's a better way to check whether all images loaded or not.

Problems with ajax development

I apologize in advance for my bad English.
I have site in development http://plast-pak.esy.es/ on html-coding
With Ajax i called html page into my front page and slider is SlideUp.
<button onclick="clickAlert();" class="clickDown">?????????</button>
<script>
function clickAlert() {
$(this).click(function(){
$.ajax({
type: 'GET',
dataType: 'html',
url: 'item-1.html',
success: function(response) {
$('#projectInformation').html(response).slideDown('fast');
}
});
$('.front-page > #main_wrap').slideUp(3000);
$('.front-page > #menuBar').slideUp(3000);
});
}
</script>
Was callback page with information. It have her own button, witch have to close this page and return front page.
<button onclick="clickAbort();" class="clickUp">????????? ?? ???????</button>
<script>
function clickAbort() {
$(this).click(function(){
$('.front-page > #main_wrap').slideDown(3000);
$('.front-page > #menuBar').slideDown(3000);
$('#projectInformation .full-node').remove();
});
}
</script>
In the end, everything works, how it works. All horrible and very incorrect. Please help me to understand why it all works so. Thanks in advance.

Remove
$(this).click(function(){
from clickAlert and clickAbort. They are already click handlers.
Other than that, you will have to be more specific about "horrible and very incorrect".

$(this).click() is used to setup a handler for the click event of the button, and you're already doing that by setting the onclick attribute in your markup.
The usual way to do this is by giving an id to the button, so that you can set events in the javascript code:
<button id="alert" class="clickDown">Подробнее</button>
<script type="text/javascript">
$("#alert").click(function(){
$.ajax({
type: 'GET',
dataType: 'html',
url: 'item-1.html',
success: function(response) {
$('#projectInformation').html(response).slideDown('fast');
}
});
$('.front-page > #main_wrap').slideUp(3000);
$('.front-page > #menuBar').slideUp(3000);
});
</script>

Thanks everybody for your advices. The problem was solved as follows:
<button id="alert" onclick="clickAlert();" class="clickDown">Подробнее</button>
function clickAlert() {
$.ajax({
type: 'GET',
dataType: 'html',
url: 'item-1.html',
success: function(response) {
...
}
});
...
}
for whatever reason, Slider not given use following code
$("#alert").click(function(){
$.ajax({
type: 'GET',
dataType: 'html',
url: 'item-1.html',
success: function(response) {
$('#projectInformation').html(response).slideDown('fast');
}
});
$('.front-page > #main_wrap').slideUp(3000);
$('.front-page > #menuBar').slideUp(3000);
Only click event in button is working. Thanks again for your advice

.keyup() is only working once, why?

I am using this pretty simple jquery function, but it seems to work only on the first keyup..
$('#cmentuser').keyup(function() {
var mess = document.getElementById('cmentuser').value;
var dataString = 'message='+ mess;
$.ajax({
type: "POST",
url: "atuamae.org/comentbyuser.php",
data: dataString,
success: function() {
}
});
});
any ideas on how to keep it active?

It works, also in the following form (changed mess into jQuery(this).val() and relied on jQuery when encoding the data string):
$('#cmentuser').keyup(function() {
$.ajax({
type: "POST",
url: "atuamae.org/comentbyuser.php",
data: {
'message': jQuery(this).val()
},
success: function() {
// success callback
}
});
});
Proof that it works: jsfiddle.net/xfxPR/
You may be dynamically changing some elements (eg. changing ID or assuming id does not need to be unique), or maybe unbinding the event. Just make sure the event is being attached and stays attached to the element you need.

$(document).on('keyup', '#cmentuser', function(e) {//try to find lower element then doc
var dataString = 'message='+ $(e.target).val();
$.ajax({
type: "POST",
url: "/comentbyuser.php", //no cross domain requests, no need for domain name
data: dataString,
success: function() {}
});
});

try this
$('#cmentuser').live('keyup',function() {
var mess = $(this).val();
var dataString = 'message='+ mess;
$.ajax({
type: "POST",
url: "atuamae.org/comentbyuser.php",
data: dataString,
success: function() {
}
});
});

Setting data-content and displaying popover

I'm trying to get data from a resource with jquery's ajax and then I try to use this data to populate a bootstrap popover, like this:
$('.myclass').popover({"trigger": "manual", "html":"true"});
$('.myclass').click(get_data_for_popover_and_display);
and the function for retrieving data is:
get_data_for_popover_and_display = function() {
var _data = $(this).attr('alt');
$.ajax({
type: 'GET',
url: '/myresource',
data: _data,
dataType: 'html',
success: function(data) {
$(this).attr('data-content', data);
$(this).popover('show');
}
});
}
What is happening is that the popover is NOT showing when I click, but if I hover the element later it will display the popover, but without the content (the data-content attribute). If I put an alert() inside the success callback it will display returned data.
Any idea why is happening this? Thanks!

In your success callback, this is no longer bound to the same value as in the rest of get_data_for_popover_and_display().
Don't worry! The this keyword is hairy; misinterpreting its value is a common mistake in JavaScript.
You can solve this by keeping a reference to this by assigning it to a variable:
get_data_for_popover_and_display = function() {
var el = $(this);
var _data = el.attr('alt');
$.ajax({
type: 'GET',
url: '/myresource',
data: _data,
dataType: 'html',
success: function(data) {
el.attr('data-content', data);
el.popover('show');
}
});
}
Alternatively you could write var that = this; and use $(that) everywhere. More solutions and background here.

In addition to the answer above, don't forget that according to $.ajax() documentation you can use the context parameter to achieve the same result without the extra variable declaration as such:
get_data_for_popover_and_display = function() {
$.ajax({
type: 'GET',
url: '/myresource',
data: $(this).attr('alt'),
dataType: 'html',
context: this,
success: function(data) {
$(this).attr('data-content', data);
$(this).popover('show');
}
});
}