How can I fix problem with jQuery function ".css" which works only when it is triggred by user (console, button, ...) ?
I'm using interval in .ready function for trigger it but it dosn't work. However .html function is changing the text properly.
$(document).ready(function()
{
setInterval(function()
{
$.get("./getData", function(data)
{
$(".text").html("" + data + " %");
$(".circle").css("border-width", "" + data + "px");
});
}, 1000);
});
Other border properties specified properly? Border color and weight? Its working fine when specified.
Your code looks fine, make sure data is numeric value and you have element with class name circle
jsFiddle
Try to call this function on window.onload.
<script>
function testFunction()
{
setInterval(function()
{
$.get("./getData", function(data)
{
$(".text").html("" + data + " %");
$(".circle").css("border-width", "" + data + "px");
});
}, 1000);
}
window.onload=testFunction;
</script>
Related
This is an extension to this question How to get value from nested HTML tag with Jquery/Javascript
When I execute the following script after the first time, the <h2>-tags get duplicated multiple, though I only want the three values displayed...
so my question is, what is going wrong here?
$(document).ready(function () {
$('.submit').on('click', function () {
$('#newLoanDiv').append('<div id="test"></div>');
$('.results-page').contents().appendTo($('#test'));
setTimeout( function(){
$('.submit').removeAttr('disabled');
$('.sums').find('dl').each(function () {
$('<h2 class="value">' + $(this).find('dd').text() + '</h2>').insertBefore('#test');
});
}, 100 );
});
});
Any help is appreciated...
Try the following. Try $('#test').empty(); to clear data of the #test on every click.
$('.submit').on('click', function () {
$('#newLoanDiv').append('<div id="test"></div>');
$('#test').empty();
$('.results-page').contents().appendTo($('#test'));
setTimeout( function(){
$('.submit').removeAttr('disabled');
$('.sums').find('dl').each(function () {
$('<h2 class="value">' + $(this).find('dd').text() + '</h2>').insertBefore('#test');
});
}, 100 );
});
I'm using the following code to get data refreshed every 2 seconds in 2 different div's
<script type="text/javascript">
function refreshTable(divId, typeId, serverDesc){
$.get('getServerData.php?vTypeId=' + $(typeId).val() + '&vServerDesc=' + $(serverDesc).val(), function(data){
$(divId).html(data);
window.setTimeout(refreshTable, 2000)})
}
$(document).ready(function(){
refreshTable("#Servers1", "#hdnTypeId1", "#hdnServerDesc1");
refreshTable("#Servers2", "#hdnTypeId2", "#hdnServerDesc2");
});
</script>
I'm getting the correct data for the different div's but the refresh is not working.
In the hdnTypeId fields and hdnServerDesc fields the correct data is passed through but the refresh is not working.
your are making a callback to refreshTable without parameters, change
window.setTimeout(refreshTable, 2000)
to
window.setTimeout(function(){refreshTable(divId,typeId,serverDesc);}, 2000)
You can pass a function as the first parameter to window.setTimeout like this:
<script type="text/javascript">
function refreshTable(divId, typeId, serverDesc){
$.get('getServerData.php?vTypeId=' + $(typeId).val() + '&vServerDesc=' + $(serverDesc).val(), function(data){
$(divId).html(data);
window.setTimeout(function() {
refreshTable(divId, typeId, serverDesc);
}, 2000)})
}
$(document).ready(function(){
refreshTable("#Servers1", "#hdnTypeId1", "#hdnServerDesc1");
refreshTable("#Servers2", "#hdnTypeId2", "#hdnServerDesc2");
});
</script>
So I'm trying to make a search using a dropdown list, which will show/hide some checkboxes depending on the chosen answer. The problem is that it works perfectly on jsfiddle.net but refuses to load properly on my local machine. I saw a similar post and said something about adding $(window).load(function()) before the rest of the script, but even then it refused to work. I might be doing something wrong so any help is appreciated.
The link for jsfiddle is this: http://jsfiddle.net/CDyZf/66/
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script>
$(window).load(function());
$('.drop-down-show-hide').hide();
$('#dropDown').change(function () {
$(this).find("option").each(function () {
$('#' + this.value).hide();
});
$('#' + this.value).show();
});
</script>
The argument of load() needs to be a function.
load(function()) would pass it the return value of calling a function called function, if function wasn't a reserved word making it a error.
function init() {
$('.drop-down-show-hide').hide();
$('#dropDown').change(function () {
$(this).find("option").each(function () {
$('#' + this.value).hide();
});
$('#' + this.value).show();
}
$(window).load( init );
$('#save').click(
function(){
alert('run');
update_form('get_form','main_content',true);
}
);
hi,i got a problem in my program..... please help me T.T.
above function is not run. i think the clue should be here.
$.ajax({
......
$('#' + divtoupdate).html("<input type='submit' id='save' name='save' value='Save'/>");
})
all ajax part is ok, i think is because dom problem?,
the click() is created before i run the ajax.(i have the action before i got the input) is this causing click function malfunction. any solution for this problem ^^ thx
You should use jQuery live
Yes..for the click function on 'save' button to work...it should be present when page is loaded...try running click after ajax function..it should work fine then..
Even Live function will work --- It will take care of element even if it is added in future.
$('#Save').live('click',function(){
//ur code here
});
But Live will not work on older browsers.
You need to use $.live to workout event handling on elements added dynamically.
$('#save').live('click', function(){ ... });
I think what you are trying to say is that the first bit of code won't work because the second bit of code hasn't run yet. This second bit of code adds the HTML which the first bit works upon.
In which case, try the live() function instead of click()
You need to add the click handler after the object is created. You could just add your existing handler code to the ajax success, after the line where you create the #save element.
Yeap, try putting your $('#save').click inside your ajax callback function.
$.ajax({
......
$('#' + divtoupdate).html("<input type='submit' id='save' name='save' value='Save'/>");
$('#save').click(
function(){
alert('run');
update_form('get_form','main_content',true);
}
);
})
try out this...add the function after you add the actual element...
$.ajax({
......
$('#' + divtoupdate).html("<input type='submit' id='save' name='save' value='Save'/>");
$('#save').click(
function(){
alert('run');
update_form('get_form','main_content',true);
}
);
})
$(document).ready(function() {
var waterVolume
function initialFill(){
waterVolume = Math.floor(Math.random() * (150000 - 50000 + 1)) + 50000
initialWidth = $('.resizable_tank').width()
initialHeight = $('.resizable_tank').height()
stabilizeWaterPipe(initialWidth,initialHeight)
}
function stabilizeWaterPipe(currentWidth,currentHeight) {
stableHeight = $('.resizable_tank_pipe').offset().top + $('.resizable_tank_pipe').height() + 8
$('.stable_tank_pipe').css({height: (stableHeight-400)+"px", bottom: "-"+(stableHeight-400)+"px"})
stabilizeCalc(currentWidth,currentHeight)
}
function stabilizeCalc(currentWidth,currentHeight) {
stableTankWidth = $('.stable_tank').width()
stableTankHeight = $('.stable_tank').height()
increasedHeight = parseFloat(currentHeight - stableTankHeight)
// im getting problem here with filling and make equal levels of water in both the cylinders would u pls help me with some code .
}
$('.resizable_tank').resizable({
handles: 'e,s,se',
maxWidth: 800,
minWidth: 180,
minHeight: 400,
resize: function(event, ui) {
var currentWidth = ui.size.width;
var currentHeight = ui.size.height;
stabilizeWaterPipe(currentWidth,currentHeight)
}
})
initialFill()
});
I'm trying to use AJAX to dynamically generate a JquerUI Accordion based on what is selected in a box. Currently I have
<div style="display:none" id="testselect">
</div>
With JS
$("#courseselect").change(function () {
$("#testselect").html(""); // Empty any previous data
$("#testselect").css("display", "block"); // Display it if it was hidden
$.getJSON('json.php?show=tests&courseid=' + $(this).val(), function(data) {
for(x in data)
{
$("#testselect").append("<h3 value=\"" + data[x].uno + "\">" + data[x].name + "</h3>");
$("#testselect").append("<div>Foo</div>");
}
$("#testselect").accordion({ change:function(event, ui) { courseid = ui.newHeader.attr("value");
} });
});
});
Now this works the first time I change my selection, but after that it reverts to plain old unformatted HTML. As if the call to .accordion() was never done. I'm guessing this has something to do with JQuery not wanting me to format something twice, but I really have no idea.
Try to destroy the accordion before you empty the div and start again:
$("#courseselect").change(function () {
$("#testselect")
.accordion("destroy")
.empty() // equivalent to .html("");
$.getJSON(...
More info here.
Good luck!