perform action on link click - javascript

I am trying to perform an action on link click.In this case I want to call a method by clicking the anchor and not change the current site.
So You are on a site which is the news archive and now I want to delete a several post by clicking "delete Post".
After hours of looking for it on the WWW i dind't find anything whitout making use of a form.
is there any way to call a method by clicking and anchor?

Your view:
Delete this post
Your controller:
public function delete_post($post_id)
{
$this->load->model('my_model');
$this->my_model->delete_post($post_id);
}

Related

Click back button twice to go back in history

I have a single page application and would like to navigate through the history using browser back and forward button. I am facing an issue when i click the back button once it does not navigate to the previous page but stays on the current page. Then when i click the browser back again it takes me to the previous page. I have tried out the following.
class PageModule {
constructor() {
window.addEventListener("popstate",function(){
this.handleHistory(true);
}.bind(this),false);
}
handleHistory(popStateEventFired = false){
if(popStateEventFired){
history.replaceState();
}else{
history.pushState(null,null);
}
history.pushState(null,null);
}
When i issue a search i add the search param as a query param in the url ?question=testsearch and call the method handleHistory(). I have checked other answers to similar problem but they dont seem to help.
I have to do this using vanilla javascript or knockoutjs as we maintain HTML bindings using knockoutjs but am not able to achieve this properly.
Any help is appreciated

redirecting to html pages using javascript,jquery,html

hi guys um facing a problem in my assignment the assignment is to make a table that includes words edit and delete ,
once i click on delete it alerts "are you sure you want to delete" if i pressed on it,it redirects into another html page that says " the row is successfully deleted"
another thing when i press on edit text it redirects to another page that contains course name textbox,student name textbox ,button>edit ...
if anyone could help me because i am a beginner i'll be so thankful this is the code i wrote until now ,,, btw redirecting function is not working with me i tried many many function to redirect to another html but i couldn't solve it
that's how the table should look like and i dont have a problem in it's xhtml code
After your explanation in comments, I can tell you that: just add a link to delete
`delete`
and another link to edit
edit
and place the h1 in that pages with the message you want
if your using native javascript you could achieve it with something like.
edit: this will now redirect to your imgur png if you choose okay in the confirm window. The same principal applies to your site. if you confirm the prompt the link whatever that may me will be followed otherwise the page will do nothing.
This code does not support IE < 9. If you wish to use a non modern browser or need to support it there are plenty of resources that will show you the alternate syntax. mdn is a great resource. https://developer.mozilla.org/en-US/docs/Web
// capture all the delete links on the page. Using a class is the easiest
var links = document.querySelectorAll('.delete');
// you can loop over the links anyway you choose. I'm using forEach
Array.prototype.forEach.call(links, function( link ){
//bind the checkDeleteUser event
link.addEventListener('click', checkDeleteUser, false);
});
function checkDeleteUser(e){
// use the native user prompt
if( ! confirm('are you sure you want to delete this user' ) ){
// they said no cancel the default link behavior of redirecting
e.preventDefault();
return false;
}
}
<!-- I'm not sure if it's clear, but you need to add a class to your anchor tags -->
<a class="delete" href="http://i.stack.imgur.com/LbS2d.png">delete</a>
<a class="delete" href="https://developer.mozilla.org/en-US/docs/Web>">go to mdn</a>
<!-- <a class="delete" href="/delete-page.php?userId=69">delete</a> -->

jqm data-rel="back" issue

imagine the following scenario:
i have a jquery-mobile formular, it´s results are linking to its resultpage.
on the resultpage i have this back button:
this works fine to just update the content and keep the submitted form data,
but
what if a user came from a search-engine or similiar extern link, then my back button links back to the searchengine/externLink .
so how do i Differentiate between those who came from my form or anywhere else in a jqm-way ?
i have a "start-search-page" i would love to link to if the user didn´t came from the search and i don´t want to miss the ajax-link from my search to the resultpage, use the same button and idealy i don´t have to set any cookie.
is there any hint or smarter attempt than check the server url from document.referrer ?
thanks in advance
You can check current page url using below code:
var prevUrl = $.mobile.activePage.data('url');
in case u want to perform different actions based on previous URL.
then on save the URL in the global javascript variable and on click of the button check the previous URL and do the your functionality. eg
Before Navigating to page:
var prevUrl = $.mobile.activePage.data('url');
on click of button:
if (prevUrl=="myurl") {
//do something
$.mobile.changePage('#search')
}
else {
$.mobile.changePage('#nothing')
}

How to redirect to another JSP page via JavaScript in MVC portlet?

I am trying to open my form with filling out every text box on click of edit button on the HTML table where all my data is stored in list and each row has edit button. When I click on edit it will redirect to edit_restaurant.jsp page from restaurant.jsp page.
My restuarant.jsp page have one HTML table list in which it has edit button on each row and I want that on click of that edit button I will redirect to edit_restaurant.jsp page where all data can fill up with the id key which is bind to my edit button.
What I want is to get the id of button in another jsp button..am using liferay custom mvc portlet so can anyone guide me that how to make it possible.
Here is the snippet of code that I have tried.
Following is my column of edit button:
<td><input type="submit" id=<%=temprest.getPrimaryKey()s%> onclick="return getbuttonId('<%=temprest.getPrimaryKey() %>')" value="edit" /></td>
...and on click of that button THE following Javascript will be invoked:
<script type="text/javascript">
function getbuttonId(sid){
// document.editform.action=url;
// document.editform.submit();
var url="<%= editURL.toString()%>";
window.location.href = url+"?sid="+sid;
return false ;
}
</script>
My portlet action url is as follows:
<portlet:actionURL name="editRestaurant" var="editURL">
</portlet:actionURL>
...and the method I am calling via portlet action url is here in my action class:
public void editRestaurant(ActionRequest reqeust,ActionResponse response) throws Exception
{
String str= reqeust.getParameter("sid");
long l=Long.valueOf(str);
//Retriev table data using Primary key
restaurant rest=restaurantLocalServiceUtil.getrestaurant(l);
//Set Attribute which has all values of specified pk.
reqeust.setAttribute("edit",rest );
// Redirect to Jsp page which has Update form.
response.setRenderParameter("jspPage","/jsps/edit_restaurant.jsp");
}
I got error like this when I click on edit function
java.lang.NoSuchMethodException: emenu.advertise.portlet.RestaurantPortlet.editRestaurant?sid=5(javax.portlet.ActionRequest, javax.portlet.ActionResponse)
Can somebody please guide me to fix this?
#
here i want that the sid value assigned to my button id should be transfer to this string value before page is redirects
<%
String restId=request.getParameter("sid");
//can i call sid value of javascript function getbuttonId() here
%>
<portlet:actionURL name="editRestaurant" var="editURL">
<portlet:param name="key" value="<%=restId %>"/>
</portlet:actionURL>
Please read this:
How to redirect to another webpage in JavaScript/jQuery?
Query is not necessary, and window.location.replace(...) will best simulate an HTTP redirect.
It is better than using window.location.href =, because replace() does not put the originating page in the session history, meaning the user won't get stuck in a never-ending back-button fiasco. If you want to simulate someone clicking on a link, use location.href. If you want to simulate an HTTP redirect, use location.replace.
For example:
// similar behavior as an HTTP redirect
window.location.replace("http://stackoverflow.com");
// similar behavior as clicking on a link
window.location.href = "http://stackoverflow.com";
Anyways had solved my problem with the following code:
function getbuttonId(sid){
alert("Are You Sure You want to Edit");
// document.editform.action=url;
// document.editform.submit();
var textbox = document.getElementById('hiddenkey');
textbox.value=sid;
document.editform.action = "<%=editURL.toString() %>";
document.editform.submit();
return false ;
}
and onclick of button I am calling the above javascript method. So it works good.
Actually what I want was the id of particular button which is clicked so I am storing that id in hidden key and after form submit action in java script I am redirecting to page I want and then I can get the value of hidden key field from the request.getattribute(hiddenkey field name).

MVC 3: Communicating between partial view and view via JavaScript

I have a page that lists users (List.vbhtml), and each user has an 'Edit' link. The edit link makes an Ajax request:
#Ajax.ActionLink("Edit", "Edit", "Player", New With {.id = currentItem.PlayerId}, New AjaxOptions() with { .UpdateTargetId="edit"})
The Edit method in my controller returns a partial view (_Edit) which contains a form. After the form has been submitted, I want to hide the edit form (not a problem), and then reload the list of users. This is what I am struggling with.
How do I let the parent view (List.vbhtml) know I should reload the list (which would be done using a Ajax Get request)?
I can't do this from the Edit partial view, because the Edit partial view shouldn't know about the List view, only the other way around (List view knows about the partial view).
My current solution is to raise a custom event when the edit is complete in _Edit.vbhtml, and capture it in List.vbhtml:
_Edit.vbhtml:
//let anyone listening know the edit is complete
$(document).trigger('PersonEditComplete');
List.vbhtml
//when player edit is complete, reload the player list
$(document).bind('PersonEditComplete', function () {
Player.List.Reload();
});
Thanks
You can use jQuery .ajaxComplete() event handler. You have to check if the XHR method is GET or POST. Get will be after loading user edit form, POST would be after subbmiting it.
So if ajaxComplete fires after POST call then you should refresh users list via Ajax.

Categories

Resources