How to make $.get() data available to js? - javascript

I am using $.get() to load new content into a div. The content includes a list, each row having a title and a hidden description.
I have a separate jquery call that is meant to toggle the hidden div for each row when clicking on the title, which works fine when the data already exists (default content loaded with the page), but when it's dynamically replaced with a $.get() call, the divs then seem to become invisible to the command..
Any ideas? Do I need to somehow get javascript to refresh it's version of the DOM?
TY

Try this instead. This will bind elements that are inserted after the page loads:
$(".show_link").live('click', function (e) {});
The way you are binding the command it only happens when the page loads, so it will only bind those elements that match the selector at the time the page loads. Since you are inserting the markup after the page loads, jquery does not know those elements exist and therefore not wired to your function. Like I said above, try using .live() instead.

The DOM should update automatically. Are you sure the content you're loading has the appropriate Ids?
Try manually browsing to the URL used in the AJAX call and compare what you get with what's originally in the page. It's also possible you're retrieving spurious tags (html, body, etc) which may interfere with your JQuery selector

Related

Executing external JS using innerHTML and appendChild

I've been playing around with the Material Design Lite library that Google just launched a few days ago, but have some questions, specifically on how to initiate (or execute?) external JS when the HTML changes using innerHTML and appendChild.
See the first example here. As you can see, the HTML for the menu is already within the HTML file when it is first loaded so the menu works fine.
But in this example, the HTML of the document is modified using JS. However, the menu does not work anymore because the script is not executing, I think.
How can I resolve this issue? What's a better way to achieve this result? I'm a newbie when it comes to JavaScript.
You will need to attach the proper event listener from the library. With this change (adding componentHandler.upgradeAllRegistered(); after appending the item) it should work:
document.body.appendChild(menu);
componentHandler.upgradeAllRegistered();
When the menu button is inserted dynamically (when the user clicks), it doesn't get assigned the event listeners to show the menu. I'm guessing that the material design library parses the HTML when it (the library) gets loaded (since you're loading it at the bottom of your HTML document). Since it's already loaded by the time the user clicks, it doesn't check the new element that has been inserted and can't assign it the event listeners.
If this is the case, you'll need to find a way to get the library to recognize your new button.

Deleting completely a html element

I am aware of .remove() , I am using it and its working fine, I mean its removing the element which I want. But I think it doesn't removes it permanently. On right clicking in browser window selecting View page source I am still able to see those removed elements.
I want to remove them completely or say permanently.
Please help.
.remove() removes them completely. The reason you still seem then in the view page source is because the page source does not change based on javascript. The page source shows how the page originally looked when it was first loaded, not how it currently is.
If you look in the developers console, you will see that they are no longer there.
Likewise, if you dynamically add a new element with javascript/jquery, it will not show that element in the page source.
Page Source and DOM are two different different things, whenever you edit the elements or remove them it get removes from DOM and not from page source. That means The javascript manipulate the DOM not the source which come from the server.
DOM: The Document Object Model (DOM) is an application programming interface (API) for valid HTML and well-formed XML documents.
The view source always shows the content came from the server initially without any modification. Use DEVELOPER CONSOLE in browsers to see the live DOM manipulation.
Note: Press F12 to enable console on major browser
view source render the code within the page that you have written(static)
for dynamic changes/view inspect the elements tab in developer tools.
View page source shows the content of the original HTML file, as returned by the HTTP server. The DOM can be altered with javascript, but the source will not change.
You Cannot permenantly remove the dom elements using jquery or javascript. .remove() is totally different from your logic. just it removes temporary hide from the dom elements suppose you refresh the page it comes again it is jquery magic.

Get HTML from a hidden portion of code in a page

The title is a little confusing so let me explain better what the problem I'm having is.
I need to extract a certain portion of HTML out of a page. This portion of code is inside of a div that "on page load" is hidden by default. You have to click on that div in order to make that portion of code appear.
Now, I need to get this code with a javascript/jquery script with either pure AJAX request to the page or YQL but the problem is: How do I "simulate" the click on that div?
How can I make that div toggle just with the code in order to access the code inside of it?
By the way, the request is from the same domain so there's no problem with cross-domain AJAX.
Thank you!
You can use Jquery .click
$("#Id_Of_the_Div_you_want_to_click").click();
As far as my understanding is if you do
$('#hiddenElementID').html() will return the contents of it or even $('#hiddenElementID').text() if its hidden or not.
But if you really must simulate a click then do $('#hiddenElementID').click()
And to toggle use your own function and do $('#hiddenElementID').hide() and $('#hiddenElementID').show()
Or use $('#hiddenElementID').toggle()
http://api.jquery.com/toggle/
Maybe you should try on Ajax success:event
function(data){
//Convert Data to jQuery Object
var element = $(data);
element.find('#HiddenDiv').show();
}
Because manipulating DOM Element's triggering Fake Event's is a bad idea.
You can simulate click events like so:
$("#div").click()
It sounds to me like you're trying to get data from another page. The data is compiled after a click event. You could try the following:
AJAX get the page with the required data
Render the page into a hidded iframe within your page
Simulate click events on the nested page to produce data
Access the bits you want and discard the iframe contents.
If I get some time later I'll try it out for myself and see if it can be done.

Cloning a node duplicates events

I have a DOM fragment on page that I need to display in an overlay.
Using YUI I replace the node and then placing a clone in the overlay with the following line of YUI code:
var overlayContent = content.replace(content.cloneNode(true));
The issue I am experiencing is that now the content seems to send multiple AJAX calls to the server. So when a user clicks a button to increment an item then multiple sets are added instead of singular items and seems to work in multiples of two.
Being new to YUI I am not sure how to prevent this from happening and would appreciate any steer as to prevent this.
It is not good idea to clone a node while setting the body content of a YUI overlay. You should pass plain markup (which you can get using getHTML() method) as the body content of the overlay.
We decided to re-engineer the existing implementation and not using cloning at all.
Instead we pulled the existing fragment from the DOM into the overlay and then on overlay close put it back from where it came.

Problem getting Javascript variable to hidden input value

I'm trying to create a system where you can drag and resize divs (jquery ui) and then save the positions and sizes to a css file.
I already got the system working with one div, but now that I tried to update the system to support multiple divs, I ran into a problem.
The source: http://ezmundorf.110mb.com/problem.txt (It's ugly, but I'm pretty much just trying out how stuff works).
When I click the #update div the page goes blank and source for the page is only the form starting tag. The page is trying to do something since firefox is displaying the loading graphic.
If I remove the line the that writes the hidden input fields, I get to see the save button, yet still there's something wrong with the javascript since browser just keeps doing something.
I'm sorry for posting such a "fix this code for me" question here, but I don't know how to explain it without whole code and I couldn't find answer anywhere.
You can't use document.write after the page has finished loading without it overwriting the whole page, as you're seeing.
You should use .innerHTML on some container, for example:
$('myDiv').innerHTML = '<form>...</form>';
or use DOM methods:
var form = document.createElement('form');
var body = document.getElementsByTagName('body')[0];
body.appendChild('form');
You can't use document.write after the page has finished loading (e.g. in an event handler, including $(document).ready). Instead, you can use the jQuery method .html(val) to change the contents of an existing element, or insert new elements into the DOM with the other jQuery manipulation methods.

Categories

Resources