I am trying to put new data attributes to my div, all is good and I can set it with jquery, but I need to reload that div in order to generate new stuff inside it. I am trying to populate new PowerBI dashboard every time user selects new dashboard. I am using powerbi.js library in order to do that, first time when page loads with strict data-attributes it works, I just thinking how to change it inside page without reloading all the page.
$('#Report').attr('powerbi-access-token', apptoken);
$(".btn-success").click(function(){
var getValue = $(this).attr('atributas');
var listData = <?php echo json_encode($listas);?>;
var fubar = ((listData[getValue]['name']));
$('#Report').hide();
$('#Report').attr('powerbi-report', listData[getValue]['id']);
$('#Report').attr('powerbi-embed', listData[getValue]['embedUrl']);
$("#Report").hide().fadeIn('fast');
$('#Report').show();
$('#Report').reload();
});
});
</script>
<div class="side-body padding-top">
<script>window.powerbi = window.powerbi || {};</script>
<div id="Report" powerbi-access-token=""
powerbi-embed="https://embedded.powerbi.com/appTokenReportEmbed?reportId=2a647e7f-6103-4ace-a2fa-dasdasd"
powerbi-report="589bacd1-aa9c-47aa-987b-asdasd" style="height:859px">
</div>
Related
Im probably overlooking something very obvious but at this point i surrender and need help.
Here is my situation. When my page loads, in a while loops, PHP generates a table with data from my server. Each table row has a name column, phone, etc. One of the columns is an icon that when clicked allows the user to view a popup with notes on this particular lead. Easy stuff.
The icons in each row have the same class name and their ID's are unique.
I have an AJAX request that should be pulling the notes data from the server and displaying it in the popup when the user clicks on the relative icon. I am trying to use $('.class').click(this).attr('id'); to set a variable in my AJAX request with the id that needs to be submitted to my PHP script.
PROBLEM: The AJAX request and return seems to be working fine but no matter which row icon I click on it only displays the data that belongs to the first row, or the first instance with the class name 'homelead' Example: I click on row 1 icon and i get a popup with row 1's notes, GREAT!. I click on any other row and it only shows the 1st rows data, :(. I have confirmed that the ID's associated with each row icon are correct by doing a simple click.(this).(id) and alerting the id belonging to the row icon. All is correct, just can't seem to get the JS variable to update with the correct ID.
Im confused why this is. Any help would be appreciated. Here is my current code.
HTML:
<td>
<img class="homelead" id="<?php echo $leadsfetch['unit_id'];?>"
onclick="ajax_unitnotes();" src="images/list-view.png">
</td>
<?php echo "</tr>"; } ?>
AJAX request:
function ajax_unitnotes(){
var hr = new XMLHttpRequest();
var url = "PHP/getnotes.php";
// this variable should update with clicked rows id before submitting to PHP script
var unitidnotes = $('.homelead').click(this).attr('id');
var vars = "unitidnotes="+unitidnotes;
hr.open("POST", url, true);
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
hr.onreadystatechange = function() {
if(hr.readyState == 4 && hr.status == 200) {
var return_data = hr.responseText;
document.getElementById("unitnotes").innerHTML = return_data;
}
}
hr.send(vars);
document.getElementById("unitnotes").innerHTML = "processing...";
}
As you are using an onclick trigger in the tag itself - which is usually un common when using jQuery. You can do this:
<img class="homelead" id="<?php echo $leadsfetch['unit_id'];?>"
onclick="ajax_unitnotes($(this));" src="images/list-view.png">
And the in your function
function ajax_unitnotes(e){
var unitidnotes = e.attr('id');
}
Your current code
var unitidnotes = $('.homelead').click(this).attr('id');
Actually does not know what it the this object you are trying to access.
Better yet you can use a jQuery event, remove the onclick from the img tag and have an event like this:
$('.homelead').click(function(){
id = $(this).attr('id');
});
You could pass the clicked object this to the function trigged by "onclick":
onclick="ajax_unitnotes(this);"
That will make the DOM object you clicked on available inside the JS function.
You need to change the function signature accordingly:
function ajax_unitnotes(clickedElement){
and then you can alter this
var unitidnotes = $('.homelead').click(this).attr('id');
to
var unitidnotes = clickedElement.id;
This will give you the value of $leadsfetch['unit_id'] = img id.
Let's see if I can explain what I'm trying to do here..
I've got a MySQL Database with some info stored in it. I am using PHP to query the database, pull my selected entries out, put each one into a separate <div> (with Bootstrap framework). I have accomplished this part.
Below is a snippet of what I'm doing...
$query = "SELECT `quote`,`id` FROM `db`";
$result = mysqli_query($con,$query);
while($row = mysqli_fetch_array($result))
{
echo ' <div class="panel panel-info">
<div class="panel-body text-muted" id="'.$row['id'].'">
'.$row['quote'].'
</div>
</div>';
}
Then I am wanting to use jQuery to add a css class on "click" to an individual <div> and be able to then use PHP to store the text of the "selected" <div> to a variable, for later use.
This is the part I am struggling with, I can not figure out how to separate each individual <div> specifically and have jQuery add the class to it, because the "id" of div differs with every result from the db query.
To add a class to a div when it is clicked -
jQuery
$('div').click(function() {
$(this).addClass('foo');
var divText = $(this).text(); // store to JavaScript variable
});
Now that you have the JavaScript variable stored you can send it to a PHP function via AJAX.
What I would do is add a class to the <div>s, and use that to attach the event.
<div class="panel-body text-muted click-panel" id="'.$row['id'].'">
Then in your JavaScript, do something like:
$(function(){
$('div.click-panel').click(function(){
var div_id = this.id,
div_text = $(this).text();
if(/* some condition eg. div_id === 5 */){
$(this).addClass('clicked');
}
});
});
so i have a php loop, i am using jquery slide toggle to hide/show a table with sql results. currently the table is loaded using php only, but as there is a lot going on its causing some loading problems i need to fire the ajax with the slide toggle btn, so it only requests the current items details when the button is pressed. i can get it to call the php file from the jquery but im having difficulty passing the value for each item across, so it can perform the request on the database. here is what the php foreach loop content looks like;
<span class="searchitem">
// some visible content here
<span value="item name" class="btn">button</span>
<span class="slide_area">
// hidden slide content ajax needs to populate with php result
</span>
</span>
this html is repeated i use jquery slidetoggle to hide the slide_area, what i need to do is populate the slide_area with results from php, the php file needs the name to return the results the name is passed via get with the url, so i only need append the url with the actual name from btn's value, im sure this cant be that difficult but here i am.
here's the jquery:
<script type="text/javascript">
//<![CDATA[
$(document).ready(function ()
{
$('.searchitem').each(function () {
$(this).find('.slide_area').hide();
$(this).find('.btn').click(function ()
{
var ajax_load = "<img src='images/spinner.gif' style='width:50px;' alt='loading...' />";
var loadUrl = "ajax/item.php?name=";
var loadName = $(".btn");
var Name = URLEncode(loadName);
var loadString = loadUrl + Name;
$(this).parent().find('.slide_area').slideToggle(1500).html(ajax_load).load(loadString);
});
});
});
//]]>
</script>
i need to get the value from btn and append the loadURL, im open to sending the data a different way like through post if needed, updated the jquery still not working what am i doing wrong here?
Thanks.
The easiest way would to use the Phery library http://phery-php-ajax.net/
the key here is the data-phery-remote="toggle" that will call the PHP function automatically on click, and can be reused everywhere
<span class="searchitem">
// some visible content here
<span value="item name" data-phery-remote="toggle" class="btn">button</span>
<span class="slide_area">
// hidden slide content ajax needs to populate with php result
</span>
</span>
The logic is reversed, the load will happen with only one AJAX call, instead of two.
Phery::instance()->set(array(
'toggle' => function($data){
$r = new PheryResponse;
/* do your code, fill $html_content */
$r->this()->siblings('.slide_area')->html($html_content)->toggle();
return $r;
}
))->process();
Usually with PHP and editing you click on a link that goes to a separate PHP page that has the "ID" of the entry you want to edit, you get the ID and populate your form base on this.
I would like to know how to do this if I am using a modal form? How do I get the ID get the records associated with it then populate the modal form.
sort of like this
//dropdown behavior for resp task and sub_task
$('#r_task_id').change(function() {
var selected_task_id = $('#r_task_id').val();
$.post("Assignment/populateSubTaskDropDown", { 'selected_task_id' : selected_task_id },//$_POST['selected_task_id']
function(data){
$('#r_sub_task_id').empty();
$.each(data, function(val, text) {
$('#r_sub_task_id').append(
$('<option></option>').val(val).html(text)
);
});}, "json");
});//task
PHP code is:
$this->session->set_userdata('selected_sub_task_id', $this->input->post('selected_sub_task_id'));
$json_resp_user = $this->assignmentModel->getResponsibleUsers($this->session->userdata('selected_sub_task_id'));
$json = array();
$json[0] = "-Select-";
if( count($json_resp_user) >= 1 ){ //if there is more in the result than the -Select-
foreach($json_resp_user as $detail){
//$json[$detail->user_id] = $detail->first_name." ".$detail->middle_name." ".$detail->last_name;
$json[$detail->user_id] = $detail->first_name." ".$detail->last_name;
}
}
echo json_encode($json);
but for the whole form not just a dropdown.
When you open the modal window set the id of the record in a public javascript variable, and on submit of the modal form pass the id parameter through url.
Another way is to have a hidden variable inside the form in the modal window and set it with the while opening the modal window. So it will be get passed the update form on the modal window is submitted.
<script>
id ='' //Set this when opening the modal window
function appendId(myform)
{
myform.action = myform.action + "/" + id;
return true;
}
</script>
<div id='modalWindow'>
<form onsubmit='return appendId(this)'>
//other elements
</form>
</div>
I had a quick read of $.post() of jQuery and apparently that was what I meant =p
the part on your script with
id ='' //Set this when opening the modal window
was where I was stuck on how to read that.
http://api.jquery.com/jQuery.post/
sorry if I wasn't clear but thank you for taking the time and trouble to answer me.
I use this links and divs on my site:
<p>Menu1 | Menu2 | Menu 3|</p>
<div id="menu_1" class="mymenu">
</div>
<div id="menu_2" class="mymenu">
</div>
<div id="menu_3" class="mymenu">
</div>
And this jquery to hide and show the menu.
$('div[class*="mymenu"]').hide();
var current;
var showMenu = function(e) {
// read the id out of the clicked elements id ('navlink_ID')
var id = e.id.split('_');
$('div#menu_' + id[1]).show();
// store this element as new current visible
current = e;
}
// hide all menu elements
$('div.mymenu').hide();
$('a.navlink').click(function() {
if (this != current) {
// check if an element is visible -> hide it and show new menu
if (current) {
var id = current.id.split('_');
$('div#menu_' + id[1]).hide(200,showMenu(this));
} else {
showMenu(this);
}
}
return false;
});
How can i modify this code, if i reload the page, then the last visible DIV is stay visible. (i dont want to use query string for this. I try with jquery session but not work..)
Thank you for help...
Cookies would be the ideal way to persist your collapsible divs, ShopDev has an excellent tutorial on how to acheive the same thing as you are attempting to do, using the jQuery cookie plugin.
Basically you set a value in the cookie for each div that you want to persist and whenever the event happens you update the value in the cookie, e.g.:
$.cookie('menu_1', 'expanded');
Also you need to check when the page is first loaded the state of each div, e.g.
var menu_1 = $.cookie('menu_1');
if (menu_1 == 'collapsed') {
$('#menu_1').css("display","none");
};
Simplest pure JavaScript way: set cookie.