I'm having a few problems with jQuery/AJAX and was wondering if anyone could point me in the right direction!
I have an AJAX request on my page that populates a div (call it with div 1) with a select box. Also contained is another DIV (call it div 2). After selecting an option from the select box and clicking a button, I then want to populate div 2 with some extra information. However, when I try to do this, it appears that jQuery is trying to load div 1 with the new information. When I use chrome to inspect the element, I can see that when the button is clicked that div 2 is removed for some reason. Can anyone advise?
Not really possible to answer this question without seeing your code, but here is another SO question that discusses how to populate <select> control B, based on the contents of <select> control A.
Three Ajax examples (look at the last one)
Related
Ok, so the weirdest thing happened here.
I have a php file with Javascript to write onto elements based on events on the webpage.
And there are 3 html forms on the page. One is a searchbox, one has all inputs hidden and gets submitted on a certain event, and one is a textbox and a button on clicking which the javascript writes the text to a certain element in the page.
Also, this third form is itself written onto the document by the javascript on clicking another button.
The problem is, while doing certain operations with this third form, i need to reference one of its inputs values (newSkillName).
So for this third form, In Chrome-
document.forms[1].newSkillName.value
works,
while in Firefox-
document.forms[2].newSkillName.value
works.
I, however, managed to fix the code. But i'm still curious. Why did Chrome and Firefox process the abnormality differently?? Any idea?
Give the form elements unique ID attributes and reference them with document.getElementById(id).
You could also use the NAME attribute and reference the form by name document.forms["name_of_form"];
The quick workaround/copout fix is to hunt down the field in the DOM a diffferent way. For example, with id='NewSkillName' use document.getElementById('NewSkillName').value.
I am playing with things here above my head but am desperately trying to learn.
I have an administration page, using jquery I display a hidden div that displays a another page inside.
I do this using:
$(document).ready(function(){
$("a#fadeoutblog").click(function(){
$("#page").fadeTo("slow",0.25)
$("#terms4").fadeIn("slow")
$("#back2").fadeIn("slow")
$("#terms4").load("blogpageload.php")
}); });
So terms4 is the div on the admin page and it diplays the page blogpageload.php!
On this page is a table that displays all the posts of a really simple blog, 'a' delete post a tag and an approve post 'a' tag (which just sets the approved column to 'Y' in the database). What i want is for the page inside this div to refresh when a post in the table is deleted(or the delete 'a' tag is clicked). The problem is that when you click on the delete 'a' tag we are sent to the ammendblogdatabase.php page first so that the post can be deleted!.
I have tried multiple methods but they all have problems!
The main part that is causing problems is that to view this div that contains a page the user must first click on another a tag that uses a jquery to stop the 'display: none;'.
Im not sure what code you may need to see but please ask....
This is the information in the table cell with the delete button:
echo "<a id='refreshblog' href='deleteblogentry.php?username=".$usn."&timeleft=".$tml."'>Delete</a>";
Thank you!
The problem you're most likely having is binding to "future" elements (e.g. elements that will be on the page, but aren't yet). To overcome this, you can use .on() to avoid this.
$('#terms4').on('click','a',function(){
// will bind to anchor elements in #terms4 at the time of execution
// (most likely page ready) and look for future anchors added (in
// the case of .load() completing)
});
From there, you can bind your own show/hide event, maybe call an ajax method that deletes the entry behind the scenes, and make a re-call to .load again and refresh the page.
I am using ajax to grab two pieces of text from a seperate script with jQuery. I have done the check and the script correctly sends the infomation to the original php page.
I have a div container that holds the tags with the text in them. These <p> tags have a class name of summary_text.
<p class='fight_summary_text'>a random piece of text</p>
The first <p> tag is populated with information when the php page loads. When a button is clicked, the jQuery is fired off and two more pieces of information should follow:
$(".summary_text:first").before(data.message_one).slideDown(750, function() {
$(".summary_text:first").before(data.message_two).slideDown(750);
});
The problem I am having is that the first piece of information is inserted correctly on the page. It slides down and works fine, but the second piece of information does not appear.
However, that alone is not the problem. If I click the button a second time, both pieces of text appear correctly one after the other.
Does anyone know what is causing this? As I can't seem to locate the problem as it works when the button is clicked a 2nd, 3rd, 4th time etc.
I'm not sure if i understood your requirements correctly, but I tried and put together a fiddle. The problem I saw was the order of the statements.
So I am wondering the best way to go about this and thought I'd get some input.
I have information boxes with close buttons on them. I am currently using jquery to hide the boxes.
The problem is, if the user closes the information box, I would like the box to stay closed forever.
I imagine I need to set up a table in the database to know whether to show the div or not. I would also like to use AJAX on the click of the close button to send the data to the database.
Would this be the best solution? Thanks in advance
tag each div with a specific class
$('div.class').live('click', fncAddClick); // this is in case you do lazy load
function fncAddClick(e) will call an ajax function to to mark it for deletion, then after the ajax is done on .success(), have it remove the div.
When you click on close button on the information boxes, they just hide from browser but not removed from html dom element.
If you want to remove permanently from html dom then you have to use following code..
If the information box id is "informationBox" then it will accomplished by
$("#informationBox").remove();
Try this, hope this will help..
I am looking for a way to make all visible objects in a webpage selectable by a visitor.
For example, I take google's homepage as source, my php script already gets the homepage, and stores everything in an array.
Now I want to show the google homepage with every object (span, div, body, td etc...) selectable.
My visitor will select a few objects and then click submit (form post)
I do not know how to do this, even after searching dhtml and so ..
Thansk for your help
Mykeul
Parse the html page, if the actual element has an ID, just store, if not set an ID.
When you have all ID-s set a border for each element
Set an onClick, onMouseOver event handler
Handle clicking
Finally post the select element's id
Jquery would help you.