jQuery call load(url) and store content as string - javascript

$('#loadHere').load('https://www.google.com'); - At present, this loads the Google homepage in <div id="loadHere"></div>.
What I would like to do is somehow store that output as an HTML string in a var instead.
Pseudo-code:
var googleString = parseString($.load('https://www.google.com'));
When googleString is output, it would spit out <html>...<head>...<body>...</html>.
Is this possible?
My ultimate intention is to search through the string for a particular id.
Thank you kindly.
Index.html:
<!--snip-->
<script src="https://.... jQuery file"></script>
<div id="loadHere"></div>
<script src="changePage.js"></script>
<!--snip-->
changePage.js
$(document).ready(function(){
$('#loadHere').load('https://www.google.com');
}
[Edit] - Included snippets of the two files.

The load method of jQuery is a shorthand for the jQuery ajax method. The load method executes the ajax method and outputs the result in an element you provide.
Now, what you would want to do is execute a post or get (or essentially an "ajax") jQuery function that has a success callback.
$.get( "https://www.google.com", function( data ) {
var result = data;
console.log(data);
});
See:
https://api.jquery.com/jquery.ajax/
https://api.jquery.com/jquery.get/
https://api.jquery.com/jquery.post/

You could do that upfront with the load method. From the jquery documentation:
$( "#b" ).load( "article.html #target" );
or for your case
$('#loadHere').load('https://www.google.com #specialDivYoureLookingFor');
If you don't want to do that, you could make the .load return a jquery object then search from there.
$($('#loadHere').load('https://www.google.com')).find('#specialDivYoureLookingFor');

Related

AJAX jQuery live comments

I've been trying to get my website to do live comments (so the comments appear without refreshing the page) using AJAX with jQuery (the rest of the code being in PHP and HTML). This is the code I have been using, however it doesen't seem to want to work - comments.php is the file which displays the comments, the $comments being variable for the comments.
<script type="text/javascript">
var int=self.setInterval("showComments()",5000);
function showComments(){
$.post( "ajax_comments.php", function( data ) {
$("#comments).html( data );
});
}
</script>
<script type="text/javascript">
var int=self.setInterval(showComments,5000);
function showComments() {
$.post( "ajax_comments.php", function( data ) {
$("#comments").html( data );
});
}
</script>
https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval
In the setInterval function the first parameter should be a reference to the function, not a string with the name of the function. The string gets executed using the eval() function, which is not recommended and even though it might not be a problem here it is simply best to avoid.

How to call struts action from plain javascript file

This query is related to struts 1.3.
Let's say I have one action called 'getName.do' which is mapped to 'GetName.java' action class. In the dmexecute method of this action class, I am setting one result say String result = Hello;.
My query is how I can call this struts action (getName.do?parameter=value) from one of my javascript files.
Essentially, I want the value of result, which is Hello, to be present in my javascript file through this getName.do?parameter=value call. How I can make this call in my javascript file.
Any help will be highly appreciated.
You can use jQuery ajax for this purpose.
Importing jquery file:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Calling action through jquery ajax:
<script type="text/javascript">
$.ajax({
url : "getName.do?parameter=value",
type : "POST",
success : function(data) {
// You'll get your response here
alert(data);
}
});
</script>
Hope this will help.

Yii renderPartial with external javascript

I have a page view that makes an ajax call and updates the contents of the page with renderPartial.
So page.php -> _pagePartial.php (ajax update)
in page.php I want to include the javascript files once, then have the DOM modifications apply after the ajax rendering happens. It doesn't make sense to have this JS file load on every AJAX refresh.
For example in page.php
$baseUrl = Yii::app()->baseUrl;
$basePath = Yii::app()->basePath;
$cs = Yii::app()->getClientScript();
$cs->registerScriptFile($baseUrl . '/js/jquery.ui.js'); // load one time!
then in pagePartial.php
// every ajax partial load
$('#sortable-list-left').sortable({
connectWith:'.productEntryCol',
placeholder: 'ui-state-highlight',
update: function(event, ui) {
var sortOrderLeft = getSortOrder('sortable-list-left');
var sortOrderRight = getSortOrder('sortable-list-right');
var projectId = '" . $project_id . "';
$.ajax({
data: { left: sortOrderLeft, right : sortOrderRight, id : projectId},
url: '/project/ajaxUpdateOrder',
type: 'POST',
success: function(response){
// process JSON response
var obj = jQuery.parseJSON(response);
}
});
}
});
The problem is after _pagePartial loads via AJAX, it can't use the .sortable() method.
What is the proper way to handle this ?
Thanks
The way I handle this is on the main view on the $.load or $.ajax or whatever it is, add your code on the success function.
So for example:
$.get('_pagePartial.php', null, function(html) {
$('#result').html(html);
$('#sortable-list-left').sortable({
//all your sortable code
});
});
Another option is to add your javascript on your ajax loaded page ('_pagePartial.php') into a function like so:
function firejs() {
$('#sortable-list-left').sortable({
//all your sortable code
});
}
Then on your successful ajax call on your main view ('page.php') simply add this:
$.get('_pagePartial.php', null, function(html) {
$('#result').html(html);
firejs();
});
You can bind to an object until it is added to the DOM and it isn't added to the DOM until the ajax call has finished successfully and the result is added to the DOM.
Also just an FYI yii has jqueryui built in you can simply say:
Yii::app()->clientScript->registerCoreScript('jquery.ui');
Yii::app()->clientScript->registerCoreScript('jquery');
For people like me who has the same issue, even with:
Yii::app()->clientscript->scriptMap['jquery.js'] = false;
in the renderPartial and still not work. I've found another solution, way more effective I think. The easiest solution is to set the 4th parameter of renderPartial.
RenderPartial-detail
public string renderPartial(string $view, array $data=NULL, boolean $return=false, boolean $processOutput=false)
It is about processOutput.If you put it to true, then Jquery will be loaded in your render Partial.
Hope this will help someone...

jQuery AJAX : How to query an returned HTML document

My question is as follows: I have started using the $.ajax function with jQuery and I am wondering how I work with the return of an HTML page. The request completes and I can console.log the returned HTML page however I would now like to select a single element from that page. I have had several attempts which included:
$(data).find('p');
$('button').click(function() {
$.ajax(funciton() {
dataType: 'html',.
url: 'localhost/sw',
success: function(data) {
// This is where I would like to select a element or node from the complete
// returned html document
});
});
I know i can simply use .load() which you can provide select criteria but .ajax is the root function to begin with and I would like to learn that way as well for more complicated queries. Second half of this would be should I not be trying to select elements this way and just serve up json or a single key phrase instead of the entire html page? All help is appreciated.
Just pass the returned HTML to jQuery, and treat it like a regular jQuery collection:
$.ajax({
dataType: 'html',.
url: 'localhost/sw',
success: function (html) {
var paragraphs = $(html).find('p');
// Manipulate `paragraphs` however you like. For example:
$(document.body).append( paragraphs );
}
});
Joseph's answer above is correct if you just want to get the objects.But if you want to load the content of that element, you may change this:
var paragraphs = $(html).find('p');
to
var paragraphs = $(html).find('p').html();
Hope it helps.

load javascript effects after ajax (js column sort for example)

I've found several js table column sorters that work great on regular html content:
http://www.kryogenix.org/code/browser/sorttable/
http://www.allmyscripts.com/Table_Sort/index.html#how_to_use_it
The first one works by assigning a class to a table. The second by passing the id of the table to a js constructor.
I'm using jQuery to handle my ajax request: (the commented code is my attempt at constructing after the ajax loads. It didn't work.)
$("#the_table").load('../ajax/handler.php', {action: 'songs'}, function(){
//var TSort_Data = new Array ('my_table', 's', 's', 'd');
//tsRegister();
});
No errors. The data populates properly. The static html matches the ajax html.
Any ideas?
The first script runs the init method when the DOM is ready, so to call it after your AJAX loads just call init again.
$("#the_table").load('../ajax/handler.php', {action: 'songs'}, function(){
sorttable.init();
});

Categories

Resources