I have the following code:
<div class="brm-item-name">204 Banane, Milch & Erdbeeren <button type="button" class="btn btn-info btn-xs" id="pop" data-toggle="modal" data-target="#myModal"></button></div>
"204 Banane, Milch & Erdbeeren " is pulling from database but text does not have a space in the database. The space here is giving me trouble when writing css. Do you have any suggestions on this?
You can remove it using jQuery trim().
jQuery(document).ready(function($) {
$('.brm-item-name').trim();
})
Related
I have two sets of buttons for every package, one for inserting data into my database and the other for deleting data from the database.
When I click the 'Select' button data will be inserted through AJAX and then hide the 'Select' button and display the 'Selected' button. When I click on the 'Selected' button the data will be deleted from the database through an AJAX call. The 'Selected' button will then be hidden and the 'Select' button will be shown again.
All the select & selected buttons are within a PHP while loop so the buttons have the same name but incremental IDs. When I click on one single 'Select' button, the other button is also showing me 'Selected'. I need something to track the each button ID when I click.
<div class="col-sm-2">
<a class="btn btn-primary select-btn select-btn-broadcast" id="<?php echo $id ; ?>" onClick="addintoListBroadcast(this)">Select</a>
<a class="btn btn-primary active-button active-button-broadcast" id="<?php echo $id ; ?>" onClick="deleteintoListBroadcast(this)" style="display: none;">Selected</a>
</div>
<script>
$('.select-btn-broadcast').click(function (e) {
var pkgId = this.id;
//alert(pkgId);
$('.select-btn-broadcast').hide();
$('.active-button-broadcast').show();
});
$('.active-button-broadcast').click(function(e) {
$('.select-btn-broadcast'.show();
$('.active-button-broadcast').hide();
});
</script>
The main issue with your code is because you select all the elements with the given class, not just the one related to the element which was clicked. To fix this use the this keyword to traverse the DOM to find the sibling() a element, and then amend it as required.
Also note that there's several other things you can improve in your code. Firstly, don't use inline CSS. Use the classes you've already applied to the elements to amend their styling in an external stylesheet.
Similarly, don't use inline event handlers such as onclick. Call the relevant functions within the unobtrusive event handlers you've bound through jQuery.
With all that said, here's a working example:
$('.select-btn-broadcast').on('click', function(e) {
$(this).hide().siblings('.active-button-broadcast').show();
// addintoListBroadcast(this);
});
$('.active-button-broadcast').on('click', function(e) {
$(this).hide().siblings('.select-btn-broadcast').show();
// deleteintoListBroadcast(this);
});
.active-button-broadcast {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-2">
<a class="btn btn-primary select-btn select-btn-broadcast">Select</a>
<a class="btn btn-primary active-button active-button-broadcast">Selected</a>
</div>
<div class="col-sm-2">
<a class="btn btn-primary select-btn select-btn-broadcast">Select</a>
<a class="btn btn-primary active-button active-button-broadcast">Selected</a>
</div>
<div class="col-sm-2">
<a class="btn btn-primary select-btn select-btn-broadcast">Select</a>
<a class="btn btn-primary active-button active-button-broadcast">Selected</a>
</div>
I have a fetch the JSON records from the database I need to link a href tag to the code but unable. Whats wrong with me? In a console, I see simple td without a href tag.
htmlData += '<tr><td><a href="base_url + "'order/getWork/'" + ord_id">'
+ord_item_Json_string[i].code+'</a></td>
<td>'+ord_item_Json_string[i].item+'</td>
<td>'+ord_item_Json_string[i].size+'</td>
<td>'+ord_item_Json_string[i].color+'</td>
<td>'+ord_item_Json_string[i].qty+'</td><td>'+"New Order"+'</td>
<td><button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal" id="create-jobcard">Create Card</button></td>
</tr>';
$('#OrdItem tbody').empty();
$('#OrdItem tbody').append(htmlData);
you have a problem with quotations marks( "" / '' ) try this out,
htmlData += '<tr><td><a href="'+base_url+'order/getWork/" + ord_id">'
+ord_item_Json_string[i].code+'</a></td>
<td>'+ord_item_Json_string[i].item+'</td>
<td>'+ord_item_Json_string[i].size+'</td>
<td>'+ord_item_Json_string[i].color+'</td>
<td>'+ord_item_Json_string[i].qty+'</td><td>'+"New Order"+'</td>
<td><button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal" id="create-jobcard">Create Card</button></td>
</tr>';
hope this helps
I'm having a problem with my script. The file wont open if the filename has single quote.
Is there a way to prevent single quote in window.open?
<a class="btn btn-primary btn-xs" onclick="window.open('content_files/<?php print($contRow['cont_file']); ?>','<?php print($contRow['cont_file']); ?>','height:auto;width:auto;')">
<i class="glyphicon glyphicon-edit"></i> View
</a>
here's the output
7TATTOOED ON MY MIND CHORDS (ver 2) by D'Sound # Ultimate-Guitar
Sample Output 1.
Sample Output 2.
You should encode your filename I think:
urlencode($contRow['cont_file'])
I tried this code:
<a class="btn btn-primary btn-xs" onclick="window.open('content_files/<?php print(addslashes($contRow['cont_file'])); ?>','<?php print(addslashes($contRow['cont_file'])); ?>','height:auto;width:auto;')">
<i class="glyphicon glyphicon-edit"></i> View
</a>
and It works like a charm. thanks anyway. Credits to the one who deleted he's post but it works.
I can show details data in a new page using details.php using anchor tag like bellow :
<a class="btn btn-info" href="details.php?view_id=<?php echo $row['studentID']; ?>" title="click for Details" onclick="details.php"><span class="glyphicon glyphicon-eye-open"></span> Show Details</a>
Now I am trying to learn it to show using bootstrap modal box like code bellow:
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Details</button>
I have put the code of "details.php" in #myModel section and how I can show details data using dynamic ID - comes from view_id= for the code I am trying?
Please help me to understand my mistake. Thank you.
i want to make a button click counter. When you click the button the text from it changes, when the button is clicked i want to write to the database but i can't manage this.
<button type="button" class="btn btn-info" style="width:90%;" id="textChanger" onclick="counter;"><h4><i class="glyphicon glyphicon-earphone" aria-hidden="true"> </i> XXXX XXX XXX <h6>Show Number</h6></h4></button>
document.getElementById("textChanger").onclick= function(){
document.getElementById("textChanger").innerHTML="<h4><i class=\"glyphicon glyphicon-earphone\" aria-hidden=\"true\"> </i> <?php echo $nrTelefonAnunt ?> </h4>";
}
this is the code that i manage the text change, now what can i do to write to the database, i tried some methods but none worked
Thanks everybody for the answers i manged by adding this:
$('#textChanger').click(function(){
$.ajax({
url : 'rate.php?idanunt="<?php echo $idAnunt ?>"',
type : 'post',
success : function(data){
}
});
});
Try this
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<button type="button" class="btn btn-info" style="width:90%;" id="textChanger" onclick="counter;">1</button>
<script>
document.getElementById("textChanger").onclick= function(){
var count = document.getElementById("textChanger").innerHTML;
count = parseInt(count) + 1;
document.getElementById("textChanger").innerHTML=count;
}
</script>
Try this
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<button type="button" class="btn btn-info" style="width:90%;" id="textChanger" onclick="counter;"><h4><i class="glyphicon glyphicon-earphone" aria-hidden="true"> </i> <span>XXXXX</span> <h6>Show Number</h6></h4></button>
<script>
count=0;
$(document).on("click","button",function(){
count++;
$('span').text(count);
});
</script>