When a user clicks on the delete button on the index page. The modal pops up and with the first function the URL path gets passed to the taskdestroylink attribute of the delete button in the modal. Until now everything works fine. Everytime I click on the link the attribute gets set properly.
The second function is sending the AJAX request to the server. On page reload the first request works fine, but the second one keeps the route of the first one. So var href gets set properly for the first time, but if I try to delete another task the href value still belong to the first one. It's weird since as I mentioned the taskdestroylink attribute shows the new value in the DOM.
So what's the problem with var href = $(this).data("taskdestroylink");? Why doesn't it set the new value?
Modal get's opened by clicking this link:
<li>
Delete Task
</li>
Modal:
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" id="deletetaskclose">Close</button>
<a href="#" id="delete-task-link" type="button" class="btn btn-danger" data-taskdestroylink >Delete Task</a>
</div>
JS:
$(document).on('click', '.open-delete-task-modal', function (event) {
var taskDeleteLink = $(this).data("taskdeletelink");
$('#delete-task-link').attr("data-taskdestroylink", taskDeleteLink);
});
$(document).on('click', '#delete-task-link', function (event) {
var href = $(this).data("taskdestroylink");
alert(href);
$.ajax({
type: "DELETE",
url: href,
dataType: "script"
});
});
It is a bad idea to mix data() and attr() so pick one and stick with it.
Change
.attr("data-taskdestroylink", taskDeleteLink);
to
.data("taskdestroylink", taskDeleteLink);
data() uses its own internal storage and not the actual attributes.
Related
I have a simple form that looks like this:
<form action = '../../uploadGI/index.php' method = 'post' target = '_blank'>
... (inputs)
<button class='btn actionbtn closebtn' onClick = 'this.form.submit()' ... >Submit</button>
</form>
The forms sends a number of parameters to a new page where the user can upload a document (or scan it), the parameters are related to the type of doc, the table and table record it refers to in the db.
When I leave target = "_blank" out the form works as intended. But with target _blank the button opens the page ... twice. What is causing this behaviour?
The default action for a button input in a form is to submit the form. No need for the onClick attribute/handler. Just remove the onClick
<button class='btn actionbtn closebtn' ... >Submit</button>
So i wanted to open a new page replacing the current one, i found that the method should be putting the second parameter on _self but nothing happen...
By the way, if i use the _blank parameter or i left it empty it opens in a new page. The rest of the function works good, but i can't find a way to close the current page and open the new one that i want.
Here is the javascript and the html buttom that call the function.
<button id="rgstr_btn" type="submit" class="btn btn-info" onClick="store()">Register</button>
<script>
function store() {
localStorage.setItem('nome', nome.value);
localStorage.setItem('pw', pw.value);
window.open('url', '_self');
}
</script>
Button has a type attribute which defaults to submit: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type
While this does not affect "everyday" buttons, if the button resides in a form, this way it will submit the form, and result in some page loading, which clashes with your own attempt.
You can just add a type="button" attribute to the button to avoid that:
<button id="rgstr_btn" type="button" class="btn btn-info" onClick="store()">Register</button>
^^^^^^^^^^^^^
windows.open() opens the URL in a new window.
To replace the URL in the current window, use:
window.location.href = 'http://example.com';
My codepen - http://codepen.io/illpill/pen/VbeVEq
For the sake of stacks policy, here is an example of code
<button class="btn btn-default btn-md pull-right" id="tweetButton">Tweet This</button>
My question is, how do I have it pull the quote from the page and compose it into a readily made tweet with added hashtags?
Start by adding a unique class to your Tweet button, then when someone clicks that button, get the current quote and pass it into a Tweet URL:
function tweet(message) {
window.open('https://twitter.com/intent/tweet?hashtags=hashtagshere&text=' + encodeURIComponent(message));
}
$('button.tweet').click(function() {
var currQuote = $('#quote').text();
tweet(currQuote);
});
Updated Codepen
I am using MyApp.updateHashLabel on using browser location hash to enable back/forward events which works with only one issue - it doesn't pass value. This is my html code and one of the buttons (fourth) has got onClick MyApp.updateApp with extra value which I want to pass when I click on a back button from another screen/state. So when I am clicking on second button after fourth and go back it shows my a correct screen but doesn't display the value = 6. Is there any way to put it in sessionStorage for this action? Or there may be a different solution...
<div class="button-bar">
<button onclick="MyApp.updateApp(1, true);" type="button">ONE</button>
<button onclick="MyApp.updateApp(2, true);" type="button">TWO</button>
<button onclick="MyApp.updateApp(3, true);" type="button">THREE</button>
<button onclick="MyApp.updateApp(4, true, 6);" type="button">FOUR</button>
</div>
<div id="hash-label">#</div>
<div id="value-label"></div>
<div id="image-placeholder"></div>
This is my jQuery code:
MyApp.updateApp = function (hashValue, allowAppToUpdateHash, valueID) {
var index = parseInt(hashValue, 10);
var imageNode = document.getElementById('image-placeholder');
var id = parseInt(valueID, 10);
}
And the function of a value usage is:
window.article = function (id) {
$("#value-label").html(id);
}
Please see my whole code on jsfiddle here: http://jsfiddle.net/nzsqt06a/1/
Really appreciate your help.
you could intercept the args and store them in session storage, and recover them once the DOM is loaded again.
I have the following button:
<div class="form-group">
<button onclick="assign_all()" class="btn btn-default">Vælg alle</button>
</div>
Now this calls a JavaScript function called assign_all
This works fine however when it is done executing the JavaScript it simply tries to load a page. Which is fairly odd (its like if you click on an A tag)
As you can see below nothing in my javaScript indicates that it should reload / load a page:
function assign_all() {
var info = [];
var i = 0;
$('.user_list').each(function () {
if ($(this).hasClass('show')) {
info[i] = $(this).find('.user_id').val();
i++;
}
})
}
Can anyone tell me why this is happening?
It's because the default button element's type attribute is set to submit. Your button element is attempting to submit a form. Simply give it a type of button:
<button onclick="assign_all()" class="btn btn-default" type="button">...</button>
Add type="button" to your button tag. it must solve the issue
you can do this also
<button onclick="assign_all();return false;" class="btn btn-default">Vælg alle</button>