I am getting json in "data" and passing it in for loop. Onclick of buy button, it goes to the App function. On success I need to hide the buy button and display the download label.
My problem is onclick of 1st buy button, download link for both the buttons appear.
Ideally oneclick of first buy button, buy button should be hidden and download label should appear. similarly oneclick of second buy button, buy button should be hidden and download label should appear.
How do I get particular id of each button so that I can hide one at a time?
Please help me out
function (data)
{
var Class ='';
for (var i=0; i <data.length;i++)
{
Class += '<div name="buy\''+data[i].id+'\'" class="btn btn-primary btn-small" onclick="buy(\''+data[i].identifier+'\',\''+data[i].id+'\',\''+data[i].url +'\'); return false;" href=""></div><div class="download\''+data[i].id+'\'" id="download">D<span style="font-size:15px"></span></div>';
}
return Class;
}
App = function(identifier, app_id, url) {
$.ajaxSetup({
data : {
csrf_test_name : $.cookie('csrf_cookie_name')
}
});
var jqxhr = $.post(SITE_URL + 'admin/appstore/purchaseApp', {
identifier : identifier,
ap_id : ap_id
}).done(function(data1) {
obj = JSON.parse(data1);
bootbox.alert(obj.status, obj.label);
$("#download").html('<a href='+download_url+app_id+'>Download!</a>');
});
};
it is for loop am using.. am passing '; now how do I hide buy id? $("#buys"+"'"+data[i].id+"'").hide(); is this the right way? It gives me error
if you look at the actual markup generated in Class, you will see that your buy buttons don't have an id at all. perhaps something like
Class += '<div id="buy-button-'+data[i].id+'" name="...
Now you have a unique id on each button. The next part of your problem is knowing which button to remove after a successful Ajax call. You will need to include that in the data1, returned from the server. For the sake of argument, let's say the server returns the value in your data1 object as app_id. Then all you need to do is
jQuery('#buy-button-'+data1.app_id).hide();
Slightly off-topic, I'm not too keen on the way you're using single quotes in the buttons' name attributes, either, but I don't think that's relevant here.
Related
I want to display a form multiple times by clicking a button in vuejs, how is it possible?
is it possible to read number in a column from the database and display a form based on that number, for example if i want to register garage and also number of cars in that garage, by reading the number of cars in the garage table , i want to display number of forms based on that cars.
if it is two cars in the garage, then two forms will be displayed and so on.
There are tons of ways to do it, and the representation is delivered via v-for.
Specifics depend on what you want to show in form, are there loaded values, how do you want to save them etc.
In this example i get some variable form backend (it can also just be 0, as is the default value), and add a form item object for the received amount or whenever you press the button to the array that is iterated through. If you use Vue.set or =, Vue will notice difference and rerender the component with the changed v-for loop. (it doesn't notice, for example, push)
Then you would just submit and/or validate formValues
Alternatively you could also do something similar to v-for="number in range(0, 4)" and track the form values somehow else. Either way, world is your oyster.
<template>
<div>
<div v-for="(form, index) in formValues" v-key="index">
<form>
<input v-model="formValues[index].yourFormVariable">
<input v-model="formValues[index].yourOtherFormVariable">
</form>
<div>
<button #click="addCar()">
</div>
</template>
<script>
...
data () {
return {
formValues: [],
carAmount : 0,
}
},
...
methods () {
getCarAmount () {
/*however you want to get your variable from wherever, should launch it on computed or whenever you want to reset the value*/
this.carAmount = response.data.carAmount // carAmount being the db variable
for(let i = 0; i < this.carAmount; i++){
this.addCar()
}
},
addCar () {
this.formValues[this.carAmount] =
{
yourFormVariable: '',
yourOtherFormVariable: '',
};
this.carAmount++;
}
},
</script>
i have 2 tables
Now when i click detail , i want to show data from table 2 which have reportcode as i click on table 1 (image 1)
And now i want to show it on modal , so here is the example
1) click detail button -> get reportcode -> show reimbursename,etc to modal
Can you explain to me what should i do first ? and can you suggest me a plan please ,any answers will be appreciated. Thanks
My suggestion is:
1 - Add one class to detail button, i.e: detailButton and a data attribute or href with the especific reportCode.
<table>
<tr>
<td> ... </td>
<td> <button class='detailButton' href='<?php echo $reportCode; ?>' ... </button> </td>
2 - Add jquery to the bottom of the page:
$('.detailButton').click(function(e){
e.preventDefault();
var reportCode = $(this).attr('href');
var url = "yourUrl/controller/function";
$.post(url,{ code:reportCode },function(data){
//do stuff
//i.e: $('.modal').html(data).show();
});
});
Now you have a function that gets the reportCode, sends it to your controller by POST, you return something and the function gets the response and attach to a html.
Note, this way you must return a table from your controller. You could build dinamically too.
Hope it helps!
UPDATE:
You could check the values to your model and then use a exisitin template (for example one that generates the detail table), and return to your view as data to be attached at the correct position (method 1):
function detail(){
$getcode= $this->input->post('reportCode');
$data['showdetail'] = $this->model_expreport->showdetail($getcode);
$ret = $this->load->view('detail_template',$data,true); //return as data
print_r($ret);
}
Or you could use the Method 2:
function detail(){
$getcode= $this->input->post('reportCode');
$data['showdetail'] = $this->model_expreport->showdetail($getcode);
$this->output->set_content_type('application/json');
$this->output->set_output(json_encode($data));
}
This way, the view will recive a JSON that you could iterate and build your own page. Or you could create the full view and return it as data (in order to only append to your view).
You could use both.
In the view, you will recive either a full view:
$.post(url,{ code:reportCode },function(data){
$('#modal').html(data); //put the 'detail' response to the modal
}
Or with JSON you must iterate and build your own div dinamically, there are a lot of tutorials for this: https://uno-de-piera.com/cargar-json-con-jquery-y-codeigniter/
I have 3 links which are the names of students.On clicking a link first time or odd number time,another div which contains the details of that student appears.On clicking the same link on second time or even number time, I need to hide the student div.Its working perfectly for me using data() event of jquery.
My requirement is if I click first student link,div with the details of first student will come.If I click the second student link,details of second student will come.If I again click on first link,the student div will hide since data() is associated with it(I think so). But I want to make it displayed because,previous click was on the second link.
My html is like this
George
Leo
Kelm
My jquery:
$("#sections ").on('click','.student_link',function(){
var clicks = $(this).data('clicks');
//alert(clicks);
if (clicks) {
$("#div_students").hide();
//alert(1);
}
else
{
$("#div_students").show();
//alert(2);
}
$(this).data("clicks", !clicks);
return false;
});
That is if I click George for first time, the corresponding div of student will appear,If I click Leo without clicking George to hide the div,I need div of Leo should come.If I click George again,I need div with details of George should come.But for me the div is hiding since the variable click is already true for George.I need the div to be displayed if previous click was not on the current link.
You can use the following code:
$("#sections").on('click', '.student_link', function () {
var prevClickedId = $('#sections').data('prevId');
if (prevClickedId != $(this).attr('id')) {
// This was not the previous clicked element
} else {
// This was the previous clicked element
}
$('#sections').data('prevId', $(this).attr('id'));
return false;
});
You can so something similar to this:
$("#sections").on('click', '.student_link', function(){
if( $("#div_students").data('viewing') == $(this).attr('id') ) {
$("#div_students").hide().data('viewing', '');
}
else {
$("#div_students").show().text($(this).attr('id'));
$("#div_students").data('viewing', $(this).attr('id'));
}
return false;
});
Here's a working example: https://jsfiddle.net/7qwsguoq/
Why don't just use jquery toggle() method? it hides element when it's visible, and shows when it's hidden.
I have been trying to figure out this problem I've been having all day. I will give you a simplified run down of what I have been trying to do. The user enters a number, and however much the number is, is the number of categories there are going to be on the following page. Within each category, there is an input text button, along with an "Add Textbox" button that adds additional input textboxes dynamically. However, the problem here is that each category has this same setup on the same page. For example, if the user enters the number "3", then the page will vertically load three categories looking something like the following:
Category #1
(Initial user input textbox for category #1)
("Add Textbox" button to allow user to fill out another option)
Category #2
(Initial user input textbox for category #2)
("Add Textbox" button to allow user to fill out another option)
Category #3
(Initial user input textbox for category #3)
("Add Textbox" button to allow user to fill out another option)
The struggle I have been encountering is that each category button will need to have its own function, to tell the button where to place the textbox. This coupled with the fact that the number of categories changes depending on the user's input, has made things difficult. I started with the following:
var categoryCount = <?php echo $categoryCount; ?>;
var click = {};
for (var num=1;num<=categoryCount;num++) {
var newClick = "click_" + num;
click[newClick] = function() {
// some contents when this button is clicked
};
}
This JS creates an object of functions, which in JS would be able to be accessed by doing something like the following:
click['click_' + someID]();
However, the problem is that I cannot do this using the "onclick" attribute in my HTML/PHP button. I cannot access this object of functions, and cannot call any of the individual functions, obviously. I think I am going to need to rethink all of this and start again. I just can't think of another way to get this to work. Please share your ideas with me! Your help would be greatly appreciated.
For something like this, I'd write a constructor I could use like this
var cat1 = new Category(document.body);
Luckily for you, I also wrote one as an example. See the DEMO HERE. I haven't styled it at all for the new lines etc, though.
var Category = (function () {
var categoryCount = 0;
function elem(tag) { // shortcut
return document.createElement(tag);
}
function text(str) { // shortcut
return document.createTextNode(str);
}
function Category(node) {
var self = this; // this should have been var'd, oops!!
this.categoryId = ++categoryCount;
// make add button
this.addButton = elem('button');
this.addButton.appendChild(text('Add Textbox'));
this.addButton.addEventListener('click', function () {
self.addTextbox();
});
// make wrapper
this.wrapper = elem('section');
this.wrapper.setAttribute('id', 'cat'+this.categoryId);
this.wrapper.appendChild(this.addButton);
// make textboxes
this.textboxes = [];
this.addTextbox();
// append to document
if (node) {
this.append(node);
}
}
Category.prototype.addTextbox = function () {
var e = elem('textarea');
e.setAttribute('name', 'cat-'+this.categoryId+'-textbox[]');
this.textboxes.push(e);
this.wrapper.insertBefore(e, this.addButton);
};
Category.prototype.append = function (node) {
return node.appendChild(this.wrapper);
};
return Category;
}());
I have been trying to figure this out for hours to no avail.
I have the following
http://vitalets.github.com/x-editable/docs.html#newrecord
the new record module/code. Its functionality is, once all the rows have their data, and it is submitted, it retains its value so that it can stay editable.
I have tried adding input, select clearing code in the success of the ajax request and tried putting the .editable function inside an ajaxComplete function to see if it would reload the element on submit but it didnt. look at the demo. enter data, and submit. it then makes the data "permanent" so that it can continue to be editable.
I have removed the code that hides the button.
What i want it to do is, submit the record and reset so i can submit another with the form being 'Empty' and back to default.
I am developing an equipment tracker and would love if techs could just enter records, one after another. im sure its a simple fix to reset the form, i just cannot figure it out.
I have attached a screencast video of it.
http://www.youtube.com/watch?v=dPDuQCgOOSw
as it's popular question, I've added Reset button to documentation.
$('#reset-btn').click(function() {
$('.myeditable').editable('setValue', null) //clear values
.editable('option', 'pk', null) //clear pk
.removeClass('editable-unsaved'); //remove bold css
$('#save-btn').show();
$('#msg').hide();
});
It's better to use .editable('setValue', null) instead of .text('Empty') as we need also to reset internal value.
HTH
If you look how the "save new user button" is implemented, it just selects the anchor tags that have classname myeditable
Either you bind a function to your 'reset' button or have this script onclick
IF onclick:
jQuery.each($('.myeditable'),function() {
$(this).text('Empty') ; //this is your default text
});
OR as a function
function reset_myeditable()
{
jQuery.each($('.myeditable'),function() {
$(this).text('Empty') ; //this is your default text
});
}
and attach this to the onclick handler of your reset button
This I assume you will be putting a 'reset' button
EDIT
Ok zoom in to your $('#save-btn').click(function() success handler
success: function(data, config) {
if(data && data.id) { //record created, response like {"id": 2}
$(this).editable('option', 'pk', data.id);
//remove unsaved class
$(this).removeClass('editable-unsaved');
//show messages
var msg = 'New user created! Now editables submit individually.';
$('#msg').addClass('alert-success').removeClass('alert-error').html(msg).show();
$('#save-btn').hide();
$(this).off('save.newuser');
/**this the edited part**/
jQuery.each($('.myeditable'),function() {
$(this).text('Empty') ; //this is your default text
});
/**end of edit**/
} else if(data && data.errors){
//server-side validation error, response like {"errors": {"username": "username already exist"} }
config.error.call(this, data.errors);
}
},