Javascript Ajax JQuery - javascript

Here's my issue.
I have a javascript function that update a div when i click the proper link. And it is working.
Since i have cliked the link my div content is updated with another Javascript. This time to close it.
Its fairly simple but i cant get it to work and i dont know why!
Here is the code that is in the page when it load for the first time
The div id config_window
<div id="config_window" class="config_window">
<div id="conception" class="conception">Conception et design graphique Zéro Gravité.
</div>
<div id="admin_btn"class="admin_btn">administration.</div>
<div id="test">test</div>
</div>
Now the Javascript that call for the update inside that div
<script language="javascript" type="text/javascript">
$("#admin_btn").click(
function(){
$('#config_window').addClass('config_open');
config_set('config_window','open','var')
}
);
</script>
So far it's working my div is getting updated and i see the new content. The new content is
<div id="conception" class="conception">Conception et design graphique Zéro Gravité.
</div>
<div id="admin_btn_x" class="admin_btn">Terminer.</div>
<script language="javascript" type="text/javascript">
$("#admin_btn_x").click(
function(){
$('#config_window').removeClass('config_open');
config_set('config_window','close','var')
}
);
</script>
i was expecting that same function to work but its not!! and i dont get why since the first one is.
Could it be becuse my second script is in the div that get updated??
Thanks!

I suspect it's because the element that the second handler is supposed to apply to doesn't exist until after the DIV is updated and the function applying the handler is executed before the DIV is updated -- therefore the handler is not applied. You might want to try using the live handlers for the click event so that it will apply to all elements matching the selector no matter when the element is added. You can add both handlers on page load and they will apply to the elements with those ids whether they are added dynamically or not.
<script type="text/javascript">
$("#admin_btn").live('click', function(){
$('#config_window').addClass('config_open');
config_set('config_window','open','var')
});
);
$('#admin_btn_x').live('click', function() {
$('#config_window').removeClass('config_open');
config_set('config_window','close','var')
});
</script>

Is there a reason you add divide the function into two scripts? I would change your script to something like this:
<script type="text/javascript">
$(document).ready(function() {
$('#config_window').hide(); // just in case
$('#admin_btn').bind("click", function() {
if($('#config_window').is(':hidden')){
$('#config_window').show();
config_set('config_window','open','var')
} else {
$('#config_window').hide();
config_set('config_window','close','var')
}
});
});
</script>

Related

Adding a div on clicking a button but the divs which are added are not responding same

I am performing that On Button Clicked a div is created but issue is that it is not performing as same as main div is performing like resizing & draggable.Please Help?
<html>
<head>
<link rel="stylesheet" href="test.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
$(function () {
$("#box").resizable({
alsoResize:"#main",
alsoResize:"#title_bar",
alsoResize:"#container"
});
$('#main').draggable();
$("#button").click(function () {
if ($(this).html() == "-") {
$(this).html("+");
} else {
$(this).html("-");
}
$("#box").slideToggle();
});
$("#NewWidget").click(function() {
$("#container").append('<div class="main" id="main"><div id="title_bar" ><div id="button">-</div></div><div id="box"><div><h4>Hi user</h4><p>Hello Users. How are YOU?</p> </div></div>');
});
});</script>
</head>
<body>
<input type="button" id="NewWidget" value="Add New Widget"/>
<div id="container">
<div class="main" id="main" >
<div id="title_bar" >
<div id="button">-</div>
</div>
<div id="box">
<div>
The ID's needs to be unique, so if you create a lot of elements, either make ID's unique or use classes or data-id attribute to recognize which box is which - in the example in codepen i showed you how to create ID's with simple counter variable, that is available in this scope (remember about closures).
What you did in your code is only appending a new structure to DOM, there is no event handlers/hooks attached to this element, that's why you either need to create new event handler/hooks when adding the element to the DOM, or after, in my example, i will to it before adding the element to the DOM.
Here's link to codepen:
https://codepen.io/anon/pen/GEyPXr
Additional hint: whenever possible, avoid creating anonymous function, always either name them, or reffer to them, meaning:
$(".main").find('.button').on('click',function(){
// this looks weak, plus anonymous function doesn't tell you what it does
});
use this instead:
$(".main").find('.button').on('click',makeButtonWork);
function makeButtonWork(){
//this looks much better, plus you named the function and you know the purspose of it, without looking through code
}
To respond to comments:
changing starting position of given element can be done by adding:
$('#main-' + counter).css({'top': 100, 'left' : 20}) //your positions here
in the makeButtonWork
see updated codepen for more info
Javascript events don't work this way. Take it as that in the moment when you call $('#main').draggable();, then browser finds matching element (here the one with ID 'main') and does some action with it (here enables the draggable functionality).
If you later add another element, which would also have been matching, it doesn't mean anything - it is just a plain div, until you call some script again.
Also, keep in mind that ID's must be unique on your page, you can't have two id="main" divs on same page. Use classes instead.
$("#NewWidget").click(function() {
var $newElement = $('<div class="main"><div class="title_bar" ><div class="button">-</div></div><div class="box"><div><h4>Hi user</h4><p>Hello Users. How are YOU?</p> </div></div>');
$newElement.find('.main').draggable();
$newElement.find('.button').click( /* add the click handler function here */ );
$newElement.find('.box').resizable( /* resizable params goes here */ );
$("#container").append($newElement);
});

Show hidden HTML elements with javascript

I have the following in the <body> of my HTML
<div class="exact">
<div> <a id ="button_some_id" href="#"> Toggle Hidden </a></div>
<div id="item_some_id" hidden>This is hided</div>
<script type='text/javascript'>
$("#button_some_id").click(function() {$("#item_some_id").toggle();});
</script>
</div>
Link to jfiddle
The idea here is I want someone to be able to click on the Toggle Hidden link and it will show some hidden content (and when it is clicked again, hide it). However the javascript is not being triggered. Any help is greatly appreciated
You haven't inputted JQuery or JQuery UI into your JSFiddle's resources. Once putting them in, it works:
https://jsfiddle.net/tj8o8gwf/2/
$("#button_some_id").click(function() {$("#item_some_id").toggle();}); //works fine
Look at the External Resources section on the left hand side of the fiddle.
You also need to make sure the DOM is loaded.
$( document ).ready(function() {
$("#button_some_id").click(function() {$("#item_some_id").toggle();});
});
You need to make sure that jQuery is inputted
$(document).ready(function () {
$("body").on("click", "#button_some_id", function () {
$("#item_some_id").toggle();
});
});
Try this
//HTML
<div class="toBeHidden" hidden>This is hided</div>
//JS inside your click
if ($(".toBeHidden").is(":visible"))
{
$(".toBeHidden").hide('slow');
}
else
{
$(".toBeHidden").show('slow');
}

Refresh 2 divs with one click Jquery

Okay,
So I want to refresh 2 divs with ONLY 1 CLICK OF 1 BUTTON without actually refreshing the page itself.
I've tried the following
HTML:
<div id="main">
<a>
<div id="dialogue" class="dialogue">
<b class="dialogue">Click to continue</b>
</div>
</a>
</div>
Jquery:
<script>
$(document).ready(function() { /// Wait till page is loaded
$('#dialogue').click(function(){
$('#main').load('dialogue.php?test&count=<?php echo $count ?>', function() {
/// can add another function here
});
});
$('.dialogue').click(function(){
$('#head').load('dialogue.php?head', function() {
/// can add another function here
});
});
});
</script>
This in the HTML: <div id="dialogue" class="dialogue">
needs to activate 2 div refreshes, I did this so i can hook two things up.
The following scripts just bugs out and can only refresh itself once instead of a couple of times, please help.
Instead of having:
$('#dialogue').click(function(){
You could use:
$('#main').on('click', '.dialog', function(){
So the listener of the clic is attached to parent, and will work on new '.dialog' elements added inside of it.
You can call multiple functions inside the single click event, like so:
<script>
$(document).ready(function() {
// click event
$('#dialogue').click(function(){
// refresh first element
$('#main').load('dialogue.php?test&count=<?php echo $count ?>', function() {
// callback
});
// refresh second element
$('#head').load('dialogue.php?head', function() {
// callback
});
});
});
</script>
Since #dialogue is a child of #main, and you're replacing the contents of #main on click, the #dialogue button will disappear once clicked.
A minor note: your HTML is invalid. You can't have a <div> element (which is block-level) inside an <a> (which is inline). Try this markup instead:
<div id="main">
<a id="dialogue" class="button-dialogue">
<strong>Click to continue</strong>
</a>
</div>
Looks like HTML5 allows <a> elements to wrap lots of other stuff now. Thanks to Mathletics for the correction.

Can't make jQuery callbacks to work properly while calling same function repeatedly

I have a simple share button aside every post, I'm using .toggle() function to show and hide the options. The code looks something like this:
<div id="posts">
<div class="post">
<div class="content">
Post content
</div>
<div class="share">
<div class="trigger"> Share </div>
<div class="hidden"> Share on Facebook </div>
<div class="hidden"> Share on Twitter </div>
</div>
</div><!-- each post -->
<div id="new">
</div><!-- new post container -->
</div><!-- Posts -->
<script>
function shareThis(){
$('.trigger').click(function(){
$(this).siblings().toggle();
});
}
$(document).ready(function(){
shareThis();
$('#new').load("/post2", function(){
shareThis();
});
});
</script>
I call this function once when the page loads, and then every time a new post is loaded.
The problem is, it works in the first time when the page is loaded, and just works for the new element when a new post is loaded. I also tried this with 'each' function but same result.
So it's just working for the last call, similar to these question i found here and here, and some others, but didn't get a solution for my problem there.
Thanks!
The problem is, it works in the first time when the page is loaded, and just works for the new element when a new post is loaded.
Your issue could be that you are binding the event twice (or as many number of times you load #new contents) to the existing .trigger by calling shareThis inside the load callback. So basically when you click on the old .trigger it will trigger the handler twice, i.e toggling it twice which keeps them in the same state. SO either bind the event to the newly added ones alone or turn the click event off and turn it on in the function shareThis:
function shareThis(){
$('.trigger').off('click').on('click', function(){
$(this).siblings().toggle();
});
}
You could also try:
function shareThis(ctx){
ctx = ctx || document;
$('.trigger', ctx).click(function(){
$(this).siblings().toggle();
});
}
$(document).ready(function(){
shareThis();
$('#new').load("/post2", function(){
shareThis(this);
});
});
Try binding the click to the document instead. Only need to do it once :)
$(document).on('click', '.trigger', function () {
$(this).siblings().toggle();
}).ready(function () {
$('#new').load("/post2");
});
http://api.jquery.com/on/
http://training.bocoup.com/screencasts/more-efficient-event-handlers/

Can I assign an action from javascript dynamically?

Typically, I do this to prompt the alert box, and say Hello
<div style="color:#00FF00" onclick=alert("Hello"); id = "helloDivTag">
<h3>This is a header</h3>
<p>This is a paragraph.</p>
</div>
But this time, I don't want to do it inside the html tag, I want to do it inside the js. How can I do so? Thank you.
i would recommend using the jquery framework then you just do this
$(function(){
$('#helloDivTag').click(function(){
alert("Hello");
});
});
implementing it would look like this you just put it in the header
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script>
$(function(){
$('#helloDivTag').click(function(){
alert("Hello");
});
});
</script>
why i recommend using jquery and not simple javascript is because there is alot of other functionality that could get in handy almost everytime you want to do something
window.onload = function() {
document.getElementById('helloDivTag').onclick = function(){
alert('hi');
}
}
when the window loads the click event is attached to your div and whenever you do the clicks the alert happens. This is called seperating behvaiour from structure and style.

Categories