I'm banging my head against the wall here, and hoping I'm just blind to something obvious.
I have this DOM structure:
<ul>
<li>
<h3>Lorem ipusm</h3>
<p class="remove-story">Delete</p>
</li>
</ul>
And this is my jQuery:
$(".remove-story a").click(function()
{
var parent = $(this).closest('li');
$.get($(this).attr('href'), function()
{
$(parent).fadeOut();
});
return false;
});
As it stands, clicking on the link within .remove-story does nothing, and the action triggered by the URL in the link does not occur either.
No JS errors pop-up in the console either on page load or when clicking the link.
If I remove the $.get function and simply fade out the list item, that works as expected.
If I visit the URL manually (or remove the return false and click the link), the link works and the back-end action completes (story removed).
Is there an error in my code here that anyone can spot? If not, any ideas as to where to look next to troubleshoot this?
I would firstly check if that get request really been send our, I mean using some tool like Fiddler or Chrome developer tool network tab, and then maybe add break point inside the call see if the parent you in that certain context is nothing or a wrong object
Wrap your onclick with $(document).ready(function() {}):
$(".remove-story > a").click(function(e)
{
var parent = $(this).closest('li');
alert($(this).attr('href'));
$.ajax({
url: $(this).attr('href'),
success: function() {
alert(12);
$(parent).fadeOut();
},
error: function(e) {
alert('baaaahhhh:' + e);
}
})
//e.stopPropagation();
return false;
});
Update: Changed $.get to $.ajax to see if thrs error while doing Ajax request.
You need to encode your link encodeURIComponent($(this).attr('href'));
Here is a jsfiddle working:
http://jsfiddle.net/9Wnt8/
Related
I am using NavigationHandler.handleNavigation as suggested here (ExternalContext.dispatch() not working) since I am using an ajax request.
It works but I see the next page in the middle of the page (more or less) instead of seeing it in the top of the page.
I tried using an anchor as suggested here (http://www.computerhope.com/issues/ch001475.htm) but it also doesn't work.
Any idea of what is happening?
Here is my code:
context.getApplication().getNavigationHandler().handleNavigation(context, null, "/user-registration.xhtml#top");
I have added the following in the beginning of the body of the next page:
<a name="top"></a>
The correct approach to scroll the window to top is window.scrollTo() with x and y of 0:
window.scrollTo(0, 0);
This keeps your URL free of hash fragment clutter.
In order to invoke it on success of every JSF ajax event, include the following script in the document.
jsf.ajax.addOnEvent(function(data) {
if (data.status == "success") {
window.scrollTo(0, 0);
}
});
See also:
Execute JavaScript after every JSF ajax postback
Finally I solved it with the following script:
<script type="text/javascript">
$(document).ready(function() {
location.hash = "#top";
});
</script>
In my page automation script, when I click a label link, a new window will be opened. The url of the link is generated by a complicated javascript.
<a class="link_text" href="#" onclick="process('2c913f9e4c7314e1014c74a4a5e02573')">办理任务 </a>
after triggered the url becomes:
https://oa.phicomm.com/workflow/doJob.action?taskVo.processExecutionId=2c913f9e49d0d5280149d12fabd90dd0&taskVo.taskId=10851011
I try to use the API- casper.waitForPopup after I do the click action.
casper.waitForPopup(/.+/, function(){
this.echo(this.getTitle());
}, null, 20000);
But it failed as wait timeout 20000ms expired. I also tried put the urlstring as the parameter:
casper.waitForPopup(/oa.phicomm.com\/workflow\/doJob\.action\?taskVo\.processExecutionId=2c913f9e49d0d5280149d12fabd90dd0&taskVo\.taskId=9100818/, function{
this.echo(this.getTitle());
});
still timeout. I also capture the screenshot, clearly it's still in the previous page. I try the thenOpen method directly inputting the url. It works. But since I want to auto it, I can't know the url before I actual trigger the link. I am a newer to CasperJS, anyone knows how to solve this problem? Thanks.
There was same issue with me i have resolve this problem by first selector exist or not
casper.[waitForSelector][1]('#example_id', function() {
this.echo("yes");
});
If your selector exist then try this
casper.[waitForPopup][1](0, function() {
this.echo('Popup');
});
casper.withPopup(0, function() {
this.capture('screen.png');
});
Read more about waitForPopup
I'm trying to put together a snappy webapp, utilizing JS, Prototype and AJAX for all my requests once the GUI has loaded. The app is simple: A set of links and a container element to display whatever the links point to, just like an iframe. Here's an approximate HTML snippet:
<a class="ajax" href="/somearticle.html">An article</a>
<a class="ajax" href="/anotherarticle.html">Another article</a>
<a class="ajax" href="/someform.html">Some form</a>
<div id="ajax-container"></div>
The JS that accompanies the above (sorry it's a bit lengthy) looks like this:
document.observe('dom:loaded', function(event) {
ajaxifyLinks(document.documentElement);
ajaxifyForms(document.documentElement);
});
function ajaxifyLinks(container) {
container.select('a.ajax').each(function(link) {
link.observe('click', function(event) {
event.stop();
new Ajax.Updater($('ajax-container'), link.href, {
method: 'get',
onSuccess: function(transport) {
// Make sure new ajax-able elements are ajaxified
ajaxifyLinks(container);
ajaxifyForms(container);
}
});
});
});
}
function ajaxifyForms(container) {
console.debug('Notice me');
container.select('form.ajax').each(function(form) {
form.observe('submit', function(event) {
event.stop();
form.request({
onSuccess: function(transport) {
$('ajax-container').update(transport.responseText);
// Make sure new ajax-able elements are ajaxified
ajaxifyLinks(container);
ajaxifyForms(container);
}
});
});
});
}
When clicking a link, the response is displayed in the container. I'm not using an iframe for the container here, because I want whatever elements are on the page to be able to communicate with each other through JS at some point. Now, there is one big problem and one curious phenomenon:
Problem: If a form is returned and displayed in the container, the JS above tries to apply the same behavior to the form, so that whatever response is received after submitting is displayed in the container. This fails, as the submit event is never caught. Why? Note that all returned form elements have the class="ajax" attribute.
Phenomenon: Notice the console.debug() statement in ajaxifyForms(). I expect it to output to the console once after page load and then every time the container is updated with a form. The truth is that the number of outputs to the console seems to double for each time you click a link pointing to a form. Why?
I found another way to achieve what I wanted. In fact, the code for doing so is smaller and is less error prone. Instead of trying to make sure each link and form element on the page is observed at any given time, I utilize event bubbling and listen only to the document itself. Examining each event that bubbles up to it, I can determine whether it is subject for an AJAX request or not. Here's the new JS:
document.observe('submit', function(event) {
if (event.target.hasClassName('ajax')) {
event.stop();
event.target.request({
onSuccess: function(transport) {
$('ajax-container').update(transport.responseText);
}
});
}
});
document.observe('click', function(event) {
if (event.target.hasClassName('ajax')) {
event.stop();
new Ajax.Updater($('ajax-container'), event.target.href, {
method: 'get'
});
}
});
Works like a charm :)
Well this has me well and truly stumped. After searching for the last few hours I still cannot seem to work out where I am going wrong.
I am trying to append an AJAX response to a container when it gets clicked. That works fine but I don't want it to append another object when the elements from the AJAX response also gets clicked.... so:
<div id="container">
<!-- AJAX response to get inserted here, for example -->
<span id="ajaxResponse"></span>
</div>
Here is my script:
$('#container').click(function(e) {
var current_el = $(this).get(0);
$.ajax({
url: 'text.html',
success: function(data) {
$(current_el).append(data);
}
});
return false;
});
So it works fine but for some reason the click event on #container also fires when I click on the AJAX response span!?
According to jQuery documentation:
To stop further handlers from
executing after one bound using
.live(), the handler must return
false. Calling .stopPropagation() will
not accomplish this.
But unless I am mistaken, I am calling false? :(
Anyone help me out on this?
UPDATED:
So the only way I can get it to work is by updating my code to this:
$('#container').live('click', function() {
var current_el = $(this).get(0);
$.ajax({
url: 'text.html',
success: function(data) {
$(current_el).append(data);
}
});
});
$('#ajaxResponse').live('click', function(e) {
return false;
});
This seems a little messy though... anyone have a better solution?
Where is live part you mention in the title of the question ?
It is how the event model works.. If you click on element which does not handle the event, the event will travel up the DOM hierarchy until it finds an element that handles the click (and stops its propagation..). Otherwise you would not be able to put an image inside a <a> tag and click on it..
You can bind a canceling handler on the inner element assuming you have someway to target it..
$.ajax({
url: 'text.html',
success: function(data) {
$(current_el).append(data);
// assuming the returned data from ajax are wrapped in tags
$(current_el).children().click(function(){ return false;});
}
});
I think the return false is referring to something else in this case...
you should try calling stopPropagation() - this should stop the "click" function from propagating down to the ajaxResponse span....
One option that you may want to try is switching over to using live(). Essentially, the click event you setup is calling bind(), and the solution you referenced is using live() which is a variation on bind().
For example:
$('#container').live("click", function(e) {
var current_el = $(this).get(0);
$.ajax({
url: 'text.html',
success: function(data) {
$(current_el).append(data);
}
});
return false;
});
HTH
I have a page which needs to use $.post() but for some reason the exact code works when I run it from the firebug console but not from my script? My script is:
$(document).ready(function () {
$('#dl_btn').click(function () {
$.post(
"news_csv.php",
$("#dl_form").serialize(), function (data) {
alert('error');
if (data == 'success') {
alert('Thanks for signing up to our newsletter');
window.open("<?php echo $_GET['link']; ?>");
parent.Shadowbox.close();
} else {
alert(data);
}
});
});
});
It isn't the link as that does get printed properly but it gives me an error on line 140 of jquery min, I have tried using different versions of jquery and to no avail. I really dont understand why this isn't working.
When I changed from $.post to $.ajax and used the error callback I did receive an error of 'error' and the error is undefined?
Don't suppose anyone has any ideas? Would be much appreciated.
Thanks,
Tom
Is your click button placed inside a form element?
Cause doing so, clicking on it will not only trigger the onClick event you have binded to, but form submit as well, so you will end up in a case where your browser is executing both requests in parallel - with unpredicted outcome, of course.
I tried the same code with an element that does not trigger form submit and it worked as expected.
One point though: if you plan to use simple string as a return value and to do something with it (display it or so) then is ok to do what you do right now. However, if you have more complex response from the ajax request, you should specify the response type (xml, json..) as the last parameter of the post method.
Hope this helps.