I have a PHP page that is pulling data from a MySQL table. One field (content) contains HTML to populate on the page. When trying to insert the record inside of a paragraph tag, the result starts and ends with a paragraph tag, but does not insert correctly as a child element, but as a sibling. Can anyone see the issue here?
HTML/PHP
<?php
foreach ($pages as $page) {
?>
<div class="slide" id="about-content">
<h1 class="pic-title"><?=$page->title;?></h1>
<p class="pic-caption overlay">
<?=$page->content;?>
</p>
</div>
<?php
}
?>
Output HTML:
<div class="fp-tableCell" style="height:419px;">
<h1 class="pic-title" style="margin-left: 25px;">Splash Page 2</h1>
<p class="pic-caption overlay" style="display: block;">
</p>
<p>dfajdfn<strong>akdjfnas</strong></p>
<p></p>
</div>
MySQL Data:
Title: Splash Page 2
Content: <p>dfajdfn<strong>akdjfnas</strong></p>
I can't seem to trace this one. Thanks!
That's to be expected, you're inserting a <p> inside another <p>. You can NOT nest paragraphs, and starting a new paragraph while inside a paragraph will terminate the earlier one.
e.g.
<p>foo
<p>bar
<p>baz
will internally generate
<p>foo</p>
<p>bar</p>
<p>baz</p>
In the DOM tree.
You should probably switch to using <div> instead:
<div class="pic-caption overlay">
^^^---
<?=$page->content;?>
</div>
^^^
Related
Using PHP, how do I replace only the paragraphs which are children of a blockquote element? I need to convert these paragraph elements temporarily while I run some other functions, then change them back to "p" "/p" elements once those functions are finished running. (ie. change "p" "/p" to "ptemp" "/ptemp" or something like that.)
Here's a sample of my code:
<blockquote>
<div>
<p class="replace-this-element">Some Text</p>
</div>
</blockquote>
<p class="do-not-replace-this-element">Some Text</p>
<p class="do-not-replace-this-element">Some Text</p>
<blockquote>
<div>
<p class="replace-this-element">Some Text</p>
</div>
</blockquote>
<p class="do-not-replace-this-element">Some Text</p>
<p class="do-not-replace-this-element">Some Text</p>
<blockquote>
<div>
<p class="replace-this-element">Some Text</p>
</div>
</blockquote>
Edit: Thanks for your questions, here's some more information. . . I'm altering the rendered markup for the content field of a drupal node using PHP so it's happening server-side. I'm inserting code after the 4th paragraph which needs to be inserted before the DOM is built in the client's browser, so can't use js or jQuery for this. I need to ignore the paragraphs nested in blockquotes so that the code is not embedded within the blockquotes.
My thought was to change the p elements within the blockquotes so that these are ignored when inserting the new code after the 4th paragraph. Then change them back to p elements once the code is inserted. But there certainly may be a better way to ignore the nested p elements.
Following is the code which calls and alters the markup via the drupal template.php file:
<?php
function mytheme_preprocess_node(&$variables) {
$codeToInsert = '<div>A bunch of stuff to add after the 4th paragraph.</div>';
$contentToAlter = $variables['content']['body'][0]['#markup'];
$contentToAlter = explode("<p>", $contentToAlter);
$contentToAlter[3] .= $codeToInsert ;
$contentToAlter = implode($contentToAlter, "<p>");
$variables['content']['body'][0]['#markup'] = $contentToAlter;
}
Your question is very vague so its hard for me to come to a conclusion on what it is you're exactly after but this works.
Using JQuery it changes the replace-this-element and converts it to a h1 (I did this because you specified that you wanted to change these elements to ptemp but ptemp is not an element recognised by html) and then it swaps it back. If you run the snippet you won't be able to see anything happen because the othermethod() doesn't have anything inside it.
replace_elements();
other_method();
replace_elements_back();
function replace_elements() {
$("blockquote div").html('<h1 class="replace-this-element">Some Text </h1>');
}
function other_method() {
}
function replace_elements_back() {
$("blockquote div").html('<p class="replace-this-element">Some Text </p>');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<blockquote>
<div>
<p class="replace-this-element">Some Text</p>
</div>
</blockquote>
<p class="do-not-replace-this-element">Some Text</p>
<blockquote>
<div>
<p class="replace-this-element">Some Text</p>
</div>
</blockquote>
I'm finding that placing php code snippets within my website's & tags is causing a problem with the code after it's placement. I first noticed it when placing avatars on my site in a list format where it works fine up to a point and then the same image is repeated for the rest of the list. Here is the code that I'm uisng for that:
<?php
$show_user .= "
<div class=\"section\">
<div class=\"sectionInner\">
<div class=\"searchAvatar\"><img class=\"searchAvatarSize\" src=\"uploads/avatars/$member_avatar\"></div>
<div class=\"searchInformation\"><div class=\"searchInformationPrimary\">$member_name</div><div class=\"searchInformationSecondary\"><i>"$member_summary"</i></div></div>
<div class=\"searchInformation\"><div class=\"searchInformationPrimary\">$member_subtype $member_type</div><div class=\"searchInformationSecondary\">$member_city, $member_county</div><div class=\"searchInformationThird\">View Details</div></div>
<div class=\"clearLeft\"></div>
</div>
</div>
<div class=\"searchResultSplitter\"></div>
";
?>
<?php echo $show_user; ?>
I'm now noticing it when placing php within my navigation bar where it's not closing the tag. Here is my code for the bar:
<div id="pageSubNavigation" class="page<?php echo $thispage; ?>SubNavigation">
Next Page
</div>
After this, all of the other tags show the same link. Any ideas why this might be?
You need to either jump out of the HTML to add the variables or wrap them in {} so they appear correctly.
Example:
<div class=\"searchAvatar\"><img class=\"searchAvatarSize\" src=\"uploads/avatars/".$member_avatar."\"></div>
or
<div class=\"searchAvatar\"><img class=\"searchAvatarSize\" src=\"uploads/avatars/{$member_avatar}\"></div>
Check out this article about string formatting with variables in PHP.
I would like to append some html to a div when a button is clicked. The only thing that needs to be dynamic about it is that it needs to have a different id the the otherwise identical html above it. So if I have a structure like this:
<div id="container">
<div id="div1" class="inner">
<p id="P1">Some content</p>
</div>
<div id="div2" class="inner">
<p id="P2">Some content</p>
</div>
</div>
and to the end of container i would like to append
<div id="div3" class="inner">
<p id="P3">Some content</p>
</div>
What would be a good method to store this HTML? Keep it all in a php page and post the number the new div's id should be incremented to? Or is is smarter to put the html inside a string, and have a regular expression increment all of the numbers. Or is there some incredibly obvious way to do this that I've completely missed.
Jquery is an option, as that's already on the page.
Also, if this question seems too open-ended, please let me know in the comments how I can change it before closing it.
Thank you very much.
Based on your answers to comments so far (i.e. that the id's aren't really important, and that you will have input elements in the content), I would say that you would want to redo your html to look like this:
<div id="container">
<div class="inner">
<p><input type="text" name="order_item[]" value="" /></p>
</div>
<div class="inner">
<p><input type="text" name="order_item[]" value="" /></p>
</div>
</div>
Note there are no longer id's and I have used array notation for your input elements such that they will be posted as an array to the receiving script (eliminating the need to increment counters in javascript or parse different posted variable names into a usable array in PHP on the server).
And then use something like this in jQuery
$('#button_id').click(function() {
$('#container > div.inner:last').clone().val('').appendTo('#container');
});
Put the HTML you want to add each time into a hidden div, then use jQuery to copy and add that to the relevant location. For instance:
<div id="appendContents" style="display:none;">
<div class="inner">
<p id="P3">Some content</p>
</div>
</div>
then jquery:
var shownDivs = <?php echo $numberOnScreenFromBeginning;?>;
$('#theButtonYouWantClickable').click(function()
{
var newContent = $('#appendContents').clone();
newContent.$('div.inner').get(0).id = 'div'+shownDivs;
newContent.$('div.inner p').get(0).id = 'P'+shownDivs;
// Where does P content come from??
shownDivs++;
$('#container').append(newContent);
});
Try this Please: Working Demo http://jsfiddle.net/eNXmr/
In the code below it will calculate the lenght of the div hence dynamically set the id as 1, 2, 3, and beyond.
Hope it fits you need :)
API used: http://api.jquery.com/append/
Code
$('#hulk').click(function() {
alert("Total div inside ==> " + $('#container').find('.inner').length);
var next_num = parseInt($('#container').find('.inner').length) + 1;
$('#container').append(' <div id="div' + next_num + '" class="inner"><p id="P' + next_num + '">Some content</p></div>');
});
HTML
<div id="container">
<div id="div1" class="inner">
<p id="P1">Some content</p>
</div>
<div id="div2" class="inner">
<p id="P2">Some content</p>
</div>
</div>
<input type="button" value="Click hulk" id="hulk" />
I have a HTML file that I'm trying to parse. It has a bunch of DIVs like this:
<div class="doc-overview">
<h2>Description</h2>
<div id="doc-description-container" class="" style="max-height: 605px;">
<div class="doc-description toggle-overflow-contents" data-collapsed-height="200">
<div id="doc-original-text">
Content of the div without paragraph tags.
<p>Content from the first paragraph </p>
<p>Content from the second paragraph</p>
<p>Content from the third paragraph</p>
</div>
</div>
<div class="doc-description-overflow"></div>
</div>
I tried this:
foreach($html->find('div[id=doc-original-text]') as $div) {
echo $div->innertext;
}
You notice that I directly find the doc-original-text but I also tried to parse from outer divs to inner divs.
Try This,
foreach($html->find('div#doc-original-text') as $div) {
echo $div->innertext;
}
This is the problem: The script I use stops looking at the first tag.
I'm sceaping a website, and this is the part of the site I want to 'extract'.
<div class="i-want-this-div">
<div class="annoying-sub-div">
Bla bla bla
</div>
<div class="annoying-sub-div">
etc...
</div>
<div class="annoying-sub-div">
</div>
<div class="annoying-sub-div">
</div>
<div class="annoying-sub-div">
</div>
</div>
I want to display all those 'annoying'(because they mess up the function of the script by being there) divs on my site, but how do I do this?
This is my current approach: get the position of the first tag, get the position of the closing tag and subtract that part form the entire string that holds the whole website source.
$startPos = strpos($siteIAmScreaping, '<div class="i-want-this-div">');
$endPos = strpos($siteIAmScreaping, '</div>', $startPos) + 8;
$annoyingDivs = substr($siteIAmScreaping, $startPos, $endPos-$startPos);
The problem is: I want it to stop on the main divs closing tag and not on the first closing tag it finds.
Use DOMDocument for stuff like this.
Use querypath (or phpquery) for simplicity. You can then extract the <div> content by class or id most easily:
print htmlqp($page)->find("div.i-want-this-div")->html();
Are you saying to want to show the actual code? If so put your code inside the pre tags.
<pre></pre>
Everything within will remail formatted and all tags/code will be visible.