I have a template call game.php :
<div id="bonus-pub" class="not-display">
<section id="" class="generique">
<div id="">
content
<div id="rtr"></div>
<div id="gfgf class="not-display">
<h2>gfgf</h2>
<p>dsfdsfds</p>
<p class="GC_fdfdfd">
<a class="dfdf">Close</a> </p>
</div>
</div>
</section>
</div>
Now I have another view whitch is open as a popup after an action generique.php:
<section>
<?php require($file_view);?>
<script>
$(function(){
$('.modal').addClass('generic');
}())
</script>
And a have another file charge with js actions. In this file I need to create a .js call to load the <div id="bonus-pub" class="not-display"> into template generique.php, I tried :
<script>
document.getElementById('bonus-pub').setAttribute('class','display-block');
</script>
But this fonction only put the div into page not in popup windows. So the probleme is that I want to put <div id="bonus-pub" class="not-display"> from template game.php into generique.php after an action. Help me please!! Thx in advance!!!
Edit: Fixed the native JS and jQuery mix.
Have you tried this instead of using setAttribute:
<script>
document.getElementById('bonus-pub').style.display = "block";
</script>
Your requirement can be full filled using ajax. In game.php store all the div data in a php variable and echo that variable to the ajax call.
game.php
<?php
$ret = '<div id="bonus-pub" class="not-display">
<section id="" class="generique">
<div id="">
content
<div id="rtr"></div>
<div id="gfgf class="not-display">
<h2>gfgf</h2>
<p>dsfdsfds</p>
<p class="GC_fdfdfd">
<a class="dfdf">Close</a> </p>
</div>
</div>
</section>
</div>';
echo $ret;
?>
after your mentioned action make an ajax call for the game.php page
$.ajax({
url:'game.php',
method:'post',
success: function(response)
{
//you have your div data in this response
}
fail: function(response)
{
//your ajax request failed
}
});
Related
So I have asp.net core 2 project where I have one master view with this html:
<div>
#foreach (var factory in Model.factoryList)
{
<div class="factory-panel-content">
<div class="factory-main-info">
#factory.Name
<div class="city-name">#factory.CityName</div>
<div class="factory-some-value">
#factory.someValue
</div>
</div>
<div id="factory-plot-content">
</div>
</div>
}
And one partial view with (html only)
<div class="row">
<div class="col-md-4">
<div id="flot-line-chart" style="height: 100px"></div>
</div>
<div class="col-md-2">
<div id="flot-pie-chart" style="height: 100px"></div>
</div>
<div class="col-md-2">
<div id="gauge"></div>
</div>
What I need is to get partial view for every #factory-plot-content in my master view for each of my factory.
Using ajax like below change only one of the #factory-plot-content - the first one (I understand why) but I don't know what is the best way to call ajax.get foreach of factory divs.
My ajax: (Which I call in master page. It will be great to call it while foreaching factories)
$(document).ready(function () {
$.ajax({
url: '/home/ShowShortFactoryInfo',
success: function (data) {
$("#factory-plot-content").html(data);
}
});
})
The first idea I had is to make custom ids like "factory-plot-content-#Model.FactoryName" but I'm kinda sure that this is an ugly way to reach result I need.
You can try with following code:
<div>
<script>
var factoryNumber = 0;
</script>
#foreach (var factory in Model.factoryList)
{
<div class="factory-panel-content">
<div class="factory-main-info">
#factory.Name
<div class="city-name">#factory.CityName</div>
<div class="factory-some-value">
#factory.someValue
</div>
</div>
<div class="partial-data" id="factory-plot-content">
<script>
getPartialData(function(data){
let partialData = $(".partialData")[factoryNumber];
partialData.html(data);
factoryNumber++;
});
</script>
</div>
</div>
}
<script>
function getPartialData(cb){
$.ajax({
url: '/home/ShowShortFactoryInfo',
success: function (data) {
cb(data);
}
});
}
</script>
Hope it helps :)
I try to change html element, on php if statement, I tried this:
<?if ($item['DISCOUNT_PRICE']<$item['PRICE'] AND $item['DISCOUNT_PRICE']>0):?>
<?//MM-227?>
<div class="catalog-product__old-price-outer">
<?=price($item['PRICE'], $item['CURRENCY'])?>
</div>
<?//MM-227?>
<script>
$(".inner-price-block .price-offer").css("color","red");
</script>
<?endif;?>
<div class="inner-price-block">
<div id="sku_price_<?=$item['ID']?>" class="price-offer">
<?=price($item['DISCOUNT_PRICE'], $item['CURRENCY']);?>
</div>
</div>
I try to change class price-offer, with this script:
<script>
$(".inner-price-block .price-offer").css("color","red");
</script>
what I missed?
Try this :
<script>
$(document).ready(function() {
$(".inner-price-block .price-offer").css("color","red");
});
</script>
You can use php instead of jquery to put condition like below:
<?php $color="";
if ($item['DISCOUNT_PRICE']<$item['PRICE'] AND $item['DISCOUNT_PRICE']>0):
$color="red";?>
<?//MM-227?>
<div class="catalog-product__old-price-outer">
<?=price($item['PRICE'], $item['CURRENCY'])?>
</div>
<?php endif;?>
<div class="inner-price-block">
<div id="sku_price_<?=$item['ID']?>" class="price-offer" <?= ($color!=''?'style="color:'.$color.'":""'?>>
<?=price($item['DISCOUNT_PRICE'], $item['CURRENCY']);?>
</div>
</div>
i am working on wordpress right now and i am creating a SPA with 3 cols. The left and middle cols are static, the right one is dynamic based on the links of the first two cols. Right now i have the solution, that i load all the specific in the right col with position: absolut and visibility: hidden. But if i try my webpage on a mobile phone, it works a bit slow. My code looks like this:
<div class="content"> <!-- open class="content"-->
<script> //script for URL-Change by clicking on Link !Start
function showDetailContent(showid) {
var id = document.getElementsByClassName('shown');
for (var i=0;i<id.length;i++) {
id[i].classList.remove('shown');
};
document.getElementById("right_" + showid).classList.add('shown');
};
Path.map("#/?p=<?php the_id();?>").to(function () {
showDetailContent(<?php the_id();?>);
});
Path.listen();
</script> <!--script for URL-Change by clicking on link !Start-->
<div class="col"><!-- Start col (left)-->
<?php while(have_posts()):the_post();?> <!-- Start while (left)-->
<?php if (in_category('infotext')):?> <!--start if-request for category-->
<div class="infotext animated bounceSwitch"> <!--start infotext and animation-->
<h1>
<?php the_title();?> <!-- h1 of col(left)-->
</h1>
<?php the_content(__(''));?> <!-- get the post-content in it -->
</div> <!-- close infotext and animation-->
<form> <!-- start form login-->
<input id="user" class="bg-whitesmoke" type="text" placeholder="Benutzername" />
<input id="pass" class="bg-whitesmoke" type="password" placeholder="Passwort" />
<input id="submit" class="bg-grey" type="submit" value="Anmelden" />
</form> <!-- end form login-->
<?php endif;?> <!-- end if-request for category-->
<?php endwhile;?>
</div> <!-- end col(left) -->
<div class="col"> <!-- Start col (mid)-->
<?php while(have_posts()):the_post();?><!-- Start while (mid)-->
<?php if (in_category('apps')):?><!-- start if request for category-->
<div id="products-wrapper" class="products-wrapper round-borders-panel bg-brightgrey">
<h1>
<?php the_title();?> <!-- h1 for col(mid-->
</h1>
<?php the_content(__(''));?> <!-- get post content-->
</div>
<?php endif;?> <!-- end if request for category-->
<?php endwhile;?> <!-- End while(mid)-->
</div><!-- End col (mid)-->
<div class="col animated bounceInRight">
<?php while(have_posts()):the_post();?>
<div class="content-right">
<div id="right_<?php the_id();?>" class="right">
<div id="products-wrapper" class="products-wrapper round-borders-panel bg-brightgrey">
<div id="product-01" class="product-preview"> <!-- start div-->
<div id="product-title" class="product-image product-title"><!-- get titel and image-->
<img src="./img/products/logos/logo-cloudshare.png" /><!-- get logo-->
<h1><?php the_title();?></h1><!-- h1 for col(right)-->
</div><!--end product-image-->
<?php the_content(__(''));?><!-- get post content-->
</div><!-- start product-01-->
</div><!-- end product-wrapper products-wrapper round-borders-panal bg-bright-grey-->
</div><!-- end class right-->
</div><!-- end content-right-->
<?php endwhile;?><!-- end while(right)-->
</div> <!-- close col(right)-->
-->
So, is there any opportunity to create the content right on clicking on a link and deleting it if another link is clicked? Or is this really the best solution?
Have a nice day, Yannic :).
use can use an ajax call by jquery ajax tool $.ajax
here is full documentation:
http://api.jquery.com/jQuery.ajax/
make a new php file like loader.php that according to a get request with id parameter returns data for your right column
you should code something like following code snippet
$('div .right').click(function(){
$.ajax({
type:'GET' // request type 'get' or 'post'
url:loader.php, // your destination file that request will get sent
data:{id:2}, // data you pass to your destination its something like loader.php?id=2 in php
success:function(data){
this.html(data); // *data* is your returned value from your php file and now can do anything you want with your returened value
}
});
})
I have organized the page this way:
<div class="singlePost">
<div class="post"> </div>
<div class="comments" data-idPost="310"> </div>
<div class="formComment">
<textarea data-idPost="310"></textarea>
<button data-idPost="310">Insert</button>
</div>
</div>
<div class="singlePost">
<div class="post"> </div>
<div class="comments" data-idPost="304"> </div>
<div class="formComment">
<textarea data-idPost="304"></textarea>
<button data-idPost="304">Insert</button>
</div>
</div>
I used html5 data-attributes to distinguish posts and my jquery code is:
$(".formCommento button").click(function() {
idPost=$(this).attr('data-idpost');
text=$('textarea[data-idpost="'+idPost+'"]').val();
noty({text: 'I\'m going to insert '+text});
//and here i make the ajax request
return false;
});
I think this is not the way to organize this kind of stuff. I have the problem that when i click on the button i have multiple actions running together so the same comment is inserted several times. What do you suggest to do?
If you are learning to "organize" as well, I would suggest only to use once your data-, like:
<div class="singlePost" data-postId="310">
<div class="post"> </div>
<div class="comments"> </div>
<div class="formComment">
<textarea></textarea>
<button class="btn-submit">Insert</button>
</div>
</div>
<div class="singlePost" data-postId="311">
<div class="post"> </div>
<div class="comments"> </div>
<div class="formComment">
<textarea></textarea>
<button class="btn-submit">Insert</button>
</div>
</div>
then, fire it for every button:
$(".singlePost .btn-submit").click(function() {
var singlePost = $(this).closest(".singlePost"), // get singlePost block
postId = singlePost.attr("data-postId"), // read data attribute
txt = singlePost.find("textarea").val(); // get it's own textarea value
// do your magic
});
Here's a live example: http://jsbin.com/iyomaj/1/edit
try this, pass related context, by default jQuery uses document as context so it search in whole document
$(".formComment button").click(function() {
var parentdiv = $(this).closest('.formComment');
idPost=$(this).attr('data-idpost');
text=$('textarea[data-idpost="'+idPost+'"]',parentdiv ).val();
noty({text: 'I\'m going to insert '+text});
//and here i make the ajax request
return false;
});
I need to add a class to a div inside a shadowbox and I am using jQuery to do this.
jQuery("#all_records #"+id).addClass("selectedDiv");
In such circumstances, I usually check if I am calling the right div, and in this case it turns out I am. But unfortunately, it is never adding the class to the div.
<div id="all_records">
<div id="50157186" class="records_dealer_activation" onclick="select_customer(50157186);">
</div>
</div>
function select_customer(id){
jQuery('#sb-player #choosen_customer_activation_duplicate').prepend('<div class="overlay"> <div class="modalprogress"> <div class="theprogress"> <img class="image_load" src="<?php echo base_url();?>images/progress_bar.gif" alt="loadanimation" /></div> </div> </div> ');
jQuery("#sb-player #choosen_customer_activation_duplicate").load("<?php echo site_url().'/'.$main_controller;?>"+"/load_show_selected_customer_activation/?customerID="+id+"&type=duplicate");
if(jQuery("#all_records > div").hasClass("selectedDiv"))
{
//THIS IS WORKING
jQuery("#all_records > div").removeClass("selectedDiv");
}
//NOT WORKING
//alert(jQuery("#sb-player #all_records #"+id).html());
//document.getElementById(id).className += "selectedDiv";
jQuery("#all_records #"+id).addClass("selectedDiv");
}
Any suggestions?
Can you post your javacript function, btw this work for me:
<script type="text/javascript">
function select_customer(id){
jQuery("#" +id).addClass("selectedDiv");
}
</script>
<div id="all_records">
<div id="50157186" class="records_dealer_activation" onclick="select_customer(50157186);">
Click me
</div>
</div>