$.post code returns a whole page. how to get content of a id?

Question

Virangya 0 Junior Poster

14 Years Ago

hi,
my $.post code returns a whole page i want to get only content inside a id from that . this is my code it alerts null.
what's wrong with it..?

$(document).ready(function(){
	var url_select_file = "index.php";
 	$.post(url_select_file, { component: "tinymce_details", action: "selecticondata" },
   function(data){
	   //alert(data);
	   alert($(data).find('#ContentPane').html());
   }
   );

javascript:jquery

3 Contributors
11 Replies
1K Views
4 Days Discussion Span
Latest Post 14 Years Ago Latest Post by link_umer

Dani AI

Generated 10 Months Ago

, is right: the easiest fix is to avoid pulling the full layout. You can have jQuery fetch and extract just the fragment you need in one call. No regex needed.

// Put the HTML into an element on your page, not an alert.
$("#target").load("index.php #ContentPane", {
  component: "tinymce_details",
  action: "selecticondata"
});

jQuery will request index.php, slice out only the #ContentPane from the response, and insert it into #target. This sidesteps the doctype/html/head noise that makes $(data) brittle. Also double-check the exact capitalization of the ID.

If you must stick with $.post, parse the string into a real document before querying:

$.post("index.php", { component: "tinymce_details", action: "selecticondata" })
  .done(function(data){
    var doc = new DOMParser().parseFromString(data, "text/html");
    var pane = doc.getElementById("ContentPane");
    $("#target").html(pane ? pane.innerHTML : "");
  });

Because the string becomes a DOM, getElementById is reliable even when the response contains <!DOCTYPE>, <html>, and <head>.

Long-term, lean into ’s suggestion and return a partial from your MVC controller. A common pattern is to detect XHR and skip the layout:

$isAjax = !empty($_SERVER['HTTP_X_REQUESTED_WITH'])
          && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) === 'xmlhttprequest';

if ($isAjax) {
    // echo only the fragment that would live in #ContentPane
    echo $contentPaneHtml;
    exit;
}

// otherwise render the normal full page (layout + view)

This keeps your views reusable, avoids heavy responses, and eliminates client-side scraping entirely.

All 11 Replies

Airshow 425 WiFi Lounge Lizard

14 Years Ago

V,

I expect jQuery chokes on a full document with <!DOCTYPE ...> and a <head> full of metas etc.

Try stripping data down to <body>...</body> before submitting it to jQuery.

Stripping is best done with a regular expression, which you will need to develop or find. Searching the web for "javascript regular expression to find body element" gives plenty of results.

Airshow

Airshow 425 WiFi Lounge Lizard

14 Years Ago

V,

I'm not sure I fully understand.

Are you saying that <!DOCTYPE...> etc. are not served, or that it is served but you don't know how to strip it?

Airshow

Airshow 425 WiFi Lounge Lizard

14 Years Ago

I'm struggling with "later".

Do you mean:

<!DOCTYPE> and <head>...</head> do not appear in data and are therefore not available to be stripped?
<!DOCTYPE> and <head>...</head> appear in data but you don't know how to strip them?

Airshow

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Virangya 0 Junior Poster · Answer 1 · 2011-12-28T16:08:17+00:00

V,
I expect jQuery chokes on a full document with <!DOCTYPE ...> and a <head> full of metas etc.
Try stripping data down to <body>...</body> before submitting it to jQuery.
Stripping is best done with a regular expression, which you will need to develop or find. Searching the web for "javascript regular expression to find body element" gives plenty of results.
Airshow

thanks Airshow for your reply.. i'm doing this with php and MVC as the design pattern. here i echo() results from my query on a page in Model, which is included in the controller and index page is where i view it, all the <!DOCTYPE ...> and HTML code are added later as i load the page,these html codes are with in index.php .
so anyway as far as i know since these html codes are added later somewhere after i echo() my results, i don't think i can edit , process other codes before submitting it to jQuery. :-/

Virangya 0 Junior Poster · Answer 2 · 2011-12-28T21:15:27+00:00

those html codes are added later, i cannot strip it...

Virangya 0 Junior Poster · Answer 3 · 2011-12-30T10:14:28+00:00

it does appear in data.. for example :

<!DOCTYPE> <html> ..<head>...</head>
<body>
<div id='ContentPane'>
</div>
</body>
</html>

results outputtted by my sql are inside this 'ContentPane' .. all the html added in to data is added some where after the sql return data.. these html are found in index.php
Thanx Airshow

Airshow 425 WiFi Lounge Lizard Team Colleague · Answer 4 · 2011-12-30T15:57:03+00:00

OK, the best way to approach this is to handle ajax requests outside the MVC framework such that you have total control over what is returned.

If you can't do that, then try.

$(document).ready(function(){
	var url_select_file = "index.php";
	$.post(
		url_select_file,
		{ component: "tinymce_details", action: "selecticondata" },
		function(data){
			alert($(data).filter('#ContentPane').html());
		}
);

untested

All I have done is to change .find() to .filter() . It may work.

Airshow

Airshow 425 WiFi Lounge Lizard Team Colleague · Answer 5 · 2011-12-30T21:48:04+00:00

V,

I have done some research for you and come to the conclusion that you can stay within the MVC framework by doing what is called "rendering a partial view".

As I understand the term, "partial views" can be used to build common page components for incorporation into whole pages as they are built, or served as ajax responses for incorporation by javascript into a previously-served page. Thus, you can serve an HTML snippet rather than an entire page, which is exactly what you want.

That is as much as I know. For more information, see your framework's documentation or try googling the name of your framework plus "partial view".

Airshow

Virangya 0 Junior Poster · Answer 6 · 2011-12-31T19:31:28+00:00

OK, the best way to approach this is to handle ajax requests outside the MVC framework such that you have total control over what is returned.
If you can't do that, then try.
$(document).ready(function(){
	var url_select_file = "index.php";
	$.post(
		url_select_file,
		{ component: "tinymce_details", action: "selecticondata" },
		function(data){
			alert($(data).filter('#ContentPane').html());
		}
);
untested
All I have done is to change .find() to .filter() . It may work.
Airshow

ok thanks Airshow. i will try this, about partial views, i think i have a clear idea i think i'm not good at describing it, maybe because English is not my mother tongue. So, sorry about any misunderstandings. anyway, thanks a lot for your help! much appreciated! Have a nice New year!!

Airshow 425 WiFi Lounge Lizard Team Colleague · Answer 7 · 2011-12-31T21:22:10+00:00

No worries, your English is fine. I was a little slow to understand but I think I got there.

Good luck and yes, Happy New Year.

Airshow

link_umer 0 Newbie Poster · Answer 8 · 2012-01-01T16:20:14+00:00

how to use ComboBox set value to TextFields and there are more than one text field and every textfield has different value from the other text fields if there is one text field combobox can set the value in it but if there is more than one textfield combobox insert the same value in it

$.post code returns a whole page. how to get content of a id?

Dani AI

Recommended Answers Collapse Answers

All 11 Replies

Recommended Answers