I'm using October CMS and in the framework I can make an AJAX call using the following HTML element:
<a href="#" class="sbutton" data-request="onSavedeal"
data-request-data="deal_ID:'14779255',type:'local',active:'0'">
<i class="material-icons pink-text listfavorite">favorite</i>
</a>
Whenever this link is clicked on a favorite button fires off an update to a controller "onSavedeal". Updating the database works fine on the first click. However, after updating, the value for the "data-request-data" attribute isn't updated so the button does not work for subsequent clicks.
I need to make the link change so that "active:'0'" becomes "active:'1'". The resulting full element would be
<a href="#" class="sbutton" data-request="onSavedeal"
data-request-data="deal_ID:'14779255',type:'local',active:'1'">
<i class="material-icons pink-text listfavorite">favorite</i>
</a>
In the framework I can add another attribute called "data-request-success" which executes a javascript function (or code) up successful completion of the AJAX call. How can I make a function called "updateactive()" which would toggle the active value between 0 and 1. The final element should look like:
<a href="#" class="sbutton" data-request="onSavedeal"
data-request-data="deal_ID:'14779255',type:'local',active:'0'"
data-reuqest-success="updateactive();">
<i class="material-icons pink-text listfavorite">favorite</i>
</a>
If you can safely identify this a element by attribute data-request having value onSavedeal, you would write the updateactive function as follows:
function updateactive() {
var newAttrValue = "deal_ID:'14779255',type:'local',active:'1'";
$('[data-request="onSavedeal"]').attr('data-request-data', newAttrValue);
}
Don't forget to correct data-reuqest-success to data-request-success.
UPDATE
If you have many a elements on the page, you can reuse same function like below. Check demo - Fiddle .
function updateactive() {
var clickedA = event.currentTarget,
newAttrValue = $(clickedA).attr('data-request-data').replace("active:'0'", "active:'1'");
$(clickedA).attr('data-request-data', newAttrValue);
}
Make change to your anchor tag this way
<a href="#" class="sbutton" data-request="onSavedeal"
data-request-data="deal_ID:'14779255',type:'local',active:'0'"
data-reuqest-success="updateactive(this);">
<i class="material-icons pink-text listfavorite">favorite</i>
Note the change updateactive(this);
Then in your jquery you can have the function definition this way.
function updateactive(element) {
$(element).attr('data-request-data', $(element).attr('data-request-data').replace("active:'0'", "active:'1'"));
}
Related
Template:
<a href="https://example.com/" target="_blank">
Documentation <i ng-click="$ctrl.hideDocumentation($event)" class="fa fa-times remove"></i>
</a>
Controller:
function hideDocumentation($event) {
$event.stopPropagation();
///// MAKE SOME API CALLS
}
How do I prevent redirection to https://example.com/ when I click on the <i> tag?
I don't know angular, but $event.preventDefault() might do the trick.
something like ( i am so used to react):
<a href="" target="_blank" onClick="handleClickFunction">
Documentation <i ng-click="$ctrl.hideDocumentation($event)" class="fa fa-times remove</i>
</a>
function hideDocumentation($event) {
$event.stopPropagation();
///// MAKE SOME API CALLS
}
ie: move your clickHandler to the actual <a/> it is still firing and doing exactly what it is designed to to which is to navigate... if you want to still navigate after doing some things you can then use window.location = www.next-location.com from inside the click handler.
by wrapping your icon in a a tag you are essentially making it an link... but it seems you need to distinguish behaviors. it seems to me that these should be separated all together if possible. blindly calling preventDefault may have unexpected behaviors for when you do want to navigate. I would create a single onClick handler that determines what needs to happen in both scenarios. you can possibly just read exactly what was clicked (a or i) or do something like this to determine what exactly was clicked:
<a href="" target="_blank" onClick="($event) => $handleClick($event, 'a')">
Documentation <i ng-click="$handleClick($event, 'i')" class="fa fa-times remove</i>
</a>
function hideDocumentation($event, el) {
if (el === 'a') {
window.location = www.next-location.com
return
}
// else handle the non-nav scenario
$event.preventDefault();
$ctrl.hideDocumentation
///// MAKE SOME API CALLS
}
I have an html table that is filled from a database.
I have a column that have this 2 "buttons"
<a onclick="modifica()" href="#" title="modifica"><i class="fa fa-edit"></i></a>
<a onclick="delete()" href="#" title="elimina"><i class="fa fa-trash"></i></a>
P.S: fa fa-edit and fa fa-thresh are from Font Awesome.
anyway, when i click one of them, i need the function retrieve data from table and read the column ID, but with some tests i've done, i didn't get the result that i want.
someone can help me?
thanks.
There are a lot of possibilities. But if i understood your problem correctly you could print the ID in your row or directly to your function for every row.
<a onclick="modifica(<?php echo $row['id']; ?>)" href="#" title="modifica"><i class="fa fa-edit"></i></a>
Something like this. Or you could add a data value to your row with data-id="<?php echo $row['id']; ?>". Then use javascript so get the next parent data value. Then you have the ID and you can work with it.
Data Attributes:
https://www.w3schools.com/tags/att_global_data.asp
JQuery data:
https://api.jquery.com/data/
So i hope i understood your question correctly.
You will have to modify whatever code generates your HTML to either include the ID you need inside the called function, like:
onclick="modifica(2056)" - 2056 is whatever ID your modifica function requires to work
of add an id to the clickable elements:
<a onclick="modifica()" href="#" title="modifica" id="2056"><i class="fa fa-edit"></i></a>
and have modifica use javascript to read the ID of the calling element.
The same applies to the delete function as well.
2 ways:
1.- As suggested, if you have the chance to assign the row ID as an attribute to the buttons, you can pass that attribute with onclick method to your JS function.
2.- If you CAN'T assign the row ID to the buttons, then you can add some jQuery selectors to your JS function to retrieve the value:
<a onclick="modifica(this)" href="#" title="modifica"><i class="fa fa-edit"></i></a>
and in your JS file:
function modifica(button){
var id = $(button).parent().parent().attr("id");
//Do Something Else with ID
}
The first parent is <td> and the second is <tr>.
I'm attempting to register an ng-click event using a custom template to display items in an accordion but they do not get registered at all. I've tried everything, using a hideExpression/watcher, putting the ng-click event in the template, using ng-class/ng-init/ng-click to set the element to active, etc...nothing has worked. Even put an onClick function in the templateOptions. Still no luck...
It almost seems like the items are there but they are not there...never have had such an issue with getting a simple click to work. Basically I want the user to be able to click an item, and then that item becomes active and updates the model with the selection, while the previous item becomes inactive...I've got a very simple piece of jQuery code that works in other things but is not working here...
At my wit's end as to why any of these ways haven't worked...please help...
Here is the plunker;
http://plnkr.co/edit/d5kHjH?p=preview
template: '<a li class="list-group-item small" ng-click="active = !active" ng-init="active = true""><span class="glyphicon glyphicon-chevron-right"></span> {{to.label}}</li></a>'
Got it working with a few changes...
template: `<div ng-init= "active = false">
<label class="list-group-item small" onclick="$('.list-group-item').removeClass('active'); $(this).addClass('active')" ng-click="updateModel()" ><span class="glyphicon glyphicon-chevron-right"></span> {{to.label}}</label>
</div>`,
So, I have been given an admin built in php and I was asked to implement an already done admin built in aspx into the new one(changing the css and so), the thing is that i want to dynamically "insert" into the main admin structure which is made in php only the part that's gonna be run in aspx, I made a reserach and found out that the way to do it was using file_get_contents and yeah it works, the thing is that i want that to show after I click on a link so I put the f_g_c into a js function to do so, the thing is that it doesnt work, it doesnt insert anything, it does it outside a function, but inside it just won't
<li class="active">
<a id="solicitud" href="" >
<i class="fa fa-file-text-o"></i>
<span>Solicitudes</span>
<span class="label label-primary label-circle pull-right">2</span>
</a>
var li = document.getElementById('solicitud');
li.onclick = aparecer();
function aparecer() {
<?php
$hola= "./solicitudAAA.aspx";
?>
var lo = document.getElementById('container');
lo.innerHTML ="<?php echo file_get_contents($hola); ?>";
return false;
}
above there are the section of code or well the link i want to click so it shows the aspx and the second section of code is the actual script, i don't know what I'm doing wrong and why inside the scriptit won't work, thanks for your answers!
The problem with your code has something to do with your link's href. A blank href in your anchor tag will refresh the page causing the onclick in your script to not work. How about adding the following:
<a href="javascript: void(0)" id="solicitud" onclick="aparecer();">
<i class="fa fa-file-text-o"></i>
<span>Solicitudes</span>
<span class="label label-primary label-circle pull-right">2</span>
</a>
To make things easier, add the function to the onclick attribute of the anchor tag to call the function rather than coding it inside the script.
Since onclick attribute(that contains the calling of function) is added to the anchor tag, you can remove this in the script:
var li = document.getElementById('solicitud');
li.onclick = aparecer();
I hope this helps!
I'm trying to get my webpage to use the kind of color box that is demoed on this website here.
http://www.jacklmoore.com/colorbox/example2/. (Outside HTML ajax Example).
In their code for this, they have:
$(".ajax").colorbox();
targeting:
<p>
<a class='ajax' href="../content/ajax.html" title="Homer Defined">
Outside HTML (Ajax)
</a>
</p>
My question is, I want the colorbox to display another page I have, when I click this Icon span on my page.
<span id="pause">
<i class="fa fa-pause"></i>
</span>
I've used on() to make it so when it's clicked it runs a function.
$("#pause").on("click", function() {
game.pause();
});
Where as game.pause(); will create this effect, but I'm not sure how to make it happen, because I am not using a link like the examples.