I have a problem with javascript $ .get (URL, callback); - javascript

Thanks for the support! - Sory, my english is bad!
I use this code to get the DOM component from the page entry to display on the homepage.
When I click on open-ajax, it loads the DOM from the entrypage and display in ajax-outer, when clicked on ajax-overlay, it will delete the DOM.
But I discovered an error, if I clicked on an open-ajax link and clicked on ajax-overlay immediately, get () will still load the DOM and display in ajax-outer.
It seems that ajax-overlay is unable to stop get ()
How can I optimize the code?
Html from Homepage:
<div class="main_content">
<a class="open-ajax" href="/link/101">1</a>
...
<a class="open-ajax" href="/link/10n">n</a>
</div>
<div class="ajax-wrap">
<div class="ajax-overlay"></div>
<div class="ajax-outer"></div>
</div>
Html from Entry:
<div class="coupon_content">
<div class="abc">
....
</div>
</div>
Javascript:
$('.main_content').on('click', '.open-ajax', function(e) {
var gethref = $(this).attr('href');
e.preventDefault();
$('.ajax-wrap').addClass('active');
$.get(gethref, function(sch) {
$('.coupon_content', sch).each(function() {
$('.ajax-outer').append($(this).html());
$("body").addClass('noscroll');
});
});
});
$('.ajax-overlay').click(function(e) {
$('.ajax-wrap').removeClass('active');
$('.ajax-outer').children().remove();
$("body").removeClass('noscroll');
});
Ví dụ tương tự : https://dribbble.com/shots

You can't prevent a ajax request but you can prevent the appending using a global variable
var canAppend = true;
$('.main_content').on('click', '.open-ajax', function(e) {
var gethref = $(this).attr('href');
e.preventDefault();
$('.ajax-wrap').addClass('active');
$.get(gethref, function(sch) {
if(canAppend) {
$('.coupon_content', sch).each(function() {
$('.ajax-outer').append($(this).html());
$("body").addClass('noscroll');
canAppend = true;
});
}
});
});
$('.ajax-overlay').click(function(e) {
$('.ajax-wrap').removeClass('active');
$('.ajax-outer').children().remove();
$("body").removeClass('noscroll');
canAppend = false;
});

You could hide the ajax-overlay when you click open-ajax and show it in the success callback, this way you make sure that the overlay will not be clicked until all the code is loaded:
$('.main_content').on('click', '.open-ajax', function(e) {
e.preventDefault();
var gethref = $(this).attr('href');
$('.ajax-wrap').addClass('active');
$('.ajax-overlay').hide();
$.get(gethref, function(sch) {
$('.coupon_content', sch).each(function() {
$('.ajax-outer').append($(this).html());
$("body").addClass('noscroll');
$('.ajax-overlay').show();
});
});
});

Related

how can i add an attribute onClick oto my links generated automatically?

I would like to add an attribute onClick to my links generated automatically with jquery.
I select the parent div and then search if it has a link child, then add the attribute onClick.
It works on localhost but not on server
there is my code :
$('div.holder_notify_drop_data,li.holder_notify_drop_data').each(function () {
if ($(this).children('a').hasClass('holder_notify_drop_link')) {
$(this).on('click', function (e) {
var url = $(this).children('a').attr('href');
$(this).children('a').attr('onClick', "openFrame('" + url + "','yes')");
e.preventDefault();
});
};)
};
How can i do this ?
Make sure you include jQuery:
<script src="http://code.jquery.com/jquery-latest.js"></script>
IMPORTANT: Also put your code inside a document-ready function and I would suggest you to use jQuery click() function instead of the way you have done, but that's okay:
$(document).ready(function () {
$('div.holder_notify_drop_data,li.holder_notify_drop_data').each(function(){
if ($(this).children('a').hasClass('holder_notify_drop_link')){
$(this).on('click',function(e) {
var url = $(this).children('a').attr('href');
$(this).children('a').attr('onClick',"openFrame('"+url+"','yes')");
e.preventDefault();
});
};
)};
});
Here's a working example http://jsfiddle.net/g248G/.
HTML:
<div class="holder_notify_drop_data">
<a class="holder_notify_drop_link"
href="http://stackoverflow.com">Stackoverflow.com</a>
</div>
<ul>
<li class="holder_notify_drop_data">
<a class="holder_notify_drop_link"
href="http://google.com">Google.com</a>
</li>
</ul>
Javascript:
function openFrame(URL, option) {
window.open(URL);
}
$(document).ready(function() {
$('div.holder_notify_drop_data,li.holder_notify_drop_data').each(function() {
$(this).children('a').each(function() {
var $link = $(this);
if ($link.hasClass('holder_notify_drop_link')) {
var URL = $link.attr('href');
$link.on('click', function(event) {
event.preventDefault();
openFrame(URL, 'yes');
});
}
});
});
});
Why not use jQuery.on() for that?
This will bind click function to all current and future elements of a in holder_notify_drop_data container.
$('.holder_notify_drop_data').on('click', 'a', function (ev) {
ev.preventDefault();
openFrame($(this).prop('href'), 'yes');
});

Function gets called twice for each click

The $(".actionsAdListnTo").click function is getting fired twice.
I tried various solutions posted in StackOverflow but nothing worked.
What is the reason of twice firing any pointers please.
How to avoid this?
$(".actionsAdListnTo").click(function (e) {
$('#actionsAdListnTo').slideToggle();
});
$(".ddlAddListinTo li").click(function () {
var urlstring = "../ActionTypes";
var ddlselectedVal = $(this).attr('id');
var $form = $("#frmPostToEmailReports");
var selectedListinsCount = selected_Listings.length;
var SelectedMlsnums = selected_Listings.join();
if (ddlselectedVal != "None" && ddlselectedVal != "select") {
//*********** To Cart Functionality
if (ddlselectedVal == 'Tocart') {
if (selectedListinsCount > 500) {
if ($('#errmesg').length == 0) {
$('.messageCenter').append('<span id="errmesg" class ="errmesg"> <span class="messageIcon"></span><span>The maximum number of listings you may select To Add to cart is 500.</span></span>');
return false;
}
} else {
$.post(urlstring,
function (data) {
$(window.open(urlstring, '_blank', 'width=750, height=400')).load(function (e) {
var $formCopy = $("#frmPostToEmailReports").clone();
$($formCopy).append('<input id="SelectedMlsnums" name="SelectedMlsnums" type="hidden" value="' + SelectedMlsnums + '">');
// Here "this" will be the popup window. insert a form element into the popup window.
$(this.document).find("#divfrmInfo").html($formCopy);
e.preventDefault();
});
});
}
}
}
});
HTML :
<div class="actionsAdListnTo">
<span> Add Listing To</span>
<ul id="actionsAdListnTo" class="ddlAddListinTo" style="display: block;">
<li id="Tocart">To CART</li>
<li id="Toportal">To Portal</li>
<li id="SaveListings">Save Listing</li>
</ul>
</div>
The click on li bubbles to its parents, one of them being <div class="actionsAdListnTo">, so the parent's click handler is also called. Try to stop propagation of the click on li:
$(".ddlAddListinTo li").click(function (e) {
e.stopPropagation();
...
In this case it looks it would be more correct to target the link only for the toggle and not the outer div. Be as specific with your selectors as possibe, similar to this:
$(".actionsAdListnTo a#select").click(function (e) {
$('#actionsAdListnTo').slideToggle();
});
If you want to be more specific without an id using the structure, you could do it simlar to:
$(".actionsAdListnTo > span:first > a").click(function (e) {
$('#actionsAdListnTo').slideToggle();
});
Anyway, the way your HTML is structured there is no need to have the toggle triggered by the div as only the link should react to it.
DEMO - Getting more specific with the selector
What I see here is that you are defining two events in the same place, the second one on a child.
$(".actionsAdListnTo").click( function(e){
...
});
$(".ddlAddListinTo li").click(function () {
...
})
Maybe you can use e.sTopPropagation() in the second one, or e.preventDefault()

Calling a specific function alone in javascript or jquery

i have a piece of code like this.
// HTML file
<div class="box" ng-click="displayinfo()">
click here to display info about this page.
<div class="content" ng-click="displaytext()">
Click here to display text.
</div>
click here to display info about this page.
</div>
// JS file
$scope.displayinfo = function()
{
alert('info');
}
$scope.displaytext = function()
{
alert('Text');
}
the thing is while clicking on 'click here to display text', it is calling both functions and displaying 'Text' and 'info'. but i dnt want to display 'info' here. i cannot change the html div structure.
how to do that?
It's a little hidden in the docs, but if you look here: http://docs.angularjs.org/api/ng.directive:ngClick
You can see that parameters it mentions an $event object. So your html will become:
<div class="box" ng-click="displayinfo($event)">
click here to display info about this page.
<div class="content" ng-click="displaytext($event)">
Click here to display text.
</div>
click here to display info about this page.
</div>
and then your javascript will become:
$scope.displayinfo = function($event)
{
$event.stopPropagation();
alert('info');
}
$scope.displaytext = function($event)
{
$event.stopPropagation();
alert('Text');
}
jsfiddle: http://jsfiddle.net/rtCP3/32/
Instead calling functions there inline use jquery to solve this issue:
$('.box').click(function(){
displayinfo();
});
$('.content').click(function(e){
e.stopPropagation(); //<-------------------this will stop the bubbling
displaytext();
});
demo code for e.stopPropagation(): http://jsfiddle.net/HpZMA/
var a = "text for info";
$('.box').click(function(){
$(this).append(a)
});
var b = "text for info";
$('.content').click(function(e){
e.stopPropagation(); //<-------------------this will stop the bubbling
$(this).append(b)
});
For native javascript solution you need to pass event as argument to your 2 methods in order to prevent the event from propagating
<div class="box" onclick="displayinfo(event)">
Then change js to:
var displayinfo = function(event) {
event.cancelBubble = true
alert('info')
}
var displaytext = function(event) {
event.cancelBubble = true
alert('text')
}
DEMO: http://jsfiddle.net/MvgTd/
whatever you are getting.stopPropagation();
in your case
$event.stopPropagation();

Reveal: jQuery Modal Plugin Won't Appear

I'm trying to use Reveal by Zurb to display a form, yet when I select the item that triggers the event the screen darkens like Reveal is working, but it will not show the pane. Any ideas? Thanks a lot for the help!
Planner.js
$(function() {
$('.event_list li').click( function(e) {
console.log(this.id);
$('#update_view_content').reveal('http://example.com/user/planner/update/'+this.id);
});
$('#updateForm').live('submit', function() {
var data = $('#updateForm').serialize();
var url = $(this).attr('action');
$.post(url, data);
return false;
});
});
From looking at the documentation online it seems there are no parameters for the reveal() method - the reveal method just shows a div on the screen, so
You would created markup on your page :
<div id="myModal" class="reveal-modal">
<h1>Modal Title</h1>
<p>Any content could go in here.</p>
<a class="close-reveal-modal">×</a>
</div>
then reveal it ...
$('#myButton').click(function(e) {
e.preventDefault();
$('#myModal').reveal();
});
If you want to load something into the div and then reveal i suggest this approach :
$('.event_list li').click( function(e) {
console.log(this.id);
$('#update_view_content').load('http://example.com/user/planner/update/'+this.id,function() {
$('#update_view_content').reveal();
});
});
That should load in the contents and then once the load has completed call the reveal method. untested

Jquery mouseover function not firing

I have this Jquery code:
$(document).ready(function() {
// Do menu mouseovers
$('.bar a').each(function() {
var Link = $(this);
var LinkID = Link.attr("ID");
$('.menu-pop').each(function() {
var PopID = $(this).attr("data-for");
// We have found a match, assign events
if (PopID == LinkID) {
Link.mouseover = (function() {
alert("trucks lol");
});
return;
}
});
});
});
It's for a popup menu I'm writing. The simplified structure of the menu is:
<div class="bar">
<a class="item">Home</a>
<a class="item" id="mnuAnother">Another Link</a>
</div>
<div class="menu-pop" data-for="mnuAnother">
Links and stuff
</div>
I'm expecting it to do the alert when my mouse goes over the "Another" link, but at present it throws no errors/no alert.
Any help appreciated.
Did you try
Link.mouseover(function() {
alert("trucks lol");
});
(using jQuery's mouseover function which is a shortcut for binding the mouseover event)
See: http://jsfiddle.net/rQ72v/
Change this:
Link.mouseover = (function() {
alert("trucks lol");
});
to this:
Link.mouseover(function() {
alert("trucks lol");
});
Link.mouseover = doesn't really make any sense.
Perhaps Link.onmouseover = would work (or would you need Link[0].onmouseover =?) in terms of raw JavaScript.
But, it's much better to use jQuery's .mouseover().
I would replace the
// ...
$('.bar a').each(function() {
var Link = $(this);
// ...
by something line
// ...
$('.bar a').each(function(item) {
var Link = $(item);
// ...

Categories