function Login(){
contentType: "get",
dataType: 'json',
success: function(data) {
$("#login").hide(); //hide the login button
$("#logout").show(); //show the logout button
$.mobile.changePage("#home"); //show the menu
},
error: function (response) {
var r = jQuery.parseJSON(response.responseText);
console.log(r);
alert("Error:" + r.error.text);
}
});
}
I have the above function to hide the login button however using jqm i have many login buttons on different pages all with the same id. When this function is accessed however only one of those buttons is deleted. It has something to do with every log in button having the same id however im not sure of any other way where i can delete all log in buttons without them having a different id and then hiding all on each individual page
A feature of IDs is that there is supposed to be one and only one element with a given ID. You might try using a class instead. Your HTML would change to be something like this:
From:
<button id="login" class="foo">Login</button>
to:
<button class="foo login">Login</button>
and your new jquery hide would be:
$(".login").hide();
Instead of using just the ID as the selector, how about accompany the element tag as well?
$('button#login').hide();
Or multiples!
$('button#login, div#login, input#login').hide();
JSFiddle: http://jsfiddle.net/wyze/HS3zS/1/
Related
I have problem getting the attribute value of clicked a href tag, happens when I click this href tag yes the value is showing, but when my browser send me to the peoplegallery_album the id now turning to null, I though my browser refresh that's why the value is turning to null. so happens the response shows nothing. '+gallery_content_title+'\
Question: Why my first clicked item the value is showing then after my browser send me to the second page i didn't get any response, is it because my browser refresh?.
I will show you the sample the clicked item return with value.
Now i created api to list of all items in the peoplegallery album with the id...
$(document).ready(function(){
$(document).on('click','.clicked_albums',function(e) {
var album_id= $(this).data('id');
alert(album_id);
$.ajax({
url:'http://localhost:8000/api/peoplegallery_album/'+ album_id,
type:'get',
data: {id: album_id},
dataType: "json",
contentType: "application/json",
processData: true,
success:function(response) {
console.log(response);
},
error:function(response) {
console.log(response);
}
});
});
});
So it look like this i didn't get any response after browser send me to the other page.
This is the expected behaviour of the link element. It takes you to the URL that is specified in the 'href' attribute.
If you want to prevent the location change add
e.preventDefault()
before
var album_id= $(this).data('id');
The right way to resolve data is to do it on the initial load of the page.
It could be achieved in the next way:
Check the id in the URL on the initial load.
If ID is present then make the API request with it.
If ID is absent do nothing.
Every time when you click on the link your page would be refreshed and the cycle will repeat.
Use localStorage instead of ajax
//This page
function a(e)
{
var t=e.getAttribute('id');
localStorage.setItem('id',t);
}
//Other page
var k=localStorage.getItem('id');
//for deleting
function b()
{
localStorage.removeItem('id');
}
<a id="23" onclick="a(this)" href="#">This had id 23</a>
<a id="23" onclick="b()" href="#">delete localstorage</a>
I have a page that has divs for delivery points (each with a child arrival button) on a route, and I wrote a script that appends the delivery point div to an empty div at the bottom of the page when the arrival button is clicked. I would like to preserve the moved divs at the bottom of the page if the page is refreshed, so that my driver on this delivery route doesn't get confused about which delivery point on the route to go to next.
This is the simple click function script that I need to add an ajax call to. As an aside, both the buttons with the class .arrived and their parent divs are dynamically named in the ruby loop that's printing them both out on my view.
$(".arrived").click( function() {
$("#item_" + $(this).attr("id")).appendTo("#delivered_collector");
});
I found another script elsewhere in the application that I THINK I can borrow logic from for this task, but I'm having some trouble making sense of it and how to translate it into my click function. This example preserves the state of checkboxes even if the page refreshes.
$('input.delivery_label_check').on('click', function(e)
{
var $id=$(this).context.id.split("_")[2];
var $checked=$(this).prop('checked');
$.ajax({type: "POST",
url: "/ops/mark_label/"+$id+"?checked="+$checked,
success: function(data) {
}});
e.stopPropagation();
});
If anyone can help me make enough sense of the second script to implement parts of it in the first, I'll be very grateful!
// select an input with the delivery_label_check class
// whenever one of those appears on the page, add a click function to it
// it doesn't matter when one appears (that's what "on" does)
$('input.delivery_label_check').on('click', function(e)
{
// the click target has an id like "#name_thing_5" so split("_")
// makes ['name','thing','5'], then it gets the last item (aka '5')
var $id=$(this).context.id.split("_")[2];
// is the box checked or not?
var $checked=$(this).prop('checked');
// here is your ajax call
$.ajax({type: "POST",
url: "/ops/mark_label/"+$id+"?checked="+$checked,
success: function(data) {
}});
e.stopPropagation();
});
Does that help?
I have this problem with my JQuery UI Modal window. Its used when i click a button, then it opens up and append contents to it trough an Ajax call to a php file. Works perfectly the first time i open it, but then when i click another button that should show different content, it still shows the old content in it, and i have to refresh the page for it to work.
This is my Dialog open event which is triggered by a switch, and the last part which appends data to my select box on creation.
$( "#attack" ).dialog({
resizable: false,
width:"400px",
buttons: {
Attack: function() {
$(this).dialog("close");
},
Cancel: function() {
$(this).dialog("close");
}
}
});
$("#users").selectmenu({
create: function( event, ui ) {
$.ajax({
type: "POST",
url: "mapfunctions/FetchUsers.php",
data: {RegionID: RegionID},
success: function(data) {
$("#users").append(data);
}
});
}
});
The dialog looks like this: http://i.imgur.com/02a2GYB.png
The HTML for it is a bit long, so i hope you dont need that dialog code, if so, let me know and i will add.
Its the Select menu which keeps the old data from the first ajax call.
I tried using Destroy and such on close, but then the dialog would simply never open again heh.
Thanks a lot people, hope this is enough for a clear understanding
This is very common problem with ajax and modal windows.. on clicking next button you have to reset the form and load it new.
for eg:
If you are using form with id "myForm" then on clicking another button reset the form like $("#myForm").trigger('reset'); in jQuery. or any other way
I have a jquery confirm dialog that takes some values and asks if we want to delete the records for them. The dialog box is prompted when I click a button. The problem is that if I simply close the dialog (not choosing nor Yes neither NO), the next time I open that dialog, it will display the message twice. If I do like this for a third time it displays it 3 times and so on ... Otherwise it works fine. But I want to fix this issue too.
Note: Several messages are displayed inside the same dialog box.
This is my code:
<script>
$(document).ready(function(){
$(".delete-button").click(function() {
var $row = $(this).closest("tr"); // Find the row
var names = $row.find(".name").text(); // Find the name
var surname = $row.find(".surname").text(); // Find the surname
$("#dialog").dialog({
autoOpen: false,
buttons : {
"Yes" : function() {
$.ajax({ type: "POST", url: "delete_lecturer.php", data: { x: names, y: surname} }) //sends post query to delete the selected row
.done(function( msg ) {location.reload();}) //reloads page in order for the change to take become evident
},"No" : function() {$(this).dialog("close");}
}
});
$("#dialog").dialog("open");
$('<p>Are you sure you want to delete lecturer '+names+' '+surname+'?</p>').appendTo('#dialog');
});
});
</script>
And here I create the div for it:
<div id="dialog" title="Action can not be reversed!"></div>
Im not putting the message inside the div because i need to pass the values name and surname in the message. But I think this is causing the problem.
You need to clear the contents of $("#dialog") for each click, otherwise each click results in an additional paragraph being added to the div.
Change
$("#dialog").dialog("open");
to
$("#dialog").html('').dialog("open");
or even
$("#dialog").html('<p>Are you sure you want to delete lecturer '+names+' '+surname+'?</p>').dialog("open");
$("#dialog").empty().dialog("open");
I have a menu bar which contains links for web pages. Now I want to add a login form with username and password with submit button in dilaogue box with locked screen on clicking of particular web pages. Its a kind of double login authentication.. As soon as log in submit button is clicked it should go to database to check the entered credentials and if it is correct will lead or show the clicked link..
To check the credentials I have made ajax call to server side code.. but I dont know how to add dialogue box and after success lead to required clicked page...
Here is my ajax call code..
$.ajax({
type: 'GET',
url: 'logincredit',
async:false,
dataType: "text",
success: function(data) {
}
});
Please guys help me ..
Thanks in advance..
You can add dialog script inside the success function.
like this
success: function(data){
if(data.d==true)
//show dialog code
else
//show something else
}