So here is my problem. I have the below set of javascript code and HTML.
What is supposed to happen is that as you click on various checkboxes in a form, the script is supposed to take the Value of the Checkbox you checked and fill in a text field below that has a similar "name" identifier. The below code works for all values but one. The one with a space in the value "Character Only" doesn't work. I tried to use the Javascript method .Replace(" ", "-") to accomplish replacing the space with a hyphen but it doesn't seem to work. Since the HTML is being dynamically created via a PHP loop, I can't just add in the needed values and hard code everything.
Is there a way to make
JSFiddle - The full program and HTML layout.
The Javascript (Click the JSFiddle link to see the entire result)
function autofill(ElementName) {
//window.alert('You got this: ' + ElementName);
if(document.getElementById('keyword-' + ElementName.toLowerCase()).checked == true) {
document.getElementById('keyword-entry-' + ElementName.toLowerCase()).value = document.getElementById('keyword-' + ElementName.toLowerCase()).value;
} else {
document.getElementById('keyword-entry-' + ElementName.toLowerCase()).value = '';
}
}
// window.alert('This value is: ' + document.getElementById('keyword-ally').value.toLowerCase() );
//--> </script>
The PHP being used to create the HTML elements for the above JScript
<?php
$keywords = array("Ally" , "Breaker" , "Character Only" , "Combo" , "Desperation" , "Item" , "Kick" , "Multiple" , "Powerful" , "Punch" , "Ranged" , "Reversal" , "Stance" , "Stun" , "Taunt" , "Terrain" , "Throw" , "Unique" , "Weapon");
$i =0;
foreach($keywords as $keyword_name) {
echo '<td style="width: 20%;">' . zen_draw_checkbox_field('ufs_keywords[]', $keyword_name, in_array($keyword_name, $pInfo->resources), '', 'id="keyword-' . str_replace(" ","-",strtolower($keyword_name)) . '"') . ' <label for="keyword-' . str_replace(" ","-",strtolower($keyword_name)) .'">' . $keyword_name . "</label><br />" . zen_draw_input_field('ufs_keywords_entry[]', '', 'id="keyword-entry-' . str_replace(" ","_",strtolower($keyword_name)) . '" style="width:100px; float: right;"') . "</td>" . "\n\n";
$i++;
echo ($i % 5 == 0 ? "</tr>\n\n<tr>" : "");
}
?>
Related
I am trying to display a button under certain condition on my HTML output
I succesfully wrote the code like this:
<?
var HTMLToDisplay = "";
if (data[i][5] == 0) {
HTMLToDisplay = ""
} else {
HTMLToDisplay = '<input type="button" value="Réserver" onclick="openForm(' + "'" + new Date(data[i][4]).toLocaleDateString('fr-BE', options) + "'" + ",'" + data[i][3] + "'," + data[i][0] + ')" />'
}
?>
<?= HTMLToDisplay ?>
But unfortunately, the HTML code appears in plain text rather than in the code
In fact the script automatically added some unwanted double quotes
Any idea how I can display my button just by code, without doing complex stuff?
Thanks a lot
In your script, please modify as follows and test it again.
From:
<?= HTMLToDisplay ?>
To:
<?!= HTMLToDisplay ?>
By this, if the value of HTMLToDisplay is the valid HTML tag, the value of HTMLToDisplay put as the raw string. When it is loaded by the browser, it is shown as a button. If no button is shown, please check the value of HTMLToDisplay again.
Reference:
Force-printing scriptlets
Trying to set up a WhatsApp button with a custom message, I've created a script in JavaScript to do that and calling it onclick.
I've tried moving quotation marks around but nothing works, this might be a silly issue but I just started with coding and can't get this to work, been trying since yesterday.
Here is my JavaScript code:
function sendSms(number, title) {
window.open('https://api.whatsapp.com/send?phone=' + number + '&text=' + 'hello' + title);
}
Here is my PHP code:
echo '<span class="ad-whatsapp" onclick="sendSms(\' '. $ad_wa .' , '. str_replace(" ", "%20", get_the_title()) . '\')"></span>';
It seems to be sending the whole content of the parenthesis as the number parameter instead of separating the 2.
function sendSms(number, title) {
window.open('https://api.whatsapp.com/send?phone=' + number + '&text=' + 'hello' + title);
}
echo '<span class="ad-whatsapp" onclick="sendSms(\' '. $ad_wa .'\' , \''. str_replace(" ", "%20", get_the_title()) . '\')">bb</span>';
Try using this JavaScript:
function sendSms(number, title) {
window.open(`https://api.whatsapp.com/send?phone=${number}&text=hello${title}`);
}
With this PHP:
<?php
$replaced = str_replace(" ", "%20", get_the_title());
echo '<span class="ad-whatsapp" onclick="sendSms(\'' . $ad_wa . '\', \'' . $replaced . '\')">SEND</span>';
?>
Good luck.
Try using this instead:
echo "<span class='ad-whatsapp' onclick=\"sendSms('".$ad_wa."' , '".str_replace(" ", "%20", $this->get_the_title())."')\">asdf</span>";
I have a PHP page which displays a picture :
echo "<p> <img id=\"myPic\" src=\"myPic.png\" > </p>";
Later in the code, i'm placing small icons around that picture, using JS :
echo "<script>
var picTop = document.getElementById(\"myPic\").offsetTop ;
var picLeft= document.getElementById(\"myPic\").offsetLeft ;
document.getElementById(\"" . $iconId. "\").style.top = picTop + " . $iconPosition[$i][0] . " + \"px\";
document.getElementById(\"" . $iconId. "\").style.left = picLeft + " . $iconPosition[$i][1] . " + \"px\";
</script>";
I uploaded the page on a server, and other users told me that the icons were overlapping the main picture. However this only happens once, and it is fixed when they reload the page. I've witnessed that too, and i could reproduce the issue by using another browser, again solved by refreshing.
I have no idea what's wrong. Perhaps the main picture takes too long to load, and the JS script has already been performed, so the icons are badly positioned - but it is later fixed because the picture is in the temporary files, or something.
I tried to delay the JS script with a setTimeout, but still didn't fix the problem
echo "<script>
var picTop = document.getElementById(\"myPic\").offsetTop ;
var picLeft= document.getElementById(\"myPic\").offsetLeft ;
setTimeout ( function() {
document.getElementById(\"" . $iconId. "\").style.top = picTop + " . $iconPosition[$i][0] . " + \"px\";
document.getElementById(\"" . $iconId. "\").style.left = picLeft + " . $iconPosition[$i][1] . " + \"px\";
}, 500) ;
</script>";
or maybe i could try with more milliseconds... i can't make a proper diagnosis due to the difficulty to reproduce the issue
Thanks for your help !
echo "<script>
document.addEventListener( 'DOMContentLoaded', function () {
var picTop = document.getElementById(\"myPic\").offsetTop ;
var picLeft= document.getElementById(\"myPic\").offsetLeft ;
document.getElementById(\"" . $iconId. "\").style.top = picTop + " . $iconPosition[$i][0] . " + \"px\";
document.getElementById(\"" . $iconId. "\").style.left = picLeft + " . $iconPosition[$i][1] . " + \"px\";
}, false );
</script>";
I'm building a search with jQuery UI Autocomplete (http://jqueryui.com/demos/autocomplete/)
I am also utilizing the jQuery UI Autocomplete HTML Extension so I can style the search nicely and display icons according to the category where the search result is in.
My problem is, when I click on a result which looks like this:
(Category Icon) Pink Floyd - Category
It comes out like this in the search input field:
<div class="search_icons"><img src="images/ico/search_icon_rock.png" class="search_pic_radius"></div>Pink floyd<div class="autocomplete_category"> Rock</div><div class="artist_id_search">15</div><div class="artist_name_search">pink-floyd</div>
This is how my search.php looks like:
if (isset($_GET['term'])){
$return_arr = array();
try {
$conn = new PDO("mysql:host=".DB_SERVER.";port=8889;dbname=".DB_NAME, DB_USER, DB_PASSWORD);
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$stmt = $conn->prepare('SELECT url_name,name,category,id FROM artists WHERE name LIKE :term OR category LIKE :term LIMIT 10');
$stmt->execute(array('term' => '%'.$_GET['term'].'%'));
while($row = $stmt->fetch()) {
if($row['category'] == '1') { $category_icon = '<div class="search_icons"><img src="images/ico/search_icon_rock.png" class="search_pic_radius"></div>'; }
if($row['category'] == '2') { $category_icon = '<div class="search_icons"><img src="images/ico/search_icon_pop.png" class="search_pic_radius"></div>'; }
$return_arr[] = $category_icon . $row['name'] . '<div class="autocomplete_category"> ' . $row['category'] . '</div>'. '<div class="artist_id_search" id="artist_id_search">' . $row['id'] . '</div>'. '<div class="artist_name_search" id="artist_name_search">' . $row['url_name'] . '</div>' ;
}
} catch(PDOException $e) {
echo 'ERROR: ' . $e->getMessage();
}
echo json_encode($return_arr);
}
What I'm trying to achieve is, when clicking on something on the autocomplete it should submit the form with the value from the last two div's artist_id_search and artist_name_search so on submit the next page would become whatever.php?id=15&artist=pink-floyd
What I have tried is to remove the unnecessary parts from the search string with the split function but then I just ended up with the id and the url_name parameters in the search field which didn't really achieve anything also it didn't really work reliably with changing icon names and such.
Well instead of returning HTML from the PHP service you have made in JSON, you should be returning a proper JSON like in the form of
[
{"id":"15","name":"pink-floyd","value":"Pink Floyd"},
{...
]
then handle it in your javascript as:
$( "#your_input_id" ).autocomplete({
source: "your_php_page.php",
minLength: 2,
select: function( event, ui ) {//callback function when you select an item
log( ui.item ?
"Selected: " + ui.item.value + " aka " + ui.item.id :
"Nothing selected, input was " + this.value );
window.location.href = 'whatever.php?id=ui.item.id&artist=ui.item.name';
}
});
Hope you get it sorted :)
onlythebestoftheweb.x10.mx/test search/search.html Whats wrong with the code? Try typing anything in there without clicking enter. It used to work... I dont know what the issues are on line 3 and 31. Heres links.xml and livesearch.php
onlythebestoftheweb.x10.mx/test search/links.xml
onlythebestoftheweb.x10.mx/test search/livesearch.php
Php code
<?php
$xmlDoc=new DOMDocument();
$xmlDoc->load("links.xml");
$x=$xmlDoc->getElementsByTagName('link');
//get the q parameter from URL
$q=$_GET["q"];
//lookup all links from the xml file if length of q>0
if (strlen($q)>0)
{
$hint="";
for($i=0; $i<($x->length); $i++)
{
$y=$x->item($i)->getElementsByTagName('title');
$z=$x->item($i)->getElementsByTagName('url');
if ($y->item(0)->nodeType==1)
{
//find a link matching the search text
if (stristr($y->item(0)->childNodes->item(0)->nodeValue,$q))
{
if ($hint=="")
{
$hint="<a href='" .
$z->item(0)->childNodes->item(0)->nodeValue .
"' target='_blank'>" .
$y->item(0)->childNodes->item(0)->nodeValue . "</a>";
}
else
{
$hint=$hint . "<br /><a href='" .
$z->item(0)->childNodes->item(0)->nodeValue .
"' target='_blank'>" .
$y->item(0)->childNodes->item(0)->nodeValue . "</a>";
}
}
}
}
}
// Set output to "no suggestion" if no hint were found
// or to the correct values
if ($hint=="")
{
$response="no suggestion";
}
else
{
$response=$hint;
}
//output the response
echo $response;
?>
You're missing an opening <link> tag between lines 27 and 28 of links.xml.
Chrome provides a helpful error for me if I go to: http://onlythebestoftheweb.x10.mx/test%20search/links.xml