I have a very simple table where I'm retrieving income information for some people.
The table retrieves data correctly and the link to the file in stored in a variable, like this:
$file = "/".$row[9];
Where $row comes from the while loop. I have a button inside the table:
<button id = "openbtn" class = 'actionbtn' onClick = "window.open('<?php echo $file;?>')" title = 'Open Attachment'><i class='fa fa-file'></i></button>
If I create a new variable where I manually set the link:
$file2 = '/folder1/folder2/somename.pdf';
then the button will open fine. But it will not work with $file , I get Uncaught SyntaxError: Invalid or unexpected token.
Any clue?
foreach($row as $myfile){
echo '<button
id="openbtn"
class="actionbtn"
title="Open Attachment"
onclick="window.open('."'$myfile'".');"
>
<i class='fa fa-file'></i>
</button>';
}
try this loop
A combination for trim($file) and changing the "" did it:
<button id = "openbtn" class = 'actionbtn' onClick = 'window.open(<?php echo '"'.$file .'"';?>);' title = 'Open Attachment'><i class='fa fa-file'></i></button>
i have made a code where made a button named "Clear Cart" and passes it to the html code via javascript. I added the attribute 'onclick' on that button but when I inspect that button on page then button appears without 'onclick' attribute. All other attributes are appearing okay but 'onclick' attribute is not visible there.
this is my code:
popStr = popStr + "<button id ='clearcart' class='btn btn-primary' onclick='clearCart()'> Clear Cart </button>";
document.getElementById('popcart').setAttribute('data-content', popStr);
This is the output I am receiving
<button id="clearcart" class="btn btn-primary"> Clear Cart </button>```
It looks like your html is "sanitized" (removing the onclick) by the library you are using to inject the new element.
Your question is not clear about how it is added to the DOM from data-content attribute. There should not be any problem if you are setting this HTML from data attribute to DOM with Element.innerHTML
Following is the sample code based on the assumptions:
let popStr = "";
popStr = popStr + "<button id ='clearcart' class='btn btn-primary' onclick='clearCart()'> Clear Cart </button>";
document.getElementById('popcart').setAttribute('data-content', popStr);
function addToDom() {
document.querySelector("#output").innerHTML = document.getElementById('popcart').dataset.content;
}
function clearCart() {
alert("working!")
}
Workign example: https://jsbin.com/tavoyozewa/edit?html,js,output
I've got a table that lists values inputted by a user, with 2 buttons on the side to remove or to mark completed. On the page the table is visable, there are 3 tabs, we will call these Tab1, Tab2, and Tab3
Each tab has a table (As described above) with information about a specific type of entry.
These buttons are simple <a href> links, so when clicked they reload the page. This is a problem because the users view is refreshed and it takes the tabs back to the default tab, and is also an inconvenience when trying to mark several entries.
I would like to make these buttons send Ajax requests to another page to process the data. The only problem is, I am not really sure how to make the ajax call.
This is what I have right now
My buttons
echo "<td class='td-actions'>";
echo " <a href='?complete=".$row['uniqueID']."' class='btn btn-success btn-small'>
<i class='btn-fa fa-only fa fa-check'> </i>
</a>
<a href='?remove=".$row['uniqueID']."' class='btn btn-danger btn-small'>
<i class='btn-fa fa-only fa fa-remove'> </i>
</a>";
echo "</td>";
There is one called Complete, and one called Remove.
When either of these are pressed, it currently reloads the page which triggers a few php if statements.
if(isSet($_GET['remove'])) {
$sql = "DELETE from rl_logged where uniqueID='".$_GET['remove']."';";
$ret = $db->exec($sql);
echo "<meta http-equiv='refresh' content='0;index.php' />";
}
if(isSet($_GET['complete'])) {
$sql = "UPDATE rl_logged set complete=1 where uniqueID='".$_GET['complete']."';";
$ret = $db->exec($sql);
echo "<meta http-equiv='refresh' content='0;index.php' />";
}
These are relatively simple functions. My problem is that I do not know javascript very well.
Any help would be much appreciated.
the javascript that I have come up with is this
$(document).ready(function() {
$('#markComplete').click(function() {
var input = input = $(this).text()
$.ajax({ // create an AJAX call...
data: {
onionID: input,
},
type: 'POST', // GET or POST from the form
url: 'pages/ajax/markCompleteRL.php', // the file to call from the form
success: function(response) { // on success..
refreshAllTabsWithFade();
}
});
});
});
using this button
<div name='markComplete' id='markComplete' class='btn btn-success btn-small'>
<i class='btn-fa fa-only fa fa-check'></i>".$row['uniqueID']."
</div>
But, while inspecting with firebug, this seemed to work ONCE, but now the button doesn't do anything.
I tried again this morning, the button presses and the first time it sends this post, then the button doesn't do it again - even on page reload.
I was able to get it to work with the following:
javascript:
$('.markComplete').submit( function( event ) {
event.preventDefault();
event.stopImmediatePropagation();
$.ajax({ // create an AJAX call...
data: $(this).serialize(), // serialize the form
type: "POST", // GET or POST from the form
url: "pages/ajax/repairlogMarks.php", // the file to call from the form
success: function(response) { // on success..
refreshAllTabs();
}
});
return false;
});
button:
<form class="markComplete">
<input type="text" style="display:none;" class="form-control" name="uniqueid" value='<?=$row['uniqueID'];?>'>
<input type="text" style="display:none;" class="form-control" name="markcomp" value='1'>
<button type="submit" class="btn btn-success">
<i class="btn-fa fa-only fa fa-check"></i>
</button>
</form>
Basically, I made the button into a form which I knew how to create an ajax request for.
--
Update to make it work for multiple buttons that do the same function for different unique ID's.
Well for since you're sending the ajax call using "POST", it seems to me that if(isSet($_GET['complete'])) would evaluate to false. Also if your button is generated dynamically using php then change your click handler to the following:
$('document').on('click', '#markComplete', function (){
// Your code here
})
If you have more than one "Mark Complete" button; you need to use classes rather than ID to bind the event.
<button id="test">
Test 1
</button>
<button id="test">
Test 2
</button>
<script>
$('#test').click(function (e) {
console.log('test', e.target);
});
</script>
In this example, only the first button works. jQuery will only return the first element when you specify an ID.
If you use classes to bind the event; both buttons will work:
<button class="test">
Test 1
</button>
<button class="test">
Test 2
</button>
<script>
$('.test').click(function (e) {
console.log('test', e.target);
});
</script>
i think you have an error in your javascript at this line...
var input = input = $(this).text()
try to replace by this..
var input = $(this).text();
I am generating a clickable list dynamically using jquery. here is the code that generates the list.
for(dayint=0;dayint < day_arr.length;dayint++){
var temp_pass = JSON.stringify(day_arr[dayint]);
//alert(temp_pass);
$("#itin_list").append('<b>Day '+ dayint + ' of Trip from '+ start_n +' to '+ end_n +' </b> <button data-toggle="modal" data-target="#dirModal" style="position:absolute;bottom:5px; right:5px;float:right" class="btn btn-primary">Show Directions</button><br>');
}
The problem I have is when passing the json array to my sethidddendiv function. The code sample for the function is as below:
window.sethiddendiv = function(str) {
//var nisal = $.parseJSON(str);
alert(str);
}
When the list item is clicked, instead of giving the json array, it alerts "undefined" all the time.
Here is the html that is generated in the page when I inspect element:
<b>Day 0 of Trip from Colombo to Kandy </b> <button data-toggle="modal" data-target="#dirModal" style="position:absolute;bottom:5px; right:5px;float:right" class="btn btn-primary">Show Directions</button>
What could be the issue here?
I already tried using single quotes for the onclick, but it didnt work. Any help would be very welcome. I'm stuck.
I am trying to workout the following JavaScript if statement:
<script>
if ($crs_date2 != '0000-00-00'){
document.write('No other course date available');
} else {
document.write(<button class='btn btn-danger data-toggle='modal' id='actionButtonOrange'>$crs_date2</button>);
}
</script>
I am encountering two issues:
The button is not being displayed.
the function does not seem to be working as intended.
Essentially what would happen is that if no date is available (by default it displays 0000-00-00 if no date is available but it is not aesthetically pleasing), the JavaScript message appears.
You are missing delimiters around the string:
document.write("<button class='btn btn-danger data-toggle='modal' id='actionButtonOrange'>" + $crs_date2 + "</button>");