I have one form which is submitting by ajax.
I am running on php.
After the entry completed by ajax, that entry should be updated to my html.
For example
My HTML Code
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
Now when any one insert new entry with 5, then my html should be updated with below HTML.
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
Thanks in advance.
Avinash
Using the "dollar" function to select and extend the UL, then using one of MooTool's Element methods to insert the new LI will probably work.
http://mootools.net/docs/core/Element/Element#dollar
http://mootools.net/docs/core/Element/Element#Element:inject
I have done it my own.
Please check the below code for the answer.
// Select UL to append
var commentUL = $('comment_ul');
//Create new li to insert
var commentnewLI = new Element('li', {id: 'myFirstElement'});
// Append text to li
commentnewLI.appendText(responseValueArray[1]);
// Insert li into UL
commentUL.adopt(commentnewLI);
Mootools' admopt method has works for me.
But i have some problem regarding this.
My response has some HTML in the to append in the LI.
Like below
Dummy text, Dummy text,Dummy text,<br/><span>User Name</span>
Can u please suggest that whats the problem over here.
Thanks
Avinash
My HTML problem is solved.
I have just replace the
commentnewLI.appendText(responseValueArray[1]);
with below code.
commentnewLI.innerHTML= responseValueArray[1];
Its working fine.....
Here's how I did it:
//the list
<ul id='the_list'>
<li>list item 1</li>
<li>list item 2</li>
<li id='template_row' class='hidden'>list template. Can have <span class='bold'>HTML</span></li>
</ul>
//get the template
var template = $('template_row');
//create a new row, based on the template
var newRow = new Element('li').set('html', template.innerHTML);
//add it to the list
newRow.inject($('the_list'));
My template row has HTML and it is rendered properly.
Related
I am trying to fetch something through file_get_html everything seems fine but stuck on one part, i am using foreach function to extract a <li> and the problem is it is extracting all the li under that specific div or ul please read the following code.
Trying to extract from these lines
<ul class="x-name y-name">
<li>example 1</li>
<li>example 2</li>
<li>example 3</li>
</ul>
using
foreach($html->find("div#master") as $e){
foreach ($e->find("otherobject]") as $es){
$val["myuse-".strip_tags($es)] = "";
foreach($e->find("ul[class='x-name b-name'] li") as $elist){
$val["myuse-".strip_tags($es)] .= "<li>".strip_tags($elist->innertext)."</li>";
}
}
}
The problem is its not returning after completion of 3 <li> it is continuing drilling down to all the same name <li> What I want it to stop after the <li> numbers are complete and return to the previous foreach and when the next name is selected then it will search for next ul li.
I have next html:
<ul class="pages">
<li class="page-1 active"><a data-page="1" href="/sold?page=1">1</a></li>
<li class="page-2"><a data-page="2" href="/sold?page=2">2</a></li>
<li class="page-3"><a data-page="3" href="/sold?page=3">3</a></li>
<li>...</li>
<li class="page-975"><a data-page="975" href="/sold?page=975">975</a></li>
</ul>
I am trying to get the last li's text which contains the number of the last page (in my example it is 975) with help of Xpath.
I've tried something like:
$page_count = $xpath->query(".//ul[#class='pages']/li/a[last()]/text()")->item(0)->textContent;
but it doesn't work.
what would be the correct query to get last li's text?
try this one:
$page_count = $xpath->query(".//ul[#class='pages']/li[last()]/a/text()")->item(0)->nodeValue;
first: you need to grab the last li and then the text of its a-element
Your version basically searches all the li-elements and within them searches for the last a-element (they only have one) and then their text attribute. So you basically got a list of all the texts.
second: try nodeValue instead of textContent
I am returning a large array (of products), and am using array_slice to grab only the first 8 items.
I will implement a "See More" button, which will load the remaining items on the frontend for the user.
<?php
$split_output = array_slice($_associatedProducts, 0, 8); // returns set number of products in array (8), for more button
?>
My question is, how do I then return the remaining items in the array, following the 8 displayed? These items will then be displayed when the user clicks "See More".
Thanks in advance!
Instead of using array_slice, output all values of the array to the page but hide the values from the ninth value onwards (easily achievable with a foreach loop and a counter variable). Apply Javascript to unhide these values on the click of a button:
<?php
$_associatedProducts = array(); // then add values to the array
$num = 0;
foreach($_associatedProducts as $prod){
if(++$num <= 8){
print("<div>$prod</div>");
}
else{
print("<div class=\"more\" style=\"display:none;\">$prod</div>");
}
}
?>
<button type="button" id="myButton">See More</button>
<script type="text/javascript">
document.getElementById("myButton").onclick = function(){
var divs = document.getElementsByClassName("more");
var len = divs.length;
for(var i = 0; i < len; i++){
divs[i].style.display = "block";
}
this.style.display = "none";
}
</script>
Use this go get the remaining items:
$more_output = array_slice($_associatedProducts, 8);
Then place them inside a hidden div:
<div class="moreProducts">
Place your hidden Products here
</div>
Style:
.moreProducts {
display: none;
}
HTML Link:
More Products
jQuery:
$('a.showMore').bind('click', function() {
$('.moreProducts').show();
});
The above code is just an example. You have to change it to your needs.
You can slice the rest with the starting point of where you left. The ninth item (which is offset 8). If you don't supply the length to array_slice it will simply return all remaining items.
$remaining_items = array_slice($_associatedProducts, 8);
If you wan't to do this after the user clicks a link, there are many routes to take on this problem.
Getting the data Asynchronous with JS
Multiple pages, first page has LIMIT 0,8 in the query, the see more page does not.
Simply sending all data to the page, and make the remaining products initially hidden and show them with a button.
Many more...
Below an example of Simply sending all data to the page, and make the remaining products initially hidden and show them with a button.
Which can also be done in many ways, it's just an example.
Then when clicking see more... you can show the remaining items with javascript.
This way you don't even have to slice.
Example:
css:
.hide{
display:none;
}
php / html
<ul id="productlist">
<?php
$i=1;
foreach($_associatedProducts as $product){
$hide = ($i++>8)?' class="hide"':'';
echo "<li$hide>$product</li>";
}
?>
</ul>
<button id="seemore">See more..</button>
Will generate:
<ul id="productlist">
<li>product 1</li>
<li>product 2</li>
<li>product 3</li>
<li>product 4</li>
<li>product 5</li>
<li>product 6</li>
<li>product 7</li>
<li>product 8</li>
<li class="hide">product 9</li>
<li class="hide">product 10</li>
</ul>
<button>See more..</button>
Now add jquery:
$('#seemore').on('click', function(){
$('#productlist>li.hide').removeClass('hide');
});
My original HTML looks something like this:
<h1>Page Title</h1>
<h2>Title of segment one</h2>
<img src="img.jpg" alt="An image of segment one" />
<p>Paragraph one of segment one</p>
<h2>Title of segment two</h2>
<p>Here is a list of blabla of segment two</p>
<ul>
<li>List item of segment two</li>
<li>Second list item of segment two</li>
</ul>
Now, using PHP (not jQuery), I want to alter it, like so:
<h1>Page Title</h1>
<div class="pane">
<h2>Title of segment one</h2>
<img src="img.jpg" alt="An image of segment one" />
<p>Paragraph one of segment one</p>
</div>
<div class="pane">
<h2>Title of segment two</h2>
<p>Here is a list of blabla of segment two</p>
<ul>
<li>List item of segment two</li>
<li>Second list item of segment two</li>
</ul>
</div>
So basically, I wish to wrap all HTML between sets of <h2></h2> tags with <div class="pane" /> The HTML above would already allow me to create an accordion with jQuery, which is fine, but I would like to go a little bit further:
I wish to create an ul of all the <h2></h2>sets that were affected, like so:
<ul class="tabs">
<li>Title of segment one</li>
<li>Title of segment two</li>
</ul>
Please note that I'm using jQuery tools tabs, to implement the JavaScript part of this system, and it does not require that the hrefs of the .tabs point to their specific h2 counterparts.
My first guess would be to use regular expressions, but I've also seen some people talking about DOM Document
Two solutions exist for this problem in jQuery, but I really need a PHP equivalent:
https://stackoverflow.com/questions/7968303/wrapping-a-series-of-elements-between-two-h2-tags-with-jquery
Automatically generate nested table of contents based on heading tags
Could anyone please practically assist me please?
The DOMDocument can help you with that. I've answered a similar question before:
using regex to wrap images in tags
Update
Full code sample included:
$d = new DOMDocument;
libxml_use_internal_errors(true);
$d->loadHTML($html);
libxml_clear_errors();
$segments = array(); $pane = null;
foreach ($d->getElementsByTagName('h2') as $h2) {
// first collect all nodes
$pane_nodes = array($h2);
// iterate until another h2 or no more siblings
for ($next = $h2->nextSibling; $next && $next->nodeName != 'h2'; $next = $next->nextSibling) {
$pane_nodes[] = $next;
}
// create the wrapper node
$pane = $d->createElement('div');
$pane->setAttribute('class', 'pane');
// replace the h2 with the new pane
$h2->parentNode->replaceChild($pane, $h2);
// and move all nodes into the newly created pane
foreach ($pane_nodes as $node) {
$pane->appendChild($node);
}
// keep title of the original h2
$segments[] = $h2->nodeValue;
}
// make sure we have segments (pane is the last inserted pane in the dom)
if ($segments && $pane) {
$ul = $d->createElement('ul');
foreach ($segments as $title) {
$li = $d->createElement('li');
$a = $d->createElement('a', $title);
$a->setAttribute('href', '#');
$li->appendChild($a);
$ul->appendChild($li);
}
// add as sibling of last pane added
$pane->parentNode->appendChild($ul);
}
echo $d->saveHTML();
Use PHP DOM functions to perform this task.
..a nice PHP html parser is what you need.
This one is good.
Its a PHP equivalent to jquery.
I need to insert a string directly after the open anchor ends (where the anchor content starts).
Here is my code:
<ul id="menu-topmenu2" class="menu">
<li id="menu-item-5" class="menu-item menu-item-type-post_type menu-item-5">
<a href="http://localhost/domain/barnlager.se/?page_id=2">
About
</a>
</li>
<li id="menu-item-5" class="menu-item menu-item-type-post_type menu-item-5">
<a href="http://localhost/domain/barnlager.se/?page_id=2">
Services
</a>
</li>
</ul>
In this example I need content before "About" and "Services". A short regexp should do it? The HTML code above can be a string called $content.
I use PHP. Thanks!
I'd use parser, DOM for instance:
$content = '...your html string...';
$doc = new DOMDocument();
$doc->loadHTML('<html><body>'.$content.'</body></html>');
$x = new DOMXPath($doc);
foreach($x->query('//a') as $anchor){
// strrev(trim($anchor->nodeValue))) is just an example. put anything you like.
$anchor->insertBefore(new DOMText(strrev(trim($anchor->nodeValue))),$anchor->firstChild);
}
echo $doc->saveXML($doc->getElementsByTagName('ul')->item(0));
And as an added bonus it throws a warning you have defined id="menu-item-5" twice in your HTML, which is not valid.
You can find every anchor tag with /<a.*?>/i. If you want to replace something after that, the call would look like preg_replace("/(<a.*?>)/", '$1YOUR ADDITIONAL TEXT', $content).
If for whatever reason you need a double-quoted string as the replacement argument, make sure to backslash-escape the $1.