I have an unordered list with no list items.
I get some information from the user, I run it through my database using AJAX and the servers sends back a JSON object response.
Then I append each list item I want to display to the list using something like
$('blabla').append('<li>information</li>')
My question is, since the li elements were not there at the time the DOM was ready, how can I bind a click event to them?
Here is my full code:
$(function(){
var timer;
$('#f').keyup(function(){
clearTimeout(timer);
timer = setTimeout(getSuggestions, 400);
});
})
function getSuggestions(){
var a = $('#f')[0].value.length;
if( a < 3){
if(a == 0){
$('#ajaxerror').hide(300,function(){
$('#loading').hide(300,function(){
$('#suggest').hide(300)
})
})
}
return;
}
$('#loading').slideDown(200,function(){
$.ajax({
url: '/models/AJAX/suggest.php',
dataType: 'json',
data: {'data' : $('#f')[0].value },
success: function(response){
$('#ajaxerror').hide(0,function(){
$('#loading').hide(100,function(){
$('#suggest ul li').remove();
for(var b = 0; b < ( response.rows * 3); b = b + 3){
$('#suggest ul').append('<li>'+response[b]+' '+response[b+1]+' '+response[b+2]+'</li>')
// MISSING SOME CODE HERE TO BIND CLICK EVENT TO NEWLY CREATED LI
}
$('#suggest').show(300)
})
})
},
error: function(){
$('#suggest').hide(0,function(){
$('#loading').slideUp(100,function(){
$('#ajaxerror').show(300)
})
})
}
})
})
}
As I've come to understand using $('.whatever').click() only works for items created initially. Additional items won't respond in the correct fashion. I was then directed to using something like $('.whatever).on('click', myFunction()). However, I'm not detecting any difference, as newly created items are not called.
Here is a JSFiddle demonstration my example code: http://jsfiddle.net/atrus6/zaKZN/
My initial input plus 'Kill' will work in the correct fashion, however any additional 'input + kill's will not not do anything. Am I incorrectly using .on() or is it something else?
How to add "Back to top" link at bottom at is browser window is shorter than page, using jquery?
<div id="mainContent">
<p>Some content</p>
</div>
If some content is bigger than browser window ( I mean if vertical bar comes on the page)
then i want to add Back to top just before closing the div.
<div id="mainContent">
<p>Some content</p>
<p>Some content</p>
<p>Some content</p>
<a href="#"> Back to top </a>
</div>
I have two separate AJAX calls. One that gets a list of items from a txt file and creates an HTML table out of them and one that talks to a database to find how much each item costs and then lists this in the corresponding table cell for each item (I know this may sound like a strange approach, but it's a good option in our case...).
The issue is that the price is not getting written to the table since the table is created (or to be precise, the rows of the table are created) after the page loads. I'm not sure how to fix this.
$(document).ready(function() {
makeItemTable();
listPrices();
...
});
function makeItemTable() {
$.ajax({
url: 'products.php',
type: 'GET'
})
.done(function(response) {
$('.price-table > tbody').html(response);
})
}
function listPrices() {
.ajax({
url: 'prices.php',
type: 'GET'
})
.done(function(response) {
priceData = $.parseJSON(response);
$('.price-table tr').each(function() {
var item = $(this).find('td:nth-child(1)').text();
if (priceData[item]) {
var price = priceData[item];
$(this).find('td:nth-child(2)').text(price);
}
})
}
Hi All,
I am going through a weird problem while using lightbox .
Where ever the new light box is used user is able to open the same light
box on same page number of time. For e.g
Using tab button go to `Lightbox link`.
Press enter --> Light box will open.
Press enter --> second light box open below the previous one.
and so on.......
The problem is occurred when I use tab and entered on the link my focus is not getting changed from the link and so user is able to open multiple lightbox on clicking enter.
I try following but it not works for me
<a href = '/calenders/add_shipment' onclick ="this.blur()" class='lbOn'>
<img src='/images/box-plus.png' style='border:none;'>
</a>
what should be my approached to get out of this.
> if (((test>=0) && (test<=90)) || ((test>270) && (test<=360))){n_y=1;}
> else {n_y=-1;}
I need the magnitude of trigonometric function in order to determine the sign of the trigonometric function for an angle falling into a particular quadrant.
My plan is to replace the code above with something equivalent.
Here is what I want to do in pseudo-code.
n_y = cos(test) / (magnitude of cos (test));
This will give me same thing. Abs() only takes integers. Any help is appreciated.
Hi everyone!
The concept of what I'm trying to do is fairly simple. I have a grid of company logos loaded through XSLT from an XML document, each with their own unique links to the company profiles.
I have a separate div on the page, essentially a "preview" box. What I want to do is this:
I roll over a logo, and it loads the name of the company and a short description into the preview div. This content is loaded through XML.
I have been messing around with the Jquery load() function, changing the target document to load on Hover—and it almost gets what I want, but it loads the whole target XML document into the div.
How can I separate this target XML data into separate divs? (which I have styled differently)
I'd assume I would make use of Ajax in some way. I want to load the <name> node into the name_div, and the <desc> node into the description_div, and have them update on hover. Thanks in advance for the help!
I need a little piece of advice.
I have a test page with 2 fields: word number and URL
Also i have a button Push.
When i push the button i want to open the specified URL (it's local html files) and highlight the word at the "word number" position
Of course the code must ignore element nodes (<p>,<b>,<table> and so on)
Already checked exisitng questions for this, but didn't find an exact match.
My aim is to replace characters (like spaces) on a webpage with a small image using css.
Example:
<p><span>This is a text</span></p>
becomes:
<p><span>ThisIMGisIMGaIMGtext</span></p>
(where IMG stands for a visible image (middot-pic for a space f.e.))
I cannot think of a suitable css selector. But myabe one of you guys (or girls) know a solution. Is this possible at all?
{"paging": {"pageNum":2,"action":"Next","type":"","availableCacheName":"getAllFunds","selectedCacheName":"","showFrom":101,"showTo":200,"totalRec":289,"pageSize":100},
"Data":[{"sourceCodeId":0,"radio_fund":"individua
l","availableFunds":[],"fundId":288,"searchName":[],"fundName":"Asian Equity Fund A Class Income","srcFundGrpId":"PGI","firstElement":0,"las
tElement":0,"totalElements":0,"pageList":[],"standardExtract":true}]
I have json file with above format with two fileds,one paging and one is Data array.
I able to retrieve values of paging,but i am not able to retrieve the values of data array with .each function of jquery.
Any suggestions or inputs really appreciated.
Heya,
I have just implemented the excellent jQuery UI autocomplete.
http://jqueryui.com/demos/autocomplete/
There is a strange bug in IE 8 (and maybe other versions).
When you select an item from the box of suggestions in IE 8 the cursor moves to the begining of the textbox before the suggested word which has just been inserted.
Firefox put the cursor after the inserted word.
Does anyone know of a fix for this?
Regards
Steve
I am trying to get the following link to work.
<a href='#' onclick='window.open(" | &ESPP_Info_URL | ");return false;'>Employee Stock Purchase Plan Information</a>
Basically the &ESPP_Info_URL variable takes in a url so that the code below looks like...
<a onclick="window.open(https://...);return false;" href="#">Employee Stock Purchase Plan Information</a>
But when I click the url it just refreshes the page. Does anyone know how to get this to access the link within the window.open function?
I got a simple form and it works fine in ie but not working in firefox
onclick="login('loginuser','../private/loginuser.php?username='+email.value+'&pass='+passw.value,'loginresult');"
Any help appreciated.
Hi All,
i am using two frames in a page. Mainframe have a page with text box to get input and gives the result url.
Needs:
I want to show this page in the topframe.
I want to set focus to the text box control in the mainframe always. using the following code but giving null error.
parent.frames['mainFrame'].document.getElementById('form1:txtbox').focus();
<frameset rows="550,0" cols="1008" frameborder="NO" border="0" framespacing="0">
<frame src="" id="topFrame" target="topFrame" runat="server" scrolling="no"></frame>
<frame src="Search.aspx" runat="server" id="mainFrame"></frame>
</frameset>
I'm trying to have the content of the an HTML textbox be selected fully onFocus.
I know the simple solution of putting a onfocus="this.select()" on the component but this is not a good solution because if a user double clicks into the area the selection is lost and in browsers like chrome it is rarely working like it should and just reverts into input form.
I have searched on Google for a little while and can't find a good solution, most suggestions are of this simple solution.
What I would like it is that the selection inside the textbox not change once selected and if possible the user should not be able to edit the content of the textbox, for example if you have used AdSense when you grab code from AdSense the selection never changes and your unable to alter the code in the textbox.
Any solutions would be appreciated.
Hi,
I have a drop down field that if any items of it selected,it would be disabled,after that i submit the form,but then (after submitting) the drop down field dosent have any value, I want to have a value after submit but my drop down field is empty.
Thanks for any help,
(sorry for my English)
I could spike this to find out, but I'm going to use SO. In my unit tests (qunit) I use the asynchShould (alias for asynchTest) test. Part of the assertion is to wait for the completion/success of the request. Like this:
asyncShould('talk to customer list server', 1, function() {
stop(2000);
var forCustomerList = newCustomerListRequest();
forCustomerList.page = 'helpers/helper.php';
forCustomerList.data += '&action=customerListServer&DB=11001';
var originalSuccess = forCustomerList.success;
forCustomerList.success = function(msg) {
if (msg.flash !== undefined && msg.data !== undefined && msg.status !== undefined) {
ok(true, 'json structure correct')
}
else {
ok(false, 'json structure not correct');
}
originalSuccess(msg);
start();
};
testController.getServerData(forCustomerList);
})
I have a classified website, with pretty sophisticated searching, and I am about to implement a function where the last three queries is displayed for the user, so that the user can go back easier through the queries.
This because for each query the user has to provide a lot of input.
I have four questions for you:
I wonder, how can I save the actual query (SELECT * FROM etc etc)...?
Do I need to add some form of encryption to be on the safe side?
How will this affect performance? (I don't like the fact that cookies slow websites down)
Anything else to think about?
If you need more input, let me know...
Btw, the website is PHP based.
Thanks
Hi friends,
document.getElementById(id).style.display ='table-cell'. This gives error message in IE, this is IE bug or any other solutions please give any other solutions.
IE7 doesn't support this property.
this is my coding. Even Firefox and Chrome are accepted. My problem is IE. Please friends give solution...
var cont2 = document.createElement('div');
cont2.style.display = "table-cell";
cont2.style.verticalAlign = "middle";
cont2.style.lineHeight = 100+"%";
cont2.style.padding = 10+"px";
cont2.appendChild(body);
I am using a jquery function to open a dialog box, and I need to be able to change the height and the width of the box. I am wanting to pass it a parameter from within the DIV. I have looked at many different possibilities, but to no avail. Any ideas would be greatly appreciated.
$.fx.speeds._default = 1000;
$(function() {
$("#dialog").dialog({
autoOpen: false,
height: 300,
width: 500,
show: "drop",
hide: "drop"
});
$("#opener").click(function() {
$("#dialog").dialog("open");
return false;
});
});
Here is my Div.
<div id="dialog">
Some text here
</div>
I am writing a Firefox Add-On that currently is depending on jQuery for the following things:
Selectors
Animations
A special .live("focus") hail-mary event-catching maneuver that happens to work with jQuery 1.4.2 (but not 1.4.4)
jQuery isn't well suited for functioning inside XUL, and it's a miracle we've gotten this far with it. We're trying to remove the jQuery requirements, the first two are easy (animations are simple, and we can use .querySelector() instead of jQuery), but the .live has proven impossible to do on our own. I've tried reading the source code, but I haven't been able to piece it apart.
What is the jQuery .live function doing? There's clearly a lot more going on than document.addEventListener("focus"/"focusin",function_to_pick_apart_events). What else is going on here?
IF both methods are declared as virtual, shouldn't both instances of Method1() that are called be the derived class's Method1()?
I am seeing BASE then DERIVED called each time. I am doing some review for an interview and I want to make sure I have this straight. xD
class BaseClass
{
public:
virtual void Method1() { cout << "Method 1 BASE" << endl; }
};
class DerClass: public BaseClass
{
public:
virtual void Method1() { cout << "Method 1 DERVIED" << endl; }
};
DerClass myClass;
((BaseClass)myClass).Method1();
myClass.Method1();
Method 1 BASE
Method 1 DERVIED
var os = $.client.os; // mac
var browser = $.client.browser; // firefox
var browserversion = $.client.browserversion; // 3
$('#root').addClass( os + browser + browserversion );
.. results in <div id="root" class="macfirefox3">. How do I add spaces between them?
sub items of dropdown can be increased and decreased. angle only needed at last item's right bottom corner.
Edit:
I Know how to make dropdown menu and how to give cross browser transparency , my question is about to make transparent dropdown with right bottom angle.