We Keep Coding

jQuery alternate clicks do something

Okay, so this little bit of code either posts and then updates #arrival, or it removes it and replaces it with standard text. One click posts, one click resets. The problem I'm having, and cannot figure out, is that the code as is requires two clicks to do the initial posting, and then one click to remove and one click to post again ad infinitum. But it first requires two clicks to get to working.
Any help would be appreciated.
$(document).ready(function(){
$("#change").click(function(e) {
e.preventDefault();
var data = {};
$.each($('input[name^="u\\["]').serializeArray(), function() {
var vv = this.name.replace(/u/, '' ).replace(/(\[[]\])$/,'');
data[vv] = this.value;
});
var clicks = $(this).data('clicks');
if (clicks) {
// odd clicks
$.ajax({
type : "POST",
cache : false,
url : "napad.php?n=<?=$_GET['n']?>&o=<?=$_GET['o']?>&arrival",
data : {'X': data},
success: function(data) {
$("#arrival").html(data);
}
});
} else {
// even clicks
$('#arrival').contents().remove();
$('#arrival').append('Arrival Time: Normal');
}
$(this).data("clicks", !clicks);
});
});

If you saying you doesnt want it firing 2 times but you want it trigger the event one time clicking.
try to add this on you jquery function.
$("#change").unbind("click").click(function() {
// Your code
});
Let me know if it works. Thanks. :)

How to show modal newsletter popup only once in per session?

This is my code for using modal popup only once in per session,My problem is, everytime I visit the homepage, the div will show up. Instead I would like to show the div only once per session. I've tried to fix it with cookies but it didn't work.
<script>
if (!Cookies.get('popup')) {
setTimeout(function() {
$('#myModal').modal();
}, 600);
}
$('#myModal').on('shown.bs.modal', function () {
// bootstrap modal callback function
// set cookie
Cookies.set('popup', 'valid', { expires: 3, path: "/" }); // need to set the path to fix a FF bug
})
</script>

Set a cookie.
$(document).ready(function() {
if ($.cookie('noShowWelcome')) $('.yourDivClass').hide();
else {
$("#close-welcome").click(function() {
$(".yourDivClass").fadeOut(1000);
$.cookie('noShowWelcome', true);
});
}
});
You need to include jQuery.cookie javascript file.
Download jQuery.cookie
Hope this helps :)

ASP.NET JQuery .click() not working in IE11

The following .click()-method is fired in Chrome without problems.
In Internet Explorer it is only fired if I refresh the page (F5). If I access the page by entering the url (or redirected by a buttonclick from an other page) the .click-method is NOT fired.
But if I put an alert("?") before the .click() it works in IE too!
Why does it not work correctly in IE? I can't let the alert() be there...
$(window).load(function() {
//Fake click on the last used Tab
alert("?");
$("#"+GetCookie("lastTab["+window.location.pathname+"]")).click();
});
=> The available (clickable) tabs are created in
jQuery(document).ready(function($) {
...
});
EDIT From comments:
They are created inside the .read(function($) in this way:
$("#HillbillyTabs").append('<li>' + title + '</li>').after('<div id="Tab' + upperIndex + '"></div>');
After Container is created after the script:
<div id="tabsContainer"><ul id="HillbillyTabs"></ul></div>

Do not try to inject the function call, but rather add an event listener to the code. For example: (I made up some variables as your code did not indicate some things here)
var upperIndex = $('#tabsContainer').find('ul').length;
var title = "mytitle";
var newHeadId = 'TabHead' + upperIndex;
var newTabId = 'Tab' + upperIndex;
$("#HillbillyTabs").append('<li>' + title + '</li>').after('<div id="' + newTabId + '"></div>');
$("#HillbillyTabs").on('click', '#' + newHeadId, function() {
console.log(this.id);
SetCookie(this.id);
});

It seems IE does not recognize :
$(window).load()
You could try :
window.onload = function() {
$("#"+GetCookie("lastTab["+window.location.pathname+"]")).click();
};

Got the solution.
Curiously the fadeIn in the .load doesn't work for IE too (like the .click)
$(window).load(function() {
//Fake click on the last used Tab
alert("?");
$("#"+GetCookie("lastTab["+window.location.pathname+"]")).click();
// When the page has loaded in Chrome
$("#DeltaPlaceHolderMain").fadeIn(0);
});
For fading in I had to put the method immediately after the creation-method for the tabs (inside the .ready()) instead of the end of .ready().
There is now also the .click and it works now for IE.
jQuery(document).ready(function($) {
setTimeout(function() {
...
//Creation of tabs
$("#tabsContainer").tabs();
//Fake click on the last used Tab
$("#"+GetCookie("lastTab["+window.location.pathname+"]")).click();
// When the page has loaded in IE
$("#contentBox").fadeIn(0);
}, 0);
//.click NOT here
});
Thanks for your fast responses and tips!
Kind regards

Not able to working with popup webpages using casperjs

I am new to casper js. I am not able to click a button on an overlay page. Can you tell me how to work with overlay page using casper js?

Well, these events should help you :
casper.on('popup.created', function() {
this.echo("url popup created : " + this.getCurrentUrl(),"INFO");
});
casper.on('popup.loaded', function() {
this.echo("url popup loaded : " + this.getCurrentUrl(),"INFO");
});
And here an exemple :
casper.then(function(){
this.clickLabel("Activate your account");
// */mail/* = RegExp for the url
this.waitForPopup(/mail/, function(){
this.test.pass("popup opened");
});
this.withPopup(/mail/, function(){
this.viewport(1400,800);
this.test.pass("With Popup");
//following, a 'wait instruction' because I have a redirection in my popup
this.waitForSelector(".boxValid", function(){
this.test.assertSelectorHasText(".boxValid", "Inscription confirmed");
});
});
});
To know how it works, look at the doc.

Javascript redirect only seems to work when chrome debugger is open

I have written a Jquery-Ui Dialog to popup as a confirmation on particular links. This however does not redirect to my Delete page correctly. However if I open the debugger in chrome to debug, then the code works as expected.
I have found the same question, however the solution does not seem to work for me. It is exactly the same scenario though. Question here JavaScript redirect not working and works only in Chrome if debugger is turned on
So I have my link
<div id="confirm-dialog">
<div class="dialog-inner">
<p id="confirm-dialog-message"></p>
</div>
</div>
Delete
And I have my javascript
$('.confirmLink').click(function (e) {
BodyScrolling(false);
var theHref = $(this).attr("href");
var theTitle = $(this).attr("title") == null ? "Confirm..." : $(this).attr("title");
var theText = $(this).attr("data-confirm-message") == null ? "Are you sure?" : $(this).attr("data-confirm-message");
$("#confirm-dialog-message").html(theText);
$("#confirm-dialog").parent().css({ position: "fixed" }).end().dialog("open");
$("#confirm-dialog").dialog({
title: theTitle,
close: function() {
BodyScrolling(true);
},
buttons: [
{
text: "Yes",
class: "mws-button red",
click: function () {
$("#confirm-dialog").dialog("close");
window.location.href = theHref;
return false;
}
},
{
text: "No",
class: "mws-button black",
click: function () {
$("#confirm-dialog").dialog("close");
}
}]
});
return false;
});
So when I click my Delete link, I am indeed presented with my confirm dialog with Yes and No buttons, css styled correctly, and has captured the link href and bound it to the Yes button. If I click "No", I am kicked back and nothing further happens - Correct!
If I click Yes, it should take send me on to the original href that it captured. I have thrown alert(theHref) on the Yes Button click just before the redirect and it does show me the correct address (/Customer/Delete/73865878346587), but the redirect does not happen.
When I open the chrome debugger to debug the javascript or see if any errors occurred, then everything works as expected and redirects me correctly!
In IE, it does not work either.
I have tried...
window.location.href = theHref
window.location = theHref
location.href = theHref
$(location).attr('href', theHref)
I have also tried adding return false; after my redirect. Nothing works.
The link I added above to the same question said to make sure that the Yes button is being rendered on the page as a ... which mine is.
Can anyone shed any light?

Instead of window.location.href = theHref;
have you tried window.location.replace(theHref);?
Back to basics, try: window.location = theHref;

Well I have found the answer. Javascript was a red herring!
I did try to remove the confirmLink jQuery class so that the link was just a standard link that went straight to my controller to perofm my delete. When I did this test, the link worked perfectly. Therefore I denoted the problem be with my javascript. However, it seems that this was not quite the case and had only worked again if the Debugger in Chrome had been or was open at the time aswell.
When I revisited the non confirm link option again, I found this not to work properly, therefore denoting the problem not with the javascript.
It appears that you cannot perform a Delete action from a HTML Link in MVC. This is obviously because of security risks involved as anyone could perform a Delete on an Id. I had thought of this in my implementation and had added code to check where the Request had come from and if it wasn't from my List page, then it threw back an error and wouldn't perform the Delete. It didn't matter what I named my controller either, eg Test, the link performing my HTTP GET request would never hit this. There must be some algorithm that determines what the action is doing and stops you from performing the action on a HttpGet request. For more information about Delete Actions, check out this post http://stephenwalther.com/archive/2009/01/21/asp-net-mvc-tip-46-ndash-donrsquot-use-delete-links-because
It seems that you can only perform this by a HTTP Post, which means either using a Ajax.ActionLink or by using a Form and a submit button. Then your Action must be specified for HttpPost.
If, like me, you wish to keep your Link as a HTML Link, then you can do the following which is what I did, code below. I kept my HTML Link, set it up to point to my HttpPost Delete Action. Added my confirmLink class for jquery to bind my dialog box to. I pick up the link href and set the Yes button in the jquery dialog to dynamically create a Form and set the method to post and the action to the links href. Then I can call submit on the new dynamically created form to perform my Post to my Delete action.
My Delete Link
Html.ActionLink("Delete", "Delete", "Caterer", new { id = caterer.Id }, new { #class = "mws-ic-16 ic-delete imageButton confirmLink", #data_confirm_title = "Delete " + caterer.Name, #data_confirm_message = "Are you sure you want to delete this caterer, " + caterer.Name + "?" })
My Javascript
function LoadConfirm() {
$('.confirmLink').click(function (e) {
e.preventDefault();
BodyScrolling(false);
var actionHref = $(this).attr("href");
var confirmTitle = $(this).attr("data-confirm-title");
confirmTitle = confirmTitle == null ? "Confirm..." : confirmTitle;
var confirmMessage = $(this).attr("data-confirm-message");
confirmMessage = confirmMessage == null ? "Are you sure?" : confirmMessage;
$("#confirm-dialog").dialog({
autoOpen: false,
modal: true,
width: 400,
closeOnEscape: true,
close: function () { BodyScrolling(true); },
title: confirmTitle,
resizable: false,
buttons: [
{
text: "Yes",
class: "mws-button red",
click: function () {
StartLoading();
$(this).dialog("close");
var form = document.createElement("form");
form.setAttribute("method", "post");
form.setAttribute("action", actionHref);
form.submit();
}
},
{
text: "No",
class: "mws-button black",
click: function () {
$("#confirm-dialog").dialog("close");
return false;
}
}
]
});
$("#confirm-dialog #confirm-dialog-message").html(confirmMessage);
$("#confirm-dialog").parent().css({ position: "fixed" });
$("#confirm-dialog").dialog("open");
});
}
My Action
[HttpPost]
[Authorize(Roles = "User")]
public ActionResult Delete(long id)
{
//Perform my delete
return RedirectToActionPermanent("List");
}